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

{% block content %}
<tr>
    <td style="padding: 40px 30px;">
        <div style="text-align: center; margin-bottom: 30px;">
            <div style="display: inline-block; width: 64px; height: 64px; background: linear-gradient(135deg, #ef4444, #dc2626); border-radius: 50%; line-height: 64px; font-size: 28px;">
                ⚠️
            </div>
        </div>

        <h1 style="color: #dc2626; margin: 0 0 20px 0; font-size: 24px; text-align: center;">
            Échec de paiement
        </h1>

        <p style="font-size: 16px; line-height: 1.6; color: #333;">
            Bonjour {{ user.email }},
        </p>

        <p style="font-size: 16px; line-height: 1.6; color: #333;">
            Nous n'avons pas pu traiter le paiement de votre abonnement
            <strong>{{ subscription.plan.name }}</strong>.
        </p>

        {# Récapitulatif de la facture #}
        <div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 20px; margin: 24px 0;">
            <p style="margin: 0 0 8px 0; font-weight: 600; color: #991b1b;">Détails de la tentative de paiement</p>
            {% if invoiceId %}
            <p style="margin: 4px 0; color: #7f1d1d; font-size: 14px;">
                Référence facture : <code style="background: rgba(0,0,0,0.06); padding: 2px 6px; border-radius: 3px;">{{ invoiceId }}</code>
            </p>
            {% endif %}
            {% if subscription.plan.priceMonthly is defined %}
            <p style="margin: 4px 0; color: #7f1d1d; font-size: 14px;">
                Montant :
                <strong>
                    {% if subscription.billingInterval == 'yearly' %}
                        {{ subscription.plan.priceYearly }}€/an
                    {% else %}
                        {{ subscription.plan.priceMonthly }}€/mois
                    {% endif %}
                </strong>
            </p>
            {% endif %}
        </div>

        <p style="font-size: 16px; line-height: 1.6; color: #333;">
            Pour éviter toute interruption de service, veuillez mettre à jour votre moyen de paiement dès que possible.
        </p>

        <div style="text-align: center; margin: 30px 0;">
            <a href="{{ url('user_billing_invoices') }}"
               style="display: inline-block; padding: 14px 36px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 50px; font-weight: 600; font-size: 15px;">
                Mettre à jour mon paiement
            </a>
        </div>

        <div style="background: #f8f9fa; border-radius: 8px; padding: 16px; margin-top: 24px;">
            <p style="margin: 0; font-size: 13px; color: #6c757d; text-align: center;">
                Si vous pensez qu'il s'agit d'une erreur ou si vous avez besoin d'aide,<br>
                contactez-nous à <a href="mailto:support@izibrick.com" style="color: #667eea;">support@izibrick.com</a>
            </p>
        </div>

        <p style="font-size: 14px; line-height: 1.6; color: #6c757d; margin-top: 30px;">
            L'équipe Izibrick
        </p>
    </td>
</tr>
{% endblock %}