{% extends "default.html" %}
{% block pagetype %}lottery{% endblock %}
{% block pagetitle %}Lottershe{% endblock %}
{% block content %}
<div style="margin-top: 5rem">
	<div class="lottery-page--wrapper">
	<div class="lottery-page--image">
		<img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/{{SITE_NAME}}/lottery.webp?x=2">
		<img
		id="lotteryTicketPulled"
		src="{{SITE_FULL_IMAGES}}/i/{{SITE_NAME}}/lottery_active.webp?x=2"
		style="display: none"
		>
	</div>
	<div class="lottery-page--stats">
		<div class="lottery-page--stat">
		<div class="lottery-page--stat-keys">
			<div>Prize</div>
			<div>Time Left</div>
			<div>Tickets Sold</div>
			<div>Participants</div>
		</div>
		<div class="lottery-page--stat-values">
			<div>
			<img
				id="prize-image"
				alt="coins"
				class="mr-1 ml-1"
				data-bs-toggle="tooltip"
				data-bs-placement="bottom"
				height="13"
				src="{{'coins.webp' | asset_siteimg}}"
				title="Coins"
				style="display: none; position: relative; top: -2px"
			>
			<span id="prize">-</span>
			</div>
			<div id="timeLeft">-</div>
			<div id="ticketsSoldThisSession">-</div>
			<div id="participantsThisSession">-</div>
		</div>
		</div>
		<div class="lottery-page--stat">
		<div class="lottery-page--stat-keys">
			<div>Your Held Tickets</div>
			<div>Lifetime Held Tickets</div>
			<div>Lifetime Winnings</div>
		</div>
		<div class="lottery-page--stat-values">
			<div id="ticketsHeldCurrent">-</div>
			<div id="ticketsHeldTotal">-</div>
			<div id="winnings">-</div>
		</div>
		</div>

		<div class="lottery-page--stat">
		<div class="lottery-page--stat-keys">
			<div>Purchase Quantity</div>
		</div>
		<div class="lottery-page--stat-values">
			<div>
			<input
				id="ticketPurchaseQuantity"
				class="form-control"
				autocomplete="off"
				value="1"
				min="1"
				step="1"
				name="ticketPurchaseQuantity"
				type="number"
				style="flex: 1; max-width: 100px; text-align: center"
			>
			</div>
		</div>
		</div>

		<button
		type="button"
		class="btn btn-success lottery-page--action"
		id="purchaseTicket"
		data-nonce="{{g.nonce}}"
		data-onclick="purchaseLotteryTicket()"
		>
		Purchase <span id="totalQuantityOfTickets">1</span> for
		<img
			alt="coins"
			class="mr-1 ml-1"
			data-bs-toggle="tooltip"
			data-bs-placement="bottom"
			height="13"
			src="{{'coins.webp' | asset_siteimg}}"
			title="Coins"
		>

		<span id="totalCostOfTickets">12</span>
		</button>
	</div>

	{# Success #}
	<div
		class="toast"
		id="lottery-post-success"
		style="
		position: fixed;
		bottom: 1.5rem;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: unset;
		z-index: 1000;
		height: auto !important;
		"
		role="alert"
		data-bs-animation="true"
		data-bs-autohide="true"
		data-bs-delay="5000"
	>
		<div class="toast-body bg-success text-center text-white">
		<i class="fas fa-comment-alt-smile mr-2"></i
		><span id="lottery-post-success-text"></span>
		</div>
	</div>

	{# Error #}
	<div
		class="toast"
		id="lottery-post-error"
		style="
		position: fixed;
		bottom: 1.5rem;
		margin: 0 auto;
		left: 0;
		right: 0;
		width: unset;
		z-index: 1000;
		height: auto !important;
		"
		role="alert"
		data-bs-animation="true"
		data-bs-autohide="true"
		data-bs-delay="5000"
	>
		<div class="toast-body bg-danger text-center text-white">
		<i class="fas fa-exclamation-circle mr-2"></i
		><span id="lottery-post-error-text"></span>
		</div>
	</div>
	</div>
	<script defer src="{{'js/lottery.js' | asset}}"></script>
</div>
{% endblock %}