{% extends "base.jinja2" %}

{% block title %}Play Key #{{ key.id }} - DarkflameServer{% endblock %}

{% block content %}
<nav data-crumbs data-crumb-label="Play Key #{{ key.id }}" aria-label="Breadcrumb"><ol class="breadcrumb mb-3"><li class="breadcrumb-item"><a href="/play_keys">Play Keys</a></li><li class="breadcrumb-item active" aria-current="page">Play Key #{{ key.id }}</li></ol></nav>

<div class="row g-4">
	<div class="col-lg-5">
		<div class="card" id="key" data-key-id="{{ key.id }}">
			<div class="card-header d-flex justify-content-between align-items-center">
				<h4 class="mb-0"><code>{{ key.key_string }}</code></h4>
				{% if key.active %}<span class="badge text-bg-success">Active</span>{% else %}<span class="badge text-bg-secondary">Inactive</span>{% endif %}
			</div>
			<div class="card-body">
				<p class="text-body-secondary small">Created {{ key.created_at }} &middot; used {{ key.times_used }} time(s)</p>
				<div class="mb-3">
					<label for="keyUses" class="form-label">Uses allowed</label>
					<input type="number" id="keyUses" class="form-control" min="0" value="{{ key.key_uses }}">
				</div>
				<div class="mb-3">
					<label for="keyNotes" class="form-label">Notes</label>
					<textarea id="keyNotes" class="form-control" rows="3">{{ key.notes }}</textarea>
				</div>
				<div class="form-check form-switch mb-3">
					<input class="form-check-input" type="checkbox" id="keyActive"{% if key.active %} checked{% endif %}>
					<label class="form-check-label" for="keyActive">Active</label>
				</div>
				<div class="d-flex gap-2">
					<button class="btn btn-primary" onclick="saveKey()">Save</button>
					<button class="btn btn-outline-danger ms-auto" onclick="deleteKey()">Delete</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-lg-7">
		<div class="card">
			<div class="card-header"><h5 class="mb-0">Accounts registered with this key</h5></div>
			<div class="card-body p-0">
				{% if length(key.accounts) == 0 %}
				<p class="text-body-secondary p-3 mb-0">No accounts have used this key.</p>
				{% else %}
				<table class="table table-striped table-hover mb-0">
					<thead><tr><th>ID</th><th>Username</th><th>Created</th></tr></thead>
					<tbody>
					{% for account in key.accounts %}
					<tr>
						<td>{{ account.id }}</td>
						<td><a href="/accounts/{{ account.id }}">{{ account.name }}</a></td>
						<td>{{ account.created_at }}</td>
					</tr>
					{% endfor %}
					</tbody>
				</table>
				{% endif %}
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block scripts %}
<script>
var keyUrl = '/api/play_keys/' + document.getElementById('key').getAttribute('data-key-id');
// Registrations using a key are reported for the table as a whole, so any change refreshes this page
if (window.Live) Live.refreshPage('play_keys', document.getElementById('key').getAttribute('data-key-id'), { anyRow: true });

function saveKey() {
	api.action(keyUrl + '/update', {
		uses: parseInt(document.getElementById('keyUses').value, 10) || 0,
		notes: document.getElementById('keyNotes').value,
		active: document.getElementById('keyActive').checked
	}, 'Play key saved').catch(function () {});
}

function deleteKey() {
	if (!confirm('Delete this play key? Accounts that used it keep working but lose the link to it.')) return;
	api.action(keyUrl + '/delete').then(function () { window.location.href = '/play_keys'; }).catch(function () {});
}
</script>
{% endblock %}