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

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

{% block body %}
    <div class="d-flex justify-content-between align-items-center mb-3 gap-2 flex-wrap">
        <h1 class="h3 mb-0">Enemies</h1>
        <div class="d-flex gap-2 align-items-center flex-wrap"
             data-controller="tracker-picker"
             data-tracker-picker-url-value="{{ path('app_tracker_add') }}"
             data-tracker-picker-token-value="{{ csrf_token('track-add') }}">
            <select class="form-select form-select-sm encounter-select" style="width: auto;" aria-label="Encounter">
                <option value="new"{{ selected_encounter is null ? ' selected' }}>— New encounter —</option>
                {% for e in encounters %}
                    <option value="{{ e.id }}"{{ selected_encounter == e.id ? ' selected' }}>{{ e.name }}</option>
                {% endfor %}
            </select>
            <button type="button" class="btn btn-outline-primary btn-sm" data-action="tracker-picker#submit">
                Add to tracker
            </button>
            <a href="{{ path('app_enemies_new') }}" class="btn btn-primary btn-sm">Add enemy</a>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">
            <table class="table table-striped table-hover align-middle datatable w-100"
                   data-datatable-src="{{ path('app_enemies_data') }}"
                   data-row-url="{{ path('app_enemies') }}/__ID__"
                   data-datatable-options='{"order": [[0, "asc"]]}'>
                <thead>
                    <tr>
                        <th data-data="name" data-format="link">Name</th>
                        <th data-data="size">Size</th>
                        <th data-data="type">Type</th>
                        <th data-data="challengeRating">CR</th>
                        <th data-data="armorClass">AC</th>
                        <th data-data="gameNotes" data-format="truncate" data-orderable="false">Game notes</th>
                        <th data-data="id" data-format="pick" data-orderable="false">Track</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
{% endblock %}