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

{% block title %}
<title>Grant User Award</title>
{% endblock %}

{% block pagetype %}message{% endblock %}

{% 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">
				Awards
			</h1>
			<ul class="flex space-x-2 text-xs text-gray-500 dark:text-gray-400 leading-normal mb-0">
				<li>
					<a href="/admin" class="text-gray-500 hover:underline">Admin Dashboard</a>
				</li>
				<li>
					<i class="fas fa-arrow-alt-right text-shadow fa-fw fa-sm"></i>
				</li>
				<li>
					<a href="#" class="text-gray-700 dark:text-gray-500 hover:underline">Awards</a>
				</li>
			</ul>
		</div>
		<div class="ml-auto flex space-x-2">
			<button id="submit-btn" type="submit" form="awards-form" class="btn btn-green" disabled>
				<i class="fas fa-trophy fa-sm fa-fw mr-1"></i>
				Give awards
			</button>
			{% if request.host != 'rdrama.net' or v.admin_level > 2 %}
			<button onclick="post_toast('/admin/monthly')" class="btn btn-yellow">
				<i class="fas fa-dollar-sign fa-sm fa-fw mr-1"></i>
				Grant monthly MarseyBux
			</button>
			{% endif %}
		</div>
	</div>
</div>
{% endblock %}

{% block content %}
<div class="col-span-full my-4">

	{% if error %}
	<div class="alert alert-danger alert-dismissible fade show my-3" role="alert">
		<i class="fas fa-exclamation-circle my-auto"></i>
		<span>
			{{error}}
		</span>
		<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
			<span aria-hidden="true"><i class="far fa-times"></i></span>
		</button>
	</div>
	{% endif %}
	{% if msg %}
	<div class="alert alert-success alert-dismissible fade show my-3" role="alert">
		<i class="fas fa-check-circle my-auto" aria-hidden="true"></i>
		<span>
			{{msg}}
		</span>
		<button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
			<span aria-hidden="true"><i class="far fa-times"></i></span>
		</button>
	</div>
	{% endif %}

	<form id="awards-form" action="/admin/awards" method="post">
		<input type="hidden" name="formkey" value="{{v.formkey}}">
		<label for="input-username" class="label">Username</label>
		<input autocomplete="off" id="input-username" class="form-input mb-2" type="text" name="username" required placeholder="Enter a username" oninput="document.getElementById('submit-btn').disabled = false">

		<table class="w-full mt-6">
			<thead class="bg-primary text-white">
				<tr>
					<th scope="col" class="p-2.5">Icon</th>
					<th scope="col" class="p-2.5">Title</th>
					<th scope="col" class="p-2.5"></th>
					<th scope="col" class="p-2.5"></th>
					<th scope="col" class="p-2.5"></th>
					<th scope="col" class="p-2.5"></th>
					<th scope="col" class="p-2.5">Amount</th>
				</tr>
			</thead>
			<tbody>
			{% for a in awards %}
				<tr class="odd:bg-gray-300 dark:odd:bg-white/[.05] hover:bg-gray-400 dark:hover:bg-white/10 hover:cursor-pointer">
					<td class="px-2.5">
						<div class="w-16 h-16 p-2 flex items-center justify-center">
							<i class="{{a['icon']}} {{a['color']}} text-xl"></i>
						</div>
					</td>
					<td class="px-2.5 font-bold">
						{{a['title']}}
					</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td class="px-2.5">
						<input type="number" class="form-input" name="{{a['kind']}}" value="0" min="0" max="10" placeholder="Enter amount..." >
					</td>
				</tr>
			{% endfor %}
		</table>
	</form>

</div>
{% endblock %}