{% set brandBlue = brandBlue|default('#51beee') %}
{% set brandNavy = brandNavy|default('#1a2b3c') %}
{% set borderLight = borderLight|default('#e2e8f0') %}
{% set bgSoft = bgSoft|default('#eef5fd') %}

{% if shipment.instructionType|default('print_required') == 'mondial_relay' %}
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom:20px;">
    <tr>
        <td style="font-size:15px;line-height:1.6;color:#4a5d73;">{{ shipment.introText }}</td>
    </tr>
</table>

{% if shipment.hasQrOption|default(false) %}
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="border:2px solid #86efac;border-radius:12px;background-color:#f0fdf4;margin-bottom:16px;">
    <tr>
        <td style="padding:20px 22px;">
            <p style="margin:0 0 4px;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;">Option 1 — Recommandé</p>
            <p style="margin:0 0 6px;font-size:17px;font-weight:800;color:{{ brandNavy }};">{{ shipment.qrOptionTitle }}</p>
            <p style="margin:0 0 14px;font-size:14px;font-weight:700;color:#16a34a;">{{ shipment.qrOptionSubtitle }}</p>
            <ol style="margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.55;color:#4a5d73;">
                {% for step in shipment.qrSteps %}
                <li style="margin-bottom:6px;">{{ step }}</li>
                {% endfor %}
            </ol>
            {% if shipment.qrImageUrl %}
            <p style="margin:0 0 8px;font-size:13px;font-weight:700;color:{{ brandNavy }};">Votre QR code</p>
            <img src="{{ shipment.qrImageUrl }}" alt="QR code Mondial Relay" width="196" height="196" style="display:block;width:196px;height:196px;border:2px solid {{ borderLight }};border-radius:8px;background:#fff;">
            {% endif %}
        </td>
    </tr>
</table>
{% endif %}

{% if shipment.hasQrOption|default(false) and shipment.hasPrintOption|default(false) %}
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin:8px 0 16px;">
    <tr>
        <td align="center" style="font-size:13px;font-weight:800;color:#6b7280;">OU</td>
    </tr>
</table>
{% endif %}

{% if shipment.hasPrintOption|default(false) %}
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="border:1px solid #bfdbfe;border-radius:12px;background-color:#f8fbff;margin-bottom:8px;">
    <tr>
        <td style="padding:20px 22px;">
            <p style="margin:0 0 4px;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;">{% if shipment.hasQrOption|default(false) %}Option 2{% else %}Option{% endif %}</p>
            <p style="margin:0 0 6px;font-size:17px;font-weight:800;color:{{ brandNavy }};">{{ shipment.printOptionTitle }}</p>
            <p style="margin:0 0 14px;font-size:14px;font-weight:700;color:{{ brandBlue }};">{{ shipment.printOptionSubtitle }}</p>
            <ol style="margin:0;padding-left:20px;font-size:14px;line-height:1.55;color:#4a5d73;">
                {% for step in shipment.printSteps %}
                <li style="margin-bottom:6px;">{{ step }}</li>
                {% endfor %}
            </ol>
        </td>
    </tr>
</table>
{% endif %}

{% else %}
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="border:1px solid {{ borderLight }};border-radius:12px;background-color:{{ bgSoft }};margin-bottom:8px;">
    <tr>
        <td style="padding:20px 22px;">
            <p style="margin:0 0 12px;font-size:15px;line-height:1.6;color:#4a5d73;">{{ shipment.introText }}</p>
            <ol style="margin:0;padding-left:20px;font-size:14px;line-height:1.55;color:{{ brandNavy }};">
                {% for step in shipment.printSteps %}
                <li style="margin-bottom:6px;">{{ step }}</li>
                {% endfor %}
            </ol>
        </td>
    </tr>
</table>
{% endif %}