{% extends 'base.html.twig' %}

{% block title %}Fiche QR Jante — {{ jante.reference }}{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/jante-qr-print.css') }}">
{% endblock %}

{% block body %}
    <div class="print-shell">
        <div class="print-toolbar no-print">
            <a class="button button-secondary" href="{{ path('admin') }}">Retour aux jantes</a>
            <button class="button button-primary" type="button" onclick="window.print();">Imprimer</button>
        </div>

        <div class="print-page">
            <header class="qr-sheet-header">
                <img class="qr-sheet-logo" src="{{ asset('images/spg-logo.png') }}" alt="SPG logo">
                <span class="qr-sheet-tag">Jantes aluminium</span>
            </header>

            <main class="qr-sheet-body">
                <div class="qr-sheet-intro">
                    <span class="qr-sheet-eyebrow">Découvrez cette jante</span>
                    <h1>{{ jante.marque }} {{ jante.modele }}</h1>
                </div>

                <div class="qr-sheet-details">
                    <div>
                        <p><strong>Référence</strong><br>{{ jante.reference }}</p>
                        <p><strong>Diamètre</strong><br>{{ jante.diametre }} pouces</p>
                        <p><strong>Largeur</strong><br>{{ jante.largeur ?: 'N/C' }}</p>
                        <p><strong>Entraxe</strong><br>{{ jante.entraxe }}</p>
                        {% if jante.couleur %}
                            <p><strong>Couleur</strong><br>{{ jante.couleur }}</p>
                        {% endif %}
                        <p><strong>Prix</strong><br>{{ jante.prix }} DT</p>
                    </div>

                    <div class="qr-sheet-qr-zone">
                        <div class="qr-sheet-qr-card">
                            <img class="qr-sheet-qr" src="{{ qrCodeDataUri }}" alt="Code QR pour {{ jante.reference }}">
                        </div>
                        <p class="qr-sheet-scan-copy">Scannez pour voir les photos,<br>les caractéristiques et la disponibilité.</p>
                        <p class="qr-sheet-url">{{ publicJanteUrl }}</p>
                    </div>
                </div>
            </main>

            <footer class="qr-sheet-footer">
                <span>SPG — Spécialiste du pneu en Tunisie</span>
            </footer>
        </div>
    </div>
{% endblock %}