{% extends "base.jinja2" %}

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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
	<div>
		<h2 class="mb-1">Characters</h2>
		<p class="text-body-secondary mb-0">Manage player characters &mdash; <span class="character-count">0</span> total</p>
	</div>
</div>

<div class="card">
	<div class="card-body">
		<table id="charactersTable" class="table table-striped table-hover">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Account</th>
					<th>Last Login</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
	</div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(function () {
	var table = serverTable('#charactersTable', '/api/tables/characters', [
		{ data: 'id' },
		{ data: 'name', render: function (d, t, row) { return fmt.link('/characters/' + row.id, d); } },
		{ data: 'account_name' },
		{ data: 'last_login', render: function (d) { return d ? fmt.unix(d) : 'Never'; } },
		{ data: 'id', orderable: false, searchable: false, render: function (d) {
			return '<a href="/characters/' + esc(d) + '" class="btn btn-sm btn-outline-primary">View</a>';
		}}
	], { liveTable: 'characters' });
	table.on('draw.dt', function () { document.querySelector('.character-count').textContent = table.page.info().recordsTotal; });
});
</script>
{% endblock %}