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

{% block title %}Tracker · 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">Encounters</h1>
        <form method="post" action="{{ path('app_tracker_new') }}" class="d-flex gap-2">
            <input type="hidden" name="_token" value="{{ csrf_token('tracker-new') }}">
            <input type="text" name="name" class="form-control form-control-sm" style="width: 14rem;"
                   placeholder="New encounter name" aria-label="New encounter name">
            <button class="btn btn-primary btn-sm text-nowrap">New encounter</button>
        </form>
    </div>

    {% if not encounters %}
        <div class="card shadow-sm">
            <div class="card-body text-center text-body-secondary py-5">
                No encounters yet. Name one above, or go to <strong>Enemies</strong>, tick the combatants
                you want and add them to a new encounter.
            </div>
        </div>
    {% else %}
        <div class="list-group shadow-sm">
            {% for e in encounters %}
                <a href="{{ path('app_tracker_show', {id: e.id}) }}"
                   class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                    <span>
                        <span class="fw-semibold">{{ e.name }}</span>
                        <span class="text-body-secondary small">
                            · {{ e.combatants|length }} combatant{{ e.combatants|length == 1 ? '' : 's' }}
                        </span>
                    </span>
                    <span class="text-body-secondary small">updated {{ e.updatedAt|date('Y-m-d H:i') }}</span>
                </a>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}