{% extends "default.html" %}
{% block pagetype %}lottery{% endblock %}
{% block pagetitle %}Lottershe{% endblock %}
{% block content %}
	<div class="lottery-page--wrapper">
		<div class="lottery-page--image">
			<img loading="lazy" src="{{SITE_FULL_IMAGES}}/i/{{SITE_NAME}}/lottery.webp?x=8">
			<img
			id="lotteryTicketPulled"
			src="{{SITE_FULL_IMAGES}}/i/lottery_active.webp?x=8"
			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="{{SITE_FULL_IMAGES}}/i/coins.webp?x=8"
					title="Coins"
					style="display: none; position: relative; top: -2px"
				>
				<span id="prize">-</span>
				</div>
				<div id="timeLeft">-</div>
				<div id="ticketsSoldThisSession">-</div>
				{% if v.admin_level >= PERMS['LOTTERY_VIEW_PARTICIPANTS'] %}
					<a href="/admin/lottery/participants">
						<div id="participantsThisSession">-</div>
					</a>
				{% else %}
					<div id="participantsThisSession">-</div>
				{% endif %}
			</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="{{SITE_FULL_IMAGES}}/i/coins.webp?x=8"
				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>
{% endblock %}