{% 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">Combat tracker
            {% if combatants %}<span class="text-body-secondary fs-6">· {{ combatants|length }}</span>{% endif %}
        </h1>
        <div class="d-flex gap-2">
            <a href="{{ path('app_enemies') }}" class="btn btn-outline-secondary btn-sm">Add from Enemies</a>
            {% if combatants %}
                <form method="post" action="{{ path('app_tracker_clear') }}"
                      onsubmit="return confirm('Clear the whole tracker?')">
                    <input type="hidden" name="_token" value="{{ csrf_token('tracker-op') }}">
                    <button class="btn btn-outline-danger btn-sm">Clear all</button>
                </form>
            {% endif %}
        </div>
    </div>

    {% if not combatants %}
        <div class="card shadow-sm">
            <div class="card-body text-center text-body-secondary py-5">
                No combatants yet. Go to <strong>Enemies</strong>, tick the ones you want (set a count for
                multiples), and choose <strong>Add to tracker</strong>.
            </div>
        </div>
    {% else %}
        <div class="d-flex flex-column gap-2">
            {% for c in combatants %}
                {% set pct = c.hpPercent %}
                {% set bar = c.isDown ? 'bg-secondary' : (pct <= 25 ? 'bg-danger' : (pct <= 50 ? 'bg-warning' : 'bg-success')) %}
                <div class="card shadow-sm {{ c.isDown ? 'opacity-75' : '' }}">
                    <div class="card-body py-2">
                        <div class="row align-items-center g-2">
                            <div class="col-12 col-md-4">
                                <div class="fw-semibold {{ c.isDown ? 'text-decoration-line-through' : '' }}">
                                    {{ c.label }}
                                    {% if c.isDown %}<span class="badge text-bg-secondary ms-1">Down</span>{% endif %}
                                </div>
                                {% if c.enemy %}
                                    <a href="{{ path('app_enemies_show', {id: c.enemy.id}) }}"
                                       class="small text-decoration-none text-body-secondary">stat block</a>
                                {% endif %}
                            </div>

                            <div class="col-12 col-md-4">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="font-monospace" style="min-width: 5rem;">
                                        <span class="fs-5 fw-semibold">{{ c.currentHp }}</span> / {{ c.maxHp }}
                                    </span>
                                    <div class="progress flex-grow-1" role="progressbar" style="height: 10px;">
                                        <div class="progress-bar {{ bar }}" style="width: {{ pct }}%"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-4">
                                <div class="d-flex align-items-center gap-1 justify-content-md-end flex-wrap">
                                    <form method="post" action="{{ path('app_tracker_hp', {id: c.id}) }}"
                                          class="d-flex align-items-center gap-1">
                                        <input type="number" name="amount" min="0" inputmode="numeric"
                                               class="form-control form-control-sm" style="width: 4.5rem;"
                                               placeholder="HP" aria-label="Amount">
                                        <button name="mode" value="damage" class="btn btn-sm btn-outline-danger">Damage</button>
                                        <button name="mode" value="heal" class="btn btn-sm btn-outline-success">Heal</button>
                                    </form>
                                    <form method="post" action="{{ path('app_tracker_remove', {id: c.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('tracker-op') }}">
                                        <button class="btn btn-sm btn-outline-secondary" title="Remove" aria-label="Remove">&times;</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}