<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <style>
        * { font-family: "DejaVu Sans", sans-serif; }
        @page { margin: 16mm 10mm 14mm 10mm; }
        body { color: #1f2937; font-size: 10px; }
        h1 { color: #21409A; font-size: 17px; margin: 0 0 2px 0; }
        .meta { color: #6b7280; font-size: 10px; margin: 0 0 12px 0; }
        .meta strong { color: #374151; }
        table { width: 100%; border-collapse: collapse; }
        thead th {
            background: #21409A; color: #fff; text-align: left;
            padding: 5px 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .03em;
        }
        tbody td { padding: 5px 6px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; }
        tbody tr:nth-child(even) { background: #f3f4f6; }
        img.photo { width: 130px; height: auto; max-height: 95px; border: 1px solid #e5e7eb; border-radius: 4px; }
        img.photo-vin { width: 230px; height: auto; max-height: 150px; border: 1px solid #e5e7eb; border-radius: 4px; }
        .noimg { color: #9ca3af; font-style: italic; }
        .mono { font-family: "DejaVu Sans Mono", monospace; }
        .footer { position: fixed; bottom: -9mm; left: 0; right: 0; color: #9ca3af; font-size: 8px; text-align: center; }
        .empty { padding: 24px; text-align: center; color: #9ca3af; }
    </style>
</head>
<body>
    <h1>{{ label }} — Rapport avec images</h1>
    <p class="meta">
        <strong>{{ total }}</strong> véhicule{{ total > 1 ? 's' }}
        {% if createdAt %} · {{ createdAt|date('d/m/Y à H:i') }}{% endif %}
        · Scanné par <strong>{{ scannedBy }}</strong>
        · Concession(s) : <strong>{{ concessionStr }}</strong>
    </p>

    <table>
        <thead>
            <tr>
                <th style="width:4%">#</th>
                <th style="width:24%">Photo VIN</th>
                <th style="width:12%">VIN</th>
                <th style="width:15%">Photo plaque</th>
                <th style="width:10%">Immatriculation</th>
                <th style="width:6%">Heure</th>
                <th style="width:10%">Marque</th>
                <th style="width:11%">Modèle</th>
                <th style="width:8%">Commentaire</th>
            </tr>
        </thead>
        <tbody>
            {% for r in rows %}
                <tr>
                    <td class="mono">{{ loop.index }}</td>
                    <td>{% if r.vinImg %}<img class="photo-vin" src="{{ r.vinImg }}" alt="">{% else %}<span class="noimg">—</span>{% endif %}</td>
                    <td class="mono">{{ r.vin }}</td>
                    <td>{% if r.plateImg %}<img class="photo" src="{{ r.plateImg }}" alt="">{% else %}<span class="noimg">—</span>{% endif %}</td>
                    <td class="mono">{{ r.plate }}</td>
                    <td class="mono">{{ r.time }}</td>
                    <td>{{ r.make }}</td>
                    <td>{{ r.model }}</td>
                    <td style="white-space: pre-wrap; word-break: break-word;">{{ r.comment }}</td>
                </tr>
            {% else %}
                <tr><td colspan="9" class="empty">Aucun véhicule dans cet inventaire.</td></tr>
            {% endfor %}
        </tbody>
    </table>

    {% if signature %}
        <div style="margin-top:22px; page-break-inside: avoid;">
            <p style="color:#21409A; font-weight:bold; font-size:12px; margin:0 0 2px 0;">Signature</p>
            {% if signatureDate %}<p style="color:#6b7280; font-size:9px; margin:0 0 5px 0;">Signé le {{ signatureDate|date('d/m/Y à H:i') }}</p>{% endif %}
            <img src="{{ signature }}" alt="Signature" style="display:block; max-width:70mm; max-height:35mm; border-bottom:1px solid #d1d5db;">
        </div>
    {% endif %}

    <div class="footer">Scan Inventaire — Emil Frey · document généré le {{ "now"|date('d/m/Y H:i') }}</div>
</body>
</html>
