{% extends 'base.html.twig' %}

{% block title %}Overview · dmtools{% endblock %}

{% block body %}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h1 class="h3 mb-0">Overview</h1>
    </div>

    <p class="text-body-secondary">
        Starting point for the Monday-evening campaign tools. The table below is a
        placeholder that shows the Bootstrap + DataTables layout wiring works
        (search, sort, paging).
    </p>

    <div class="card shadow-sm">
        <div class="card-body">
            <table class="table table-striped table-hover align-middle datatable"
                   data-datatable-options='{"order": [[0, "asc"]]}'>
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Type</th>
                        <th scope="col">Location</th>
                        <th scope="col">Notes</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>Seraphina Vane</td><td>NPC</td><td>Blackreach</td><td>Owes the party a favour</td></tr>
                    <tr><td>Goblin ambush</td><td>Encounter</td><td>Old Kings Road</td><td>CR 2, 6 goblins</td></tr>
                    <tr><td>The Sunken Vault</td><td>Location</td><td>Lake Nydra</td><td>Water-breathing required</td></tr>
                    <tr><td>Rusted Key</td><td>Item</td><td>Party inventory</td><td>Opens the vault antechamber</td></tr>
                    <tr><td>Captain Dorae</td><td>NPC</td><td>Saltmarsh docks</td><td>Will smuggle cargo for coin</td></tr>
                    <tr><td>Owlbear den</td><td>Encounter</td><td>Whisperwood</td><td>CR 3, mother + 2 cubs</td></tr>
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}