{% extends "base.jinja2" %}

{% block title %}Mail - DarkflameServer{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
	<div>
		<h2 class="mb-1">Mail</h2>
		<p class="text-body-secondary mb-0">Every in-game mail, newest first. Mail a player deleted stays here, marked; they no longer see it.</p>
	</div>
	{% if can.mail_send %}<a class="btn btn-sm btn-primary" href="/send_mail">Send mail</a>{% endif %}
</div>

<div class="card">
	<div class="card-header">
		<div class="row g-2 align-items-end">
			<div class="col-sm-4"><label class="form-label small mb-1" for="mailState">Show</label>
				<select class="form-select form-select-sm" id="mailState">
					<option value="">All mail</option>
					<option value="unread">Unread</option>
					<option value="read">Read</option>
					<option value="attachment">Attachment waiting</option>
					<option value="claimed">Attachment claimed</option>
					<option value="deleted">Deleted by the player</option>
				</select></div>
			<div class="col-sm-4"><label class="form-label small mb-1" for="mailCharacter">Character (sent or received)</label>
				<input class="form-control form-control-sm" id="mailCharacter" placeholder="Name or ID"></div>
			<div class="col-sm-4"><label class="form-label small mb-1" for="mailAccount">Account ID</label>
				<input class="form-control form-control-sm" id="mailAccount" inputmode="numeric" placeholder="Any"></div>
		</div>
	</div>
	<div class="card-body">
		<table id="mailTable" class="table table-sm table-hover align-middle w-100 table-stack">
			<thead><tr><th>Sent</th><th>From</th><th>To</th><th>Subject</th><th>Attachment</th><th>State</th></tr></thead>
			<tbody></tbody>
		</table>
	</div>
</div>

<div class="modal fade" id="mailModal" tabindex="-1" aria-labelledby="mailModalTitle">
	<div class="modal-dialog modal-lg modal-dialog-scrollable">
		<div class="modal-content">
			<div class="modal-header"><h5 class="modal-title" id="mailModalTitle">Mail</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
			<div class="modal-body" id="mailModalBody"></div>
		</div>
	</div>
</div>
{% endblock %}

{% block scripts %}
<script src="/js/mail-view.js"></script>
<script src="/js/mail.js"></script>
{% endblock %}