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.text-text-primary.bg-body
		.w-full.h-full.flex.justify-center.items-center.text-center
			.bg-content-bg.rounded-24
				h4.mt-6.mb-4.text-3xl.font-main!=title
				figure.block.mx-10.my-4.flex.flex-col.align-items-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 Uploaded by #[strong!=uploader]
						br
						span #{timestamp} (#{size})
						br
						span: a.link(href='#' onclick=`window.location = '${resourceAttr.src}?download=yes'; return false;` download=title) Download
				.mx-4.mb-8.text-footer: p Image hosted by #[a.link(href='https://github.com/tycrek/ass' target='_blank'): strong ass], the superior self-hosted ShareX server