html
	head
		title!=title
		include head
		if color !== null
			style.
				.res-media { border-color: #{color}; }

		// Open Graph (https://ogp.me/)
		meta(property='og:type' content=ogtype)
		meta(property=urlType content=discordUrl)
		.
			!{opengraph}

		// oEmbed (https://oembed.com/)
		link(href=oembedUrl title='oEmbed' rel='alternate' type='application/json+oembed')

		// Direct resource redirect
		if viewDirect
			style.
				* { display: none !important; }
			meta(http-equiv='refresh' content=`0; url='${resourceAttr.src}'`)

	body.font-main.bg-page
		.w-full.h-full.flex.justify-center.items-center.text-center
			.bg-viewer.rounded-24
				h4.mx-4.mt-6.mb-4.text-3xl.font-main.text-primary!=title
				figure.mx-10.my-4.flex.flex-col.align-items-center.justify-center
					.flex.justify-center
						if fileIs.video
							video.res-media(controls loop muted playsinline preload='metadata')&attributes(resourceAttr)
						else if fileIs.image
							img.res-media(decoding='async')&attributes(resourceAttr)
						else if fileIs.audio
							audio.res-media(controls loop preload='metadata')&attributes(resourceAttr)
						else
							code!=mimetype
					figcaption
						br
						span.text-2xl.text-primary Uploaded by #[strong!=uploader]
						br
						span.text-secondary #{timestamp} (#{size})
						br
						span: a.link(href='#' onclick=`window.location = '${resourceAttr.src}?download=yes'; return false;` download=title) Download
				if showAd
					.mx-4.mb-8.text-footer.text-secondary: p Image hosted by #[a.link(href='https://github.com/tycrek/ass' target='_blank'): strong ass], the simple self-hosted ShareX server