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

{% set title %}
{% apply spaceless %}
	Votre demande de cotisation récurrente a été enregistré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: #007bff;">📝 Demande de cotisation enregistrée</h2>
        
        <p>Bonjour {{ entity.user.firstname }},</p>
        
        <p>Votre demande de <strong>cotisation récurrente</strong> a bien été enregistrée.</p>
        
        <div style="background-color: #d1ecf1; padding: 15px; border-left: 4px solid #17a2b8; margin: 20px 0;">
            <h3 style="margin-top: 0; color: #0c5460;">Détails de la demande</h3>
            <ul style="list-style: none; padding: 0;">
                <li><strong>Type :</strong> {% if request.solidoumeParameter %}SSA - {{ request.solidoumeParameter.name }}{% else %}Cotisation MLC{% endif %}</li>
                <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 not request.isEmlcPayment and request.debitDay %}
                <li><strong>Jour de prélèvement :</strong> {{ request.debitDay }}</li>
                {% endif %}
            </ul>
        </div>
        
        <div style="background-color: #fff3cd; padding: 15px; border-left: 4px solid #ffc107; margin: 20px 0;">
            <p style="margin: 0;"><strong>⏳ En attente de validation</strong></p>
            <p style="margin: 5px 0 0 0;">
                Votre demande est actuellement <strong>en attente de validation</strong> par le trésorier.
                Vous recevrez un email de confirmation dès que votre cotisation sera validée.
            </p>
        </div>
        
        <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 %}