{% extends 'emails/base_email.html.twig' %}

{% block body %}
    {# Configuration des styles et variables #}
    {% set isParticulier = (entreprise.typeCompte == 'PARTICULIER') %}
    {# Couleur d'alerte : Rouge/Orange pour le retard #}
    {% set alertColor = '#e11d48' %} 
    {% set primaryColor = '#72a333' %}
    
    <h1 style="color: #0f172a; font-size: 20px; font-weight: 600; margin-bottom: 10px; text-align: center; font-family: 'Manrope', sans-serif;">
        {% if isParticulier %}
            Alerte Retard de Paiement,<br> {{ user.prenom }} !
        {% else %}
            Impayés détectés pour<br> {{ entreprise.raisonSociale }}
        {% endif %}
    </h1>
    
    <p style="text-align: center; color: #64748b; font-size: 15px; margin-bottom: 30px;">
        Certaines échéances n'ont pas été honorées à la date limite prévue.
    </p>

    <div style="color: #475569; font-size: 15px; line-height: 1.6;">
        <p>Bonjour <strong>{{ user.prenom }}</strong>,</p>
        
        <p>
            Notre système a identifié des loyers dont la <strong>date limite de paiement est dépassée</strong>. Ces dossiers ont été automatiquement basculés en statut <span style="color: {{ alertColor }}; font-weight: 700;">"EN RETARD"</span>.
        </p>
    </div>

    {# Bloc d'information principal - Style Alerte #}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fff1f2; border-radius: 8px; border: 1px solid #fecdd3; border-left: 4px solid {{ alertColor }}; margin: 25px 0;">
        <tr>
            <td style="padding: 25px;">
                <h3 style="margin-top: 0; font-size: 14px; color: {{ alertColor }}; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 800;">
                    ⚠️ Détails de l'alerte
                </h3>
                <p style="font-size: 14px; color: #475569; margin: 10px 0 0 0;">
                    {{ message }}
                </p>
            </td>
        </tr>
    </table>

    {# Bouton d'action #}
    {% if url %}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 35px 0;">
        <tr>
            <td align="center">
                <a href="{{ url }}" 
                   style="background-color: {{ alertColor }}; color: #ffffff; padding: 14px 35px; text-decoration: none; border-radius: 50px; font-weight: 700; font-size: 13px; display: inline-block; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 6px rgba(225, 29, 72, 0.2);">
                    VOIR LES IMPAYÉS
                </a>
            </td>
        </tr>
    </table>
    {% endif %}

    {# Rappel informatif #}
    <div style="background-color: #ffffff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 15px; margin-top: 20px;">
        <p style="font-size: 13px; color: #64748b; margin: 0; text-align: center;">
            📢 <strong>Conseil :</strong> Vous pouvez désormais procéder aux relances ou appliquer les pénalités de retard si votre contrat le prévoit.
        </p>
    </div>

    {# Lien de secours #}
    {% if url %}
    <p style="margin-top: 30px; font-size: 11px; color: #94a3b8; text-align: center; line-height: 1.5;">
        Si le bouton ne fonctionne pas, copiez ce lien :<br>
        <span style="color: {{ alertColor }};">{{ url }}</span>
    </p>
    {% endif %}

    {# Signature #}
    <div style="margin-top: 40px; font-size: 14px; border-top: 1px solid #f1f5f9; padding-top: 20px; color: #475569;">
        <p style="margin-bottom: 5px;">Une question sur cette génération ? Notre support est à votre écoute.</p>
        <p style="margin-top: 20px;">
            Cordialement,<br>
            <strong style="color: {{ primaryColor }};">L'équipe LOYER-EXPRESS</strong>
        </p>
    </div>
{% endblock %}