{% extends 'emails/v2/_layout.html.twig' %}

{% block subject %}Votre colis est en route !{% endblock %}
{% block eyebrow %}Expédition{% endblock %}

{% block content %}
    <h1 style="margin:0 0 14px;color:#191713;font-size:24px;font-family:Georgia,'Times New Roman',serif;">
        Votre colis est en route&nbsp;! 📦
    </h1>
    <p style="margin:0 0 18px;color:#565248;font-size:15px;line-height:1.65;">
        Bonjour {{ client.prenom }},<br>
        Bonne nouvelle : votre commande <strong style="color:#191713;">{{ commande.reference|slice(0, 12) }}</strong> vient de quitter l'atelier.
    </p>

    {% if commande.numSuiviColis %}
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin:0 0 20px;">
            <tr>
                <td style="background-color:#EBEDEA;border:1px solid #DFE1DC;border-radius:10px;padding:16px 18px;">
                    <div style="color:#565248;font-size:11px;text-transform:uppercase;letter-spacing:2px;font-family:'Courier New',monospace;">Numéro de suivi</div>
                    <div style="color:#191713;font-size:18px;font-weight:bold;font-family:'Courier New',monospace;margin-top:4px;">{{ commande.numSuiviColis }}</div>
                </td>
            </tr>
        </table>
        {% if commande.trackingPublicUrl %}
            <p style="margin:0 0 8px;color:#565248;font-size:15px;line-height:1.65;">
                Suivez-le en temps réel en cliquant sur le bouton ci-dessous&nbsp;:
            </p>
            <table role="presentation" cellpadding="0" cellspacing="0" style="margin:14px 0 22px;">
                <tr>
                    <td style="background-color:#2D9446;border-radius:999px;">
                        <a href="{{ commande.trackingPublicUrl }}" style="display:inline-block;padding:13px 30px;color:#ffffff;font-size:15px;font-weight:bold;text-decoration:none;">Suivre mon colis</a>
                    </td>
                </tr>
            </table>
        {% else %}
            <p style="margin:0 0 22px;color:#565248;font-size:15px;line-height:1.65;">
                Vous pouvez utiliser ce numéro auprès de votre transporteur pour suivre l'acheminement.
            </p>
        {% endif %}
    {% else %}
        <p style="margin:0 0 22px;color:#565248;font-size:15px;line-height:1.65;">
            Il arrivera très prochainement à l'adresse indiquée lors de votre commande.
        </p>
    {% endif %}

    <p style="margin:0;color:#565248;font-size:14px;line-height:1.6;">
        Merci pour votre confiance,<br>
        <em style="color:#1C6E34;">L'atelier Vulcan'Affûtage</em>
    </p>
{% endblock %}