const scriptpath = '/registration/js/projects.js'
	, $script = document.querySelector(`[src="${scriptpath}"]`)
	, styles =`
		#qmProjectGallery {
			max-width: 720px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
		}
		#qmProjectGallery .qmProject {
			margin: 16px 0;
			border: 1px solid #cdcdcd;
		}
		#qmProjectGallery .qmProject > a {
			text-decoration: none;
			color: inherit;
			display: flex;
			align-items: center;
		}
		#qmProjectGallery .qmProject > a:hover {
			box-shadow: 0 14px 28px rgba(0,0,0,0.08), 0 10px 10px rgba(0,0,0,0.05);
		}
		#qmProjectGallery .qmProject img {
			width: 30%;
			aspect-ratio: 4/ 3;
			object-fit: cover;
			background-color: #f4f6f7;
		}
		#qmProjectGallery .qmProject h3 {
			margin-bottom: 0;
			padding: 0 16px;
		}
		#qmProjectGallery .qmProject p {
			margin-bottom: 0;
			padding: 0 16px 16px 16px;
		}
		
	`
;

function inject() {
	if(!$script) return alert(`Please confirm that the script tag has the src: ${scriptpath}`);
	
	const $parent = $script.parentElement
		, $sibling = $script.nextElementSibling
		, $contents = document.createElement('div')
		, projects = [
	{
		"id": "5f7dff66773e840079956fca",
		"files": [
			"5f7dff65773e840079956fb5",
			"5f7dff65773e840079956fb6",
			"5f7dff65773e840079956fb7",
			"5f7dff65773e840079956fb8",
			"5f7dff65773e840079956fb9",
			"5f7dff65773e840079956fba",
			"5f7dff65773e840079956fc0",
			"5f7dff65773e840079956fc1",
			"5f7dff65773e840079956fc2",
			"5f7dff65773e840079956fc3",
			"5f7dff65773e840079956fc4",
			"5f7dff65773e840079956fc5",
			"5f7dff65773e840079956fc6",
			"5f7dff65773e840079956fc7",
			"5f7dff65773e840079956fc8"
		],
		"media": [
			"/publish/media/5f7dff66773e840079956fc9"
		],
		"name": "Qoom Workshop Series: CSS and SVG Animation",
		"link": "guide.md",
		"folder": "qoom-of-the-week/20201007-cssandsvganimation",
		"description": "In this workshop you will learn how to build a web card that you can send to your friends and family."
	},
	{
		"id": "5f7dffea773e840079957105",
		"files": [
			"5f7dffe9773e8400799570f2",
			"5f7dffe9773e8400799570f3",
			"5f7dffe9773e8400799570f4",
			"5f7dffe9773e8400799570f5",
			"5f7dffe9773e8400799570f6",
			"5f7dffe9773e8400799570f7",
			"5f7dffe9773e8400799570f8",
			"5f7dffe9773e8400799570f9",
			"5f7dffe9773e8400799570fa",
			"5f7dffe9773e8400799570fb",
			"5f7dffe9773e8400799570fc",
			"5f7dffe9773e8400799570fd",
			"5f7dffea773e840079957103"
		],
		"media": [
			"/publish/media/5f7dffea773e840079957104"
		],
		"name": "Qoom Workshop Series: Interactive Responsive Gallery",
		"link": "guide.md",
		"folder": "qoom-of-the-week/20200923-responsivegallery",
		"description": "In this workshop you will learn how to build a web site that contains a gallery of items that will be searchable and sortable. This type of web site is very common when its owner wants highlight a collection of items. These items can be pretty much anything: products, photographs, topics, etc"
	}
]
	;
	$contents.id = 'qmProjectGallery';
	
	$parent.removeChild($script);
	
	
	if(!Array.isArray(projects)) {
		$contents.innerHTML = projects + '';
	} else {
		projects.forEach(p => {
			const link = p.link.startsWith('https://') || p.link.startsWith('http://') || /\.api$|\.app$|\.schemas$/.test(p.link) ? p.link : `/${p.folder}/${p.link}`
				, $div = document.createElement('div')
				, template = `
					<a href='${link}' target='_blank'>
						<img src='${p.media[0] || '/libs/icons/qoom.svg'}'>
						<div>
							<h3>${p.name}</h3>
							<p>${p.description}</p>
						</div>
					</a>
				`
			;
			$div.className = 'qmProject';
			$div.innerHTML = template;
			$contents.appendChild($div)
		});
	}
	
	if($sibling) $sibling.before($contents);
	else $parent.appendChild($contents);
	
	$style = document.createElement('style');
	$style.innerHTML = styles;
	document.head.appendChild($style);

}

inject();