{% extends "base.html" %}
{% block title %}Voucher sheet - {{ batch.name }}{% endblock %}
{% block content %}
<style>
  .rf-voucher-sheet{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
  @media (min-width:900px){.rf-voucher-sheet{grid-template-columns:repeat(3,1fr)}}
  .rf-voucher{border:1px dashed #888;border-radius:10px;padding:14px 16px;text-align:center;break-inside:avoid}
  .rf-voucher-brand{font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
  .rf-voucher-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.5rem;font-weight:700;letter-spacing:.08em;margin:.3rem 0}
  .rf-voucher-pw{font-size:.95rem}
  .rf-voucher-meta{font-size:.8rem;opacity:.7;margin-top:.3rem}
  @media print{.rf-no-print{display:none!important}.rf-voucher-sheet{grid-template-columns:repeat(3,1fr)}body{background:#fff}}
</style>
    <div class="rf-page-head rf-no-print">
        <div>
            <h1>Voucher sheet: {{ batch.name }}</h1>
            <p class="rf-lede">{{ organization.name }} · plan {{ batch.plan.name }} · {{ vouchers|length }} codes</p>
        </div>
        <button type="button" class="button" onclick="window.print()">Print</button>
    </div>
    <div class="rf-voucher-sheet">
        {% for v in vouchers %}
        <div class="rf-voucher">
            <div class="rf-voucher-brand">{{ organization.name }} Wi-Fi</div>
            <div class="rf-voucher-code">{{ v.code }}</div>
            {% if v.password %}<div class="rf-voucher-pw">Password: <strong>{{ v.password }}</strong></div>{% endif %}
            <div class="rf-voucher-meta">{{ batch.plan.name }}{% if batch.price_display %} · {{ batch.price_display }}{% endif %}</div>
        </div>
        {% endfor %}
    </div>
{% endblock %}