{% extends "CHRISTMAS/default.html" %}

{% block subHeader %}
	<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow dark:border-b dark:border-gray-700 sub-header"></div>
		<div class="relative col-span-full flex items-center">
			<div>
				<h1 class="font-bold text-xl font-heading leading-normal mb-0">
					Home
				</h1>
				<small class="block text-gray-700 dark:text-gray-400">
					<span class="capitalize font-bold">{{ sort }}</span>
					posts {{ 'from all time' if t=='all' else 'in the last' }}
					{% if t != 'all' %}<span class="font-bold">{{ t }}{% endif %}
				</small>
			</div>
			<div class="ml-auto">
				{% include "CHRISTMAS/dropdowns/SubmissionSorts.html" %}
			</div>
		</div>
	</div>
{% endblock %}

{% block desktopBanner %}
{% endblock %}

{% block content %}
<div class="col-span-full xl:col-span-9 dark:bg-gray-700 md:dark:bg-gray-800">

	<ul class="flex flex-col sm:py-4 my-2.5 sm:my-0" id="posts">
		{% include "CHRISTMAS/submission/SubmissionList.html" %}
	</ul>

	{% if listing %}
	<nav aria-label="Page navigation">
		<ul class="flex flex-wrap items-center mb-0 py-4 px-2.5 md:px-0">
			<li>
				{% if page > 1 %}
				<small>
					<a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="?sort={{sort}}&page={{page-1}}&t={{t}}{% if only %}&only={{only}}{% endif %}" tabindex="-1">
						Back
					</a>
				</small>
				{% else %}
				<button disabled class="block px-2 py-1 text-sm font-bold text-gray-700 bg-gray-800 cursor-not-allowed">Back</button>
				{% endif %}
			</li>
			<li>
				{% if next_exists %}
				<small>
					<a class="block px-2 py-1 text-sm font-bold text-primary bg-gray-900" href="?sort={{sort}}&page={{page+1}}&t={{t}}{% if only %}&only={{only}}{% endif %}">
						Next
					</a>
				</small>
				{% else %}
				<button disabled class="block px-2 py-1 text-sm font-bold text-gray-700 bg-gray-800 cursor-not-allowed">Next</button>
				{% endif %}
			</li>
		</ul>
	</nav>
	{% endif %}

</div>
{% endblock %}

<!-- Sidebar -->
{% block sidebar %}
	{% include "CHRISTMAS/sidebars/HomeSidebar.html" %}
{% endblock %}

{% block modals %}
	{% if v %}
		{% include "CHRISTMAS/award_modal.html" %}
	{% endif %}
{% endblock %}

{% block scripts %}

{% if v %}
	<script src="/assets/CHRISTMAS/js/award_modal.js?a=1"></script>
	<script src="/assets/CHRISTMAS/js/pusher.js?a=1"></script>
{% endif %}

<script src="/assets/CHRISTMAS/js/submission_listing.js?a=6"></script>

{% if v and not v.fp %}
	<script>
		function fp(fp) {
			var xhr = new XMLHttpRequest();
			xhr.open("POST", '{{request.host_url}}fp/'+fp, true);
			var form = new FormData()
			form.append("formkey", formkey());
			xhr.withCredentials=true;
			xhr.send(form);
		};

		const fpPromise = new Promise((resolve, reject) => {
			const script = document.createElement('script');
			script.onload = resolve;
			script.onerror = reject;
			script.async = true;
			script.src = 'https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs-pro@3/dist/fp.min.js';
			document.head.appendChild(script);
		})
			.then(() => FingerprintJS.load({token: '{{environ.get("FP")}}'}));

		fpPromise
			.then(fp => fp.get())
			.then(result => {if (result.visitorId != '{{v.fp}}') fp(result.visitorId);})
	</script>
{% endif %}

{% endblock %}