{% extends 'admin/base.html' %}
{% block _title %}{{ _('Emojis') }}{% endblock %}
{% set emojis_link = 'active' %}
{% block _content %}
	<h2 id="customEmojis" class="mb-2 fw-normal">{{ _('Custom emojis') }}</h2>
	<p class="fs-5 h3 text-body-secondary mb-3">{{ _('Add custom emojis to your {} instance').format(const.appName) }}</p>
	<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 %}