{% extends "default.html" %}

{% block title %}
<title>Badge Grant</title>
{% endblock %}

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

{% block content %}

		{% 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 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 class="close" data-bs-dismiss="alert" aria-label="Close">
				<span aria-hidden="true"><i class="far fa-times"></i></span>
			</button>
		</div>
		{% endif %}

<pre></pre>
<pre></pre>
<h5>Badge Grant</h5>

<form action="/admin/badge_grant", method="post">
{{forms.formkey(v)}}


<label for="input-username">Username</label><br>
<input autocomplete="off" id="input-username" class="form-control" type="text" name="username" required>

<div class="overflow-x-auto"><table class="table table-striped">
<thead class="bg-primary text-white">
		<tr>
			<th scope="col">Select</th>
			<th scope="col">Image</th>
			<th scope="col">Name</th>
			<th scope="col">Default Description</th>
		</tr>
	</thead>
	<tbody>
{% for badge in badge_types %}
<tr>
	<td>
		<div class="custom-control">
			<input autocomplete="off" class="custom-control-input" type="radio" id="{{badge.id}}" name="badge_id" value="{{badge.id}}">
			<label class="custom-control-label" for="{{badge.id}}"></label>
		</div>		
	</td>
	<td><label for="badge-{{badge.id}}"><img alt="{{badge.name}}" loading="lazy" src="{{ ('images/badges/'~badge.id~'.webp') | asset }}" width=64.16 height=70></label></td>
	<td>{{badge.name}}</td>
	<td>{{badge.description}}</td>
</tr>
{% endfor %}
</table>

<label for="input-url">URL</label><br>
<input autocomplete="off" id="input-url" class="form-control" type="text" name="url" type="url" placeholder="Optional">

<label for="input-description">Custom description</label><br>
<input autocomplete="off" id="input-description" class="form-control" type="text" name="description" placeholder="Leave blank for badge default">

<input autocomplete="off" class="btn btn-primary" type="submit">

</form>

<style>
	@media (max-width: 767.98px) {
		table {
			display: inline-block;
			overflow: auto;
		}
	}
</style>

{% endblock %}
