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 = []
	;
	$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();