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

{% set title %}
{% apply spaceless %}
	Votre demande de cotisation {{ subscriptionType }} a été validé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;">✅ Cotisation {{ subscriptionType }} validée</h2>
        
        <p>Bonjour {{ entity.user.firstname }},</p>
        
        <p>Votre demande de cotisation <strong>{{ subscriptionType }}</strong> a été validé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;">Détails de la cotisation</h3>
            <ul style="list-style: none; padding: 0;">
                <li><strong>Montant :</strong> {{ request.amount|number_format(2, ',', ' ') }} €</li>
                <li><strong>Mode de paiement :</strong> {{ request.isEmlcPayment ? 'e-mlc' : 'SEPA (prélèvement bancaire)' }}</li>
                {% if request.solidoumeParameter %}
                <li><strong>Caisse SSA :</strong> {{ request.solidoumeParameter.name }}</li>
                {% endif %}
            </ul>
        </div>
        
        {% if request.isEuroPayment %}
        <div style="background-color: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; margin: 20px 0;">
            <p style="margin: 0;"><strong>💳 Prélèvement SEPA</strong></p>
            <p style="margin: 5px 0 0 0;">
                Le prélèvement de <strong>{{ request.amount|number_format(2, ',', ' ') }} €</strong> sera effectué mensuellement sur votre compte bancaire.
                {% if request.sepaMandate %}
                <br>Mandat SEPA : {{ request.sepaMandate.mandateReference }}
                {% endif %}
            </p>
        </div>
        {% else %}
        <div style="background-color: #d1ecf1; padding: 15px; border-left: 4px solid #17a2b8; margin: 20px 0;">
            <p style="margin: 0;"><strong>💰 Prélèvement e-mlc</strong></p>
            <p style="margin: 5px 0 0 0;">
                Le montant de <strong>{{ request.amount|number_format(2, ',', ' ') }} e-mlc</strong> sera prélevé automatiquement sur votre compte eMLc chaque mois.
            </p>
        </div>
        {% endif %}
        
        <p>Merci pour votre participation !</p>
        
        <p style="margin-top: 30px; font-size: 12px; color: #666;">
            Si vous avez des questions, n'hésitez pas à contacter notre équipe.
        </p>
    </div>
</div>
{% endblock content %}