html
	head
		title!=title
		include head
		style: include css/font.css
		style.
			body, h1, h2, h3, h4, h5, h6 { font-size: larger; }
		style: include css/view.css
		if color !== null
			style: include css/img.css
			style.
				img, video, audio { 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
		#container
			#content
				h4!=title
				figure
					if fileIs.video 
						video#media(controls loop muted playsinline preload='metadata')&attributes(resourceAttr)
					else if fileIs.image
						img#media(decoding='async')&attributes(resourceAttr)
					else if fileIs.audio
						audio#media(controls loop preload='metadata')&attributes(resourceAttr)
					else
						code!=mimetype
					figcaption
						br
						span Uploaded by #[strong!=uploader]
						br
						small #{timestamp} (#{size})
						br
						small: a(href='#' onclick=`window.location = '${resourceAttr.src}?download=yes'; return false;` download=title) Download
				#footer: p Image hosted by #[a#footer-link(href='https://github.com/tycrek/ass' target='_blank'): strong ass], the superior self-hosted ShareX server