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

{% block subject %}
Changement de plan confirmé - {{ newPlan.name }}
{% endblock %}

{% block content %}
<tr>
    <td style="padding: 40px 30px;">
        <h1 style="color: #667eea; margin-bottom: 20px;">
            {% if isUpgrade %}
                🎉 Félicitations pour votre upgrade !
            {% elseif isDowngrade %}
                Changement de plan confirmé
            {% else %}
                Plan modifié avec succès
            {% endif %}
        </h1>

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

        <p style="font-size: 16px; line-height: 1.6; color: #333;">
            Nous vous confirmons le changement de votre plan d'abonnement :
        </p>

        {# Comparatif avant/après #}
        <table style="width: 100%; margin: 30px 0; border-collapse: separate; border-spacing: 0 10px;">
            <tr>
                <td style="padding: 20px; background: #f8f9fa; border-radius: 8px;">
                    <div style="text-align: center;">
                        <div style="color: #6c757d; font-size: 12px; text-transform: uppercase; margin-bottom: 5px;">Ancien plan</div>
                        <div style="font-size: 20px; font-weight: bold; color: #333;">{{ oldPlan.name }}</div>
                        <div style="color: #6c757d; font-size: 14px; margin-top: 5px;">{{ oldPlan.priceMonthly }}€/mois</div>
                    </div>
                </td>
                <td style="text-align: center; padding: 0 20px;">
                    <span style="font-size: 24px;">→</span>
                </td>
                <td style="padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; color: white;">
                    <div style="text-align: center;">
                        <div style="font-size: 12px; text-transform: uppercase; margin-bottom: 5px; opacity: 0.9;">Nouveau plan</div>
                        <div style="font-size: 20px; font-weight: bold;">{{ newPlan.name }}</div>
                        <div style="font-size: 14px; margin-top: 5px; opacity: 0.9;">{{ newPlan.priceMonthly }}€/mois</div>
                    </div>
                </td>
            </tr>
        </table>

        {% if isUpgrade %}
        <div style="background: #d1f4e0; border-left: 4px solid #10b981; padding: 15px; border-radius: 4px; margin: 20px 0;">
            <p style="margin: 0; color: #065f46; font-weight: 600;">✨ Vous débloquez maintenant :</p>
            <ul style="margin: 10px 0 0 0; padding-left: 20px; color: #065f46;">
                {% if newPlan.maxSites > oldPlan.maxSites %}
                <li>Plus de sites ({{ newPlan.maxSites == 9999 ? 'illimité' : newPlan.maxSites }})</li>
                {% endif %}
                {% if newPlan.maxPages > oldPlan.maxPages %}
                <li>{% if newPlan.maxPages == 9999 %}Pages illimitées{% else %}{{ newPlan.maxPages }} pages{% endif %}</li>
                {% endif %}
                {% if newPlan.maxStorage > oldPlan.maxStorage %}
                <li>{{ (newPlan.maxStorage / 1024)|round }} GB de stockage</li>
                {% endif %}
                {% if newPlan.aiGeneration and not oldPlan.aiGeneration %}
                <li>Génération IA de contenu</li>
                {% endif %}
                {% if not newPlan.hasAds and oldPlan.hasAds %}
                <li>Sans publicité</li>
                {% endif %}
            </ul>
        </div>
        {% endif %}

        <p style="font-size: 16px; line-height: 1.6; color: #333;">
            <strong>Détails de facturation :</strong><br>
            Intervalle : <strong>{{ subscription.billingInterval == 'yearly' ? 'Annuel' : 'Mensuel' }}</strong><br>
            {% if subscription.billingInterval == 'yearly' %}
            Montant : <strong>{{ newPlan.priceYearly }}€/an</strong><br>
            {% else %}
            Montant : <strong>{{ newPlan.priceMonthly }}€/mois</strong><br>
            {% endif %}
            Prochaine facturation : <strong>{{ subscription.currentPeriodEnd|date('d/m/Y') }}</strong>
        </p>

        <div style="text-align: center; margin: 30px 0;">
            <a href="{{ url('admin_site_subscription_current', {siteId: subscription.user.lastSite.site.id}) }}"
               style="display: inline-block; padding: 15px 40px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; text-decoration: none; border-radius: 50px; font-weight: 600;">
                Voir mon abonnement
            </a>
        </div>

        <p style="font-size: 14px; line-height: 1.6; color: #6c757d; margin-top: 40px;">
            Si vous avez des questions, n'hésitez pas à nous contacter.<br>
            L'équipe Izibrick
        </p>
    </td>
</tr>
{% endblock %}