{% extends '@kohinos/email/email_layout.html.twig' %}

{% set title %}
{% apply spaceless %}
	Votre modification de montant a été approuvée
{% endapply %}
{% endset %}

{% block content %}
<div style="font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f4;">
    <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; padding: 30px; border-radius: 10px;">
        <h2 style="color: #28a745;">✅ Modification de montant approuvée</h2>
        
        <p>Bonjour {{ entity.user.firstname }},</p>
        
        <p>
            Bonne nouvelle ! Votre demande de modification de montant pour votre cotisation <strong>{{ subscriptionType }}</strong>
            a été approuvée par notre trésorier.
        </p>
        
        <div style="background-color: #d4edda; padding: 15px; border-left: 4px solid #28a745; margin: 20px 0;">
            <h3 style="margin-top: 0; color: #155724;">Changement de montant</h3>
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 10px 0;"><strong>Ancien montant :</strong></td>
                    <td style="padding: 10px 0; text-align: right;">{{ oldAmount|number_format(2, ',', ' ') }} €</td>
                </tr>
                <tr>
                    <td style="padding: 10px 0;"><strong>Nouveau montant :</strong></td>
                    <td style="padding: 10px 0; text-align: right; color: #28a745; font-weight: bold; font-size: 18px;">
                        {{ newAmount|number_format(2, ',', ' ') }} €
                    </td>
                </tr>
                {% if request.solidoumeParameter %}
                <tr>
                    <td style="padding: 10px 0;"><strong>Caisse SSA :</strong></td>
                    <td style="padding: 10px 0; text-align: right;">{{ request.solidoumeParameter.name }}</td>
                </tr>
                {% endif %}
                <tr>
                    <td style="padding: 10px 0;"><strong>Mode de paiement :</strong></td>
                    <td style="padding: 10px 0; text-align: right;">{{ request.isEmlcPayment ? 'e-mlc' : 'SEPA (prélèvement bancaire)' }}</td>
                </tr>
            </table>
        </div>
        
        {% if request.isEuroPayment %}
        <div style="background-color: #d1ecf1; padding: 15px; border-left: 4px solid #17a2b8; margin: 20px 0;">
            <p style="margin: 0;"><strong>💳 Prélèvement SEPA</strong></p>
            <p style="margin: 10px 0 0 0;">
                Le nouveau montant de <strong>{{ newAmount|number_format(2, ',', ' ') }} €</strong> 
                sera prélevé sur votre compte bancaire à partir du <strong>mois prochain</strong>.
                {% if request.sepaMandate %}
                <br>Mandat SEPA : {{ request.sepaMandate.mandateReference }}
                {% endif %}
            </p>
        </div>
        {% else %}
        <div style="background-color: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; margin: 20px 0;">
            <p style="margin: 0;"><strong>💰 Prélèvement e-mlc</strong></p>
            <p style="margin: 10px 0 0 0;">
                Le nouveau montant de <strong>{{ newAmount|number_format(2, ',', ' ') }} e-mlc</strong> 
                sera prélevé sur votre compte eMLc à partir du <strong>mois prochain</strong>.
            </p>
        </div>
        {% endif %}
        
        <div style="background-color: #f8f9fa; padding: 15px; border-left: 4px solid #6c757d; margin: 20px 0;">
            <p style="margin: 0;"><strong>📅 Application du changement</strong></p>
            <ul style="margin: 10px 0 0 0; padding-left: 20px;">
                <li>Le nouveau montant sera effectif dès le <strong>prochain prélèvement mensuel</strong></li>
                <li>Votre ancien montant reste valable pour le mois en cours</li>
                <li>Aucune action supplémentaire n'est requise de votre part</li>
            </ul>
        </div>
        
        <p>Merci pour votre confiance !</p>
        
        <p style="margin-top: 30px; font-size: 12px; color: #666;">
            Si vous avez des questions sur cette modification, n'hésitez pas à contacter notre équipe.
        </p>
    </div>
</div>
{% endblock content %}