{% extends 'admin/base.html' %}
{% block _title %}Emojis{% endblock %}
{% set emojis_link = 'active' %}
{% block _content %}
	<h2 id="customEmojis" class="mb-3 fw-normal">Custom emojis</h2>
	<h3 class="fw-light mb-3">Upload</h3>
	<form hx-post="{{ url_for('api.uploadEmoji') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
		<div>
			<label for="emoji" class="form-label">Upload an emoji</label>
			<input class="form-control" type="file" id="emoji" name="emoji">
		</div>
		<div class="mb-4">
			<button type="submit" class="btn btn-primary mt-3" id="uploadEmoji">
				<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
				<span class="visually-hidden" role="status">Loading...</span>
				<i class="bi bi-file-earmark-plus me-1"></i> Upload emoji
			</button>
		</div>
	</form>
	<hr>
	<form id="pack-form" hx-post="{{ url_for('api.uploadEmojiPack') }}" hx-target="#response-container" hx-swap="none" hx-encoding="multipart/form-data">
		<div>
			<label for="emoji_archive" class="form-label">Upload emoji pack</label>
			<input class="form-control" type="file" id="emoji_archive" name="emoji_archive">
			<p class="form-text mb-0">Supported archive formats: <strong>.zip, .tar, .tar.gz, .tar.bz2, .tar.xz</strong></p>
		</div>
		<div class="mb-5">
			<button type="submit" class="btn btn-primary mt-3" id="uploadEmojiPack">
				<span class="spinner-border spinner-border-sm htmx-indicator" aria-hidden="true"></span>
				<span class="visually-hidden" role="status">Loading...</span>
				<i class="bi bi-file-earmark-zip me-1"></i> Upload pack
			</button>
		</div>
	</form>
	<h3 class="fw-light mb-3">Manage</h3>
	<h4 class="fw-light">Emojis</h4>
	{% if emojis %}
	<div class="table-responsive">
		<table id="emojiTable" class="table align-middle">
			<thead>
				<tr>
					<th>Image</th>
					<th>Name</th>
					<th>Filename</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody id="emojis">
				{% for emoji in emojis %}
				{% include 'snippets/admin/emojiRow.html' %}
				{% endfor %}
			</tbody>
		</table>
	</div>
	{% else %}
	<p class="text-center">No emojis uploaded</p>
	{% endif %}
	<h4 class="fw-light mt-3">Emoji packs</h4>
	<p class="text-body-secondary small">Please note that if meta.json is not found in the archive, preview images are selected by first emoji name to appear alphabetically, so they may not be accurate sometimes</p>
	{% if packs %}
	<div class="table-responsive">
		<table id="emojiPackTable" class="table align-middle">
			<thead>
				<tr>
					<th>Image</th>
					<th>Name</th>
					{% if json_pack %}
					<th>Author</th>
					<th>Released</th>
					{% endif %}
					<th>Folder</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody id="packs">
				{% for pack in packs %}
				{% with json_pack = json_pack, index = loop.index - 1 %}
				{% include 'snippets/admin/packRow.html' %}
				{% endwith %}
				{% endfor %}
			</tbody>
		</table>
	</div>
	{% else %}
	<p class="text-center">No emoji packs uploaded</p>
	{% endif %}
{% endblock %}