{% extends "base.html" %}
{% block title %}Print QR Codes{% endblock %}

{% block content %}
<style>
    .qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .qr-item { break-inside: avoid; page-break-inside: avoid; text-align: center; }
    .qr-item img { width: 220px; height: 220px; max-width: 100%; }
    @media print {
        .no-print { display: none !important; }
        .navbar, nav, footer { display: none !important; }
        .qr-item { border: 1px dashed #bbb !important; }
        /* Two per row, comfortable for cutting/posting */
        .qr-grid { gap: 8px; }
    }
</style>

<div class="d-flex justify-content-between align-items-center mb-3 no-print">
    <div>
        <h2 class="h4 mb-0"><i class="bi bi-qr-code"></i> Facility QR Codes</h2>
        <div class="text-muted small">
            {% if selected_contract %}Contract: {{ selected_contract.name }} — {% endif %}
            {{ facilities|length }} facilit{{ 'y' if facilities|length == 1 else 'ies' }}
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ url_for('facilities.list_facilities') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left"></i> Back
        </a>
        <button onclick="window.print()" class="btn btn-primary btn-sm">
            <i class="bi bi-printer"></i> Print All
        </button>
    </div>
</div>

{% if facilities %}
<div class="qr-grid">
    {% for f in facilities %}
    <div class="qr-item card shadow-sm p-3">
        <div class="text-muted text-uppercase" style="font-size:.7rem;letter-spacing:.08em;">
            Scan for Facility Status
        </div>
        <div class="fw-bold">{{ f.name }}</div>
        {% if f.project %}
        <div class="text-muted small mb-1">{{ f.project.name }}</div>
        {% endif %}
        <div>
            <img src="{{ url_for('facilities.facility_qr_png', facility_id=f.id) }}"
                 alt="QR code for {{ f.name }}" loading="lazy">
        </div>
        <div class="small">Report a problem &amp; view recent quality</div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="alert alert-info">No active facilities to print QR codes for.</div>
{% endif %}

<p class="text-muted small mt-3 no-print">
    Tip: print, cut along the dashed lines, and post each code at its facility.
</p>
{% endblock %}