<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Document - Association E-Cosplay{% endblock %}</title>
    <style>
        @page { margin: 0; size: A4; }
        body { font-family: Arial, Helvetica, sans-serif; font-size: {% block font_size %}10px{% endblock %}; color: #111827; margin: 0; padding: 0; }
        .banner { background: #fabf04; padding: 16px 32px; border-bottom: 1px solid #111827; }
        .banner img { height: 36px; }
        .banner-title { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #111827; margin-top: 4px; opacity: 0.7; }
        .container { padding: 24px 32px 16px; }
        .doc-type { display: inline-block; padding: 4px 12px; color: #fff; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
        h1 { font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: -0.5px; font-style: italic; margin: 0 0 4px 0; line-height: 1.1; }
        h2 { font-size: 11px; font-weight: 700; text-transform: uppercase; margin: 16px 0 4px; padding: 4px 10px; background: #fabf04; border: 1px solid #ddd;  display: inline-block; }
        .subtitle { font-size: 9px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
        .info-grid { display: table; width: 100%; margin-bottom: {% block info_grid_mb %}12px{% endblock %}; }
        .info-row { display: table-row; }
        .info-grid .info-cell { display: table-cell; padding: 6px {% block info_cell_px %}10px{% endblock %}; vertical-align: top; }
        .info-label { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
        .info-value { font-size: 11px; font-weight: 700; color: #111827; }
        .verify-box { margin: 12px 0; border: 1px solid #ddd;  display: table; width: 100%; }
        .verify-row { display: table-row; }
        .verify-qr { display: table-cell; text-align: center; width: 100px; padding: 8px; border-right: 2px solid #111827; vertical-align: middle; }
        .verify-qr img { width: 72px; height: 72px; }
        .verify-info { display: table-cell; padding: 8px 12px; font-size: 9px; vertical-align: middle; }
        .verify-label { font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
        .verify-url { font-size: 8px; font-family: monospace; color: #4338ca; word-break: break-all; }
        .hmac { font-size: 7px; color: #aaa; word-break: break-all; margin: 8px 0; padding: 6px 8px; background: #f9fafb; border: 1px solid #e5e7eb; font-family: monospace; }
        .dpo { font-size: 9px; margin: 8px 0 4px; }
        .contact-box { display: inline-block; padding: 6px 16px; background: #111827; color: #fff; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; }
        table.data { width: 100%; border-collapse: collapse; margin-top: {% block data_table_mt %}4px{% endblock %}; font-size: 9px; border: 1px solid #ddd;  }
        table.data th { background: #111827; color: #fff; padding: 4px 8px; text-align: left; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; }
        table.data td { padding: {% block data_td_pad %}3px{% endblock %} 8px; border-bottom: 1px solid #e5e7eb; }
        table.data tr:nth-child(even) td { background: #f9fafb; }
        {% block extra_styles %}{% endblock %}
    </style>
</head>
<body>
    <div class="banner">
        {% if logo %}<img src="{{ logo }}" alt="CRM E-Cosplay">{% endif %}
        <div class="banner-title">Association E-Cosplay</div>
    </div>
    <div class="container">
        {% block content %}{% endblock %}

        {% block verify_box %}
            <div class="verify-box">
                <div class="verify-row">
                    <div class="verify-qr"><img src="{{ qrcode }}" alt="QR Code"></div>
                    <div class="verify-info">
                        <span class="verify-label">Verifier ce document</span>
                        <p style="margin: 2px 0 4px; font-size: 9px; font-weight: 700;">Scannez le QR code ou consultez le lien ci-dessous.</p>
                        <span class="verify-label">URL</span>
                        <span class="verify-url">{{ verify_url }}</span>
                    </div>
                </div>
            </div>
        {% endblock %}

        {% block hmac_section %}
            <div class="hmac">HMAC-SHA256 : {{ attestation.hmac }}</div>
        {% endblock %}

        {% block footer_contact %}
            <div style="margin-top: 16px;">
                <p class="dpo"><strong>DPO</strong></p>
                <span class="contact-box">client@e-cosplay.fr</span>
            </div>
        {% endblock %}

        {% block signature_box %}
            <div style="margin-top: 12px; display: inline-block; border: 1px solid #ddd;  padding: 8px 12px; width: 180px; height: 80px;">
                <div style="font-size: 1px; color: #fff;">{% verbatim %}{{Sign;type=signature;width=150;height=50}}{% endverbatim %}</div>
            </div>
        {% endblock %}

        <div style="margin-top: 16px; padding-top: 8px; border-top: 1px solid #ddd; font-size: 7px; color: #999; line-height: 1.6;">
            {% block footer_legal %}
                Association E-Cosplay &mdash; RNA W022006988 &mdash; SIREN 943121517<br>
                42 rue de Beautor, 02800 Beautor, France &mdash; client@e-cosplay.fr &mdash; 07 66 95 70 06<br>
                <a href="https://www.e-cosplay.fr" style="color: #999;">www.e-cosplay.fr</a>
            {% endblock %}
        </div>
    </div>
</body>
</html>
