{% extends "base.html" %}
{% block title %}{{ batch.name }} - Vouchers - RadiusForge{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>{{ batch.name }}</h1>
            <p class="rf-lede">Plan <strong>{{ batch.plan.name }}</strong> · {{ vouchers|length }} codes</p>
        </div>
        <div class="rf-actions">
            <a class="button" href="{% url 'voucher-sheet' batch.pk %}">Print sheet</a>
            <a href="{% url 'voucher-sheet-csv' batch.pk %}">Download CSV</a>
        </div>
    </div>
    <ul class="rf-stat-row">
        {% for label, n in counts.items %}<li><strong>{{ n }}</strong> {{ label }}</li>{% endfor %}
    </ul>
    <table class="rf-cards">
        <thead>
            <tr><th>Code</th><th>Password</th><th>State</th><th>Activated</th><th>Expires</th><th>Data used</th></tr>
        </thead>
        <tbody>
        {% for v in vouchers %}
            <tr>
                <td data-label="Code" class="rf-primary">{{ v.code }}</td>
                <td data-label="Password">{{ v.password|default:"—" }}</td>
                <td data-label="State">{{ v.get_state_display }}</td>
                <td data-label="Activated">{{ v.activated_at|date:"j M H:i"|default:"—" }}</td>
                <td data-label="Expires">{{ v.expires_at|date:"j M H:i"|default:"—" }}</td>
                <td data-label="Data used">{{ v.data_used_mb }} MB</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}