{% extends "base.html" %}
{% block title %}QR Code — {{ facility.name }}{% endblock %}

{% block content %}
<style>
    @media print {
        .no-print { display: none !important; }
        .navbar, nav, footer { display: none !important; }
        .qr-card { border: none !important; box-shadow: none !important; }
    }
    .qr-card { max-width: 520px; margin: 0 auto; }
</style>

<div class="d-flex justify-content-between align-items-center mb-3 no-print">
    <a href="{{ url_for('facilities.view_facility', facility_id=facility.id) }}"
       class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> Back to Facility
    </a>
    <button onclick="window.print()" class="btn btn-primary btn-sm">
        <i class="bi bi-printer"></i> Print
    </button>
</div>

<div class="card shadow-sm qr-card">
    <div class="card-body text-center p-4">
        <div class="text-muted text-uppercase small" style="letter-spacing:.08em;">
            Scan for Facility Status
        </div>
        <h1 class="h3 fw-bold mt-1 mb-3">{{ facility.name }}</h1>

        <img src="{{ url_for('facilities.facility_qr_png', facility_id=facility.id) }}"
             alt="QR code for {{ facility.name }}"
             style="width:260px;height:260px;max-width:100%;" class="mb-3">

        <p class="mb-1">Scan this code with your phone camera to see this facility's
           recent cleaning quality and to <strong>report a problem</strong>.</p>

        {% if public_url %}
        <div class="small text-muted mt-3">
            Or visit:<br>
            <a href="{{ public_url }}" class="text-break">{{ public_url }}</a>
        </div>
        {% endif %}
    </div>
</div>

<p class="text-center text-muted small mt-3 no-print">
    Tip: print this and post it at the facility entrance or in each restroom.
</p>
{% endblock %}