{% extends "default.html" %}
{% block pagetitle %}{{"Badge Grant" if grant else "Badge Remove"}}{% endblock %}
{% block pagetype %}message{% endblock %}
{% block content %}
	<link rel="stylesheet" href="{{('css/admin/badges.css') | asset}}">

	{% set form_action = "/admin/badge_grant" if grant else "/admin/badge_remove" %}

	<form action="{{form_action}}" method="post" data-nonce="{{g.nonce}}" data-onsubmit="sendFormXHR(this)">
		<input hidden name="formkey" value="{{v|formkey}}">

		<div class="overflow-x-auto mt-4">
			<table>
				<thead>
						<tr>
							<th>Select</th>
							<th>Image</th>
							<th>Name</th>
							<th>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}}" required>
								<label class="custom-control-label" for="{{badge.id}}"></label>
							</div>
						</td>
						<td>
							<label for="badge-{{badge.id}}">
								<img class="contain" alt="{{badge.name}}" loading="lazy" src="{{badge.path}}" width=64.16 height=70>
							</label>
						</td>
						<td>{{badge.name}}</td>
						<td>{{badge.description}}</td>
					</tr>
				{% endfor %}
			</table>
		</div>

		<label for="input-usernames">Usernames (separated with a space)</label>
		{% set usernames = request.values.get('usernames') %}
		<input autocomplete="off" id="input-usernames" class="form-control" type="text" name="usernames" placeholder="Required (separated by space)" {% if usernames %}value="{{usernames}}"{% endif %} required>

		{% if grant %}
			<label class="mt-2" for="input-url">URL</label>
			<input autocomplete="off" id="input-url" class="form-control" type="text" name="url" type="url" placeholder="Optional">

			<label class="mt-2" for="input-description">Custom description</label>
			<input autocomplete="off" id="input-description" class="form-control" type="text" name="description" placeholder="Optional except for specific badges">
		{% endif %}

		<input autocomplete="off" class="btn btn-primary mt-3" type="submit">
	</form>
{% endblock %}