{% extends "base.html" %}
{% block content %}

<h1>ESP Vouchers</h1>
<p class="page-subtitle">
    Vouchers issued by your sub-vendo ESPs. New ones are created on each ESP's own page.
</p>

<div class="page-actions">
    <form method="POST" action="/network/grants/clear-inactive" style="display:inline;"
          onsubmit="return confirm('Delete all inactive ESP voucher records (idle / paused / expired / revoked)? Active sessions are kept.');">
        <button type="submit" class="btn-secondary">Clear inactive</button>
    </form>
</div>

{% if flash_msg %}
    <div class="flash flash-good">
        <div>{{ flash_msg }}</div>
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">
        {{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}

<section>
    <h2>Search</h2>
    <form method="GET" action="/esp-vouchers" class="search-form">
        <input type="hidden" name="status" value="{{ status_filter }}">
        <input type="search" name="q" value="{{ search }}" maxlength="32"
               placeholder="Code prefix (e.g. QM57) or MAC contains (e.g. 12:f6)"
               autocomplete="off" class="search-input">
        <button type="submit" class="btn-primary">Search</button>
        {% if search %}
            <a href="/esp-vouchers?status={{ status_filter }}" class="btn-secondary">Clear</a>
        {% endif %}
    </form>
</section>

<section>
    <h2>Filter by Status</h2>
    <div class="chip-row">
        {% set chips = [('all', 'All'), ('active', 'Active'), ('idle', 'Idle'), ('paused', 'Paused'), ('expired', 'Expired'), ('revoked', 'Revoked')] %}
        {% for slug, label in chips %}
            <a href="/esp-vouchers?status={{ slug }}{% if search %}&q={{ search }}{% endif %}"
               class="chip {% if status_filter == slug %}chip-active{% endif %}">
                {{ label }} <span class="chip-count">{{ counts[slug] }}</span>
            </a>
        {% endfor %}
    </div>
</section>

<section>
    {% if rows %}
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Status</th>
                        <th class="col-hide-mobile">Vendo</th>
                        <th>Time left</th>
                        <th class="col-hide-mobile">Device</th>
                        <th class="col-hide-mobile">Created</th>
                        <th class="actions-cell">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for v in rows %}
                    <tr>
                        <td><code>{{ v.code }}</code></td>
                        <td><span class="badge badge-{{ 'pending' if v.status == 'idle' else v.status }}">{{ v.status }}</span></td>
                        <td class="col-hide-mobile">{{ v.segment }}</td>
                        <td>
                            {% if v.status in ['active', 'paused'] %}
                                <strong>{% if v.minutes_remaining is not none %}{{ v.minutes_remaining }} min left{% else %}no time limit{% endif %}</strong>
                                <div style="color: var(--muted); font-size: 11px;">
                                    {{ v.minutes_used }}/{{ v.minutes_total }}m used{% if v.validity_left is not none %} &middot; {{ v.validity_left }}m validity{% endif %}
                                </div>
                            {% elif v.status == 'idle' %}
                                <span style="color: var(--muted);">not started</span>
                                <div style="color: var(--muted); font-size: 11px;">{{ v.minutes_total }}m granted</div>
                            {% else %}
                                <span style="color: var(--muted);">{{ 'revoked' if v.status == 'revoked' else 'ended' }}</span>
                                <div style="color: var(--muted); font-size: 11px;">{{ v.minutes_used }}/{{ v.minutes_total }}m used</div>
                            {% endif %}
                        </td>
                        <td class="col-hide-mobile"><code>{{ v.ip or v.mac or '—' }}</code></td>
                        <td class="col-hide-mobile">{{ v.created }}</td>
                        <td class="actions-cell">
                            {% if v.status == 'active' %}
                                <form method="POST" action="/network/grant/disconnect"
                                      onsubmit="return confirm('Disconnect {{ v.code }} and revoke this voucher? The customer loses internet and the code can\'t be reused.');">
                                    <input type="hidden" name="vlan" value="{{ v.vlan }}">
                                    <input type="hidden" name="name" value="{{ v.code }}">
                                    <button type="submit" class="btn-sm-danger">Disconnect</button>
                                </form>
                            {% else %}
                                <form method="POST" action="/network/grant/delete"
                                      onsubmit="return confirm('Delete ESP voucher {{ v.code }}? This removes the record.');">
                                    <input type="hidden" name="vlan" value="{{ v.vlan }}">
                                    <input type="hidden" name="name" value="{{ v.code }}">
                                    <button type="submit" class="btn-sm">Delete</button>
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% if total > 0 %}
            {% set page_start = offset + 1 %}
            {% set page_end = offset + (rows|length) %}
            {% set base_qs = '?status=' ~ status_filter %}
            {% if search %}{% set base_qs = base_qs ~ '&q=' ~ search %}{% endif %}
            <nav class="pager">
                {% if offset > 0 %}
                    {% set prev_offset = [offset - page_size, 0]|max %}
                    <a href="{{ base_qs }}&offset={{ prev_offset }}" class="btn-sm">← Newer</a>
                {% else %}
                    <span class="btn-sm btn-disabled">← Newer</span>
                {% endif %}

                <span class="pager-status">
                    Showing <strong>{{ page_start }}–{{ page_end }}</strong> of <strong>{{ total }}</strong>
                </span>

                {% if page_end < total %}
                    <a href="{{ base_qs }}&offset={{ offset + page_size }}" class="btn-sm">Older →</a>
                {% else %}
                    <span class="btn-sm btn-disabled">Older →</span>
                {% endif %}
            </nav>
        {% endif %}
    {% else %}
        <div class="empty-state">
            {% if search %}
                <strong>No ESP vouchers match "{{ search }}"{% if status_filter != 'all' %} in {{ status_filter }}{% endif %}.</strong><br>
                Try a different code prefix or MAC fragment.
            {% elif status_filter == 'all' %}
                <strong>No ESP vouchers yet.</strong><br>
                They'll appear here as sub-vendo customers insert coins on their ESP.
            {% else %}
                <strong>No {{ status_filter }} ESP vouchers right now.</strong>
            {% endif %}
        </div>
    {% endif %}
</section>

{% endblock %}