<script src="{{ static "js/showcase.js" }}"></script>

<template id="showcase_item">
<div data-tmpl="container" class="showcase-item ba b--theme flex-shrink-0 bg-dark-gray hide-child relative overflow-hidden pointer">
	<div data-tmpl="thumbnail" class="absolute absolute--fill z-0 flex justify-start items-center bg-left cover"></div>
	<div class="overlay absolute absolute--fill z-1 child">
		<div class="gradient relative">
			<div class="user-info flex pa2 white f7 lh-title items-center">
				<div data-tmpl="avatar" class="br-100 w2 h2 cover flex-shrink-0"></div>
				<div class="flex-grow-1 flex flex-column pl1">
					<div data-tmpl="username">Unknown User</div>
					<div data-tmpl="when" class="i f8">Unknown Time</div>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<template id="timeline_modal">
<div data-tmpl="overlay" class="timeline-modal fixed absolute--fill bg-black-80 z-999 flex flex-column justify-center items-center">
	<div data-tmpl="container" class="container timeline-item relative flex-shrink-0 shadow-1 flex flex-column items-stretch w-100 mh0 mh3-ns br2-ns overflow-hidden">
		<div data-tmpl="asset_container" class="bg-dark-gray flex justify-center"></div>
		<div class="bg--content pa3 overflow-y-auto">
			<div class="timeline-user-info mb2 flex items-center">
				<img class="avatar-icon lite mr2" data-tmpl="avatar"/>
				<a class="user" data-tmpl="userLink"></a>
				<a data-tmpl="date" class="datetime tr" style="flex: 1 1 auto;"></a>
			</div>
			<div data-tmpl="description">
				Unknown description
			</div>
			<div data-tmpl="tags" class="pt2 flex"></div>
			<div class="i f7 pt2">
				<a data-tmpl="discord_link" target="_blank">View original message on Discord</a>
			</div>
		</div>
		<div data-tmpl="close" class="absolute right-0 top-0 w2 h2 flex justify-center items-center bg-black-80 white br-100 ma1 pointer svgicon svgicon-nofix">{{ svg "close" }}</div>
	</div>
</div>
</template>

<template id="timeline_item_tag">
<div data-tmpl="tag" class="bg-theme-dimmer ph2 pv1 br2"></div>
</template>