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

{% block subject %}{{ 'email.account_suspended.subject'|trans }}{% endblock %}

{% block header %}
    <h1 style="color: #e74c3c; margin-bottom: 20px;">
        <i class="fas fa-ban" style="color: #e74c3c;"></i> {{ 'email.account_suspended.header'|trans }}
    </h1>
{% endblock %}

{% block content %}
    <div style="background-color: #fdf2f2; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 4px solid #e74c3c;">
        <h2 style="color: #c0392b; margin-top: 0; margin-bottom: 15px;">
            <i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> {{ 'email.account_suspended.content.title'|trans }}
        </h2>
        <p style="font-size: 16px; margin-bottom: 10px; color: #a93226;">
            {{ 'email.account_suspended.content.greeting'|trans({'%firstName%': member.firstName, '%suspensionDate%': suspensionDate|date('d/m/Y à H:i')}) }}
        </p>
        <p style="margin: 0; color: #a93226; font-weight: bold;">
            {{ 'email.account_suspended.content.limited_access'|trans }}
        </p>
    </div>

    <div style="margin-bottom: 30px;">
        <h3 style="color: #2c3e50; margin-bottom: 15px;"><i class="fas fa-info-circle" style="color: #3498db;"></i> {{ 'email.account_suspended.summary.title'|trans }}</h3>
        
        <div style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <table style="width: 100%; border-collapse: collapse;">
                <tr>
                    <td style="padding: 8px 0; color: #666; width: 30%;"><strong>{{ 'email.account_suspended.summary.suspension_date'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: #2c3e50;">{{ suspensionDate|date('d/m/Y à H:i') }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #666;"><strong>{{ 'email.account_suspended.summary.last_payment_failure'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: #2c3e50;">{{ paymentFailure.failureDate|date('d/m/Y à H:i') }}</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #666;"><strong>{{ 'email.account_suspended.summary.attempts_made'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: #2c3e50;">{{ paymentFailure.attemptCount }} / 5</td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: #666;"><strong>{{ 'email.account_suspended.summary.grace_period'|trans }}</strong></td>
                    <td style="padding: 8px 0; color: #e74c3c;">{{ 'email.account_suspended.summary.expired'|trans }}</td>
                </tr>
            </table>
        </div>
    </div>

    <div style="margin-bottom: 30px;">
        <h3 style="color: #2c3e50; margin-bottom: 15px;"><i class="fas fa-minus-circle" style="color: #e74c3c;"></i> {{ 'email.account_suspended.restrictions.title'|trans }}</h3>
        
        <div style="background-color: #fff5f5; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 3px solid #e74c3c;">
            <h4 style="color: #c0392b; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-camera" style="color: #c0392b;"></i> {{ 'email.account_suspended.restrictions.publishing.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.account_suspended.restrictions.publishing.description'|trans }}</p>
        </div>
        
        <div style="background-color: #fff5f5; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 3px solid #e74c3c;">
            <h4 style="color: #c0392b; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-eye-slash" style="color: #c0392b;"></i> {{ 'email.account_suspended.restrictions.visibility.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.account_suspended.restrictions.visibility.description'|trans }}</p>
        </div>
        
        <div style="background-color: #fff5f5; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 3px solid #e74c3c;">
            <h4 style="color: #c0392b; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-search" style="color: #c0392b;"></i> {{ 'email.account_suspended.restrictions.search.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.account_suspended.restrictions.search.description'|trans }}</p>
        </div>
        
        <div style="background-color: #fff5f5; padding: 15px; border-radius: 6px; margin-bottom: 15px; border-left: 3px solid #e74c3c;">
            <h4 style="color: #c0392b; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-chart-line" style="color: #c0392b;"></i> {{ 'email.account_suspended.restrictions.statistics.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.account_suspended.restrictions.statistics.description'|trans }}</p>
        </div>
    </div>

    <div style="background-color: #e8f5e8; padding: 20px; border-radius: 8px; margin-bottom: 30px;">
        <h3 style="color: #27ae60; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-undo" style="color: #27ae60;"></i> {{ 'email.account_suspended.reactivation.title'|trans }}</h3>
        
        <div style="background-color: white; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <h4 style="color: #27ae60; margin-top: 0; margin-bottom: 10px;">{{ 'email.account_suspended.reactivation.step1.title'|trans }}</h4>
            <p style="margin: 0; color: #1e8449;">{{ 'email.account_suspended.reactivation.step1.description'|trans }}</p>
        </div>
        
        <div style="background-color: white; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <h4 style="color: #27ae60; margin-top: 0; margin-bottom: 10px;">{{ 'email.account_suspended.reactivation.step2.title'|trans }}</h4>
            <p style="margin: 0; color: #1e8449;">{{ 'email.account_suspended.reactivation.step2.description'|trans }}</p>
        </div>
        
        <div style="background-color: white; padding: 15px; border-radius: 6px;">
            <h4 style="color: #27ae60; margin-top: 0; margin-bottom: 10px;">{{ 'email.account_suspended.reactivation.step3.title'|trans }}</h4>
            <p style="margin: 0; color: #1e8449;">{{ 'email.account_suspended.reactivation.step3.description'|trans }}</p>
        </div>
    </div>

    <div style="text-align: center; margin-bottom: 30px;">
        <a href="{{ dashboardUrl }}" 
           style="display: inline-block; background-color: #e74c3c; color: white; padding: 15px 30px; 
                  text-decoration: none; border-radius: 6px; font-weight: bold; margin-right: 10px; margin-bottom: 10px;">
            <i class="fas fa-credit-card"></i> {{ 'email.account_suspended.buttons.regularize_payment'|trans }}
        </a>
        <a href="{{ contactUrl }}" 
           style="display: inline-block; background-color: #3498db; color: white; padding: 15px 30px; 
                  text-decoration: none; border-radius: 6px; font-weight: bold; margin-bottom: 10px;">
            <i class="fas fa-phone"></i> {{ 'email.account_suspended.buttons.contact_support'|trans }}
        </a>
    </div>

    <div style="background-color: #fff3cd; padding: 20px; border-radius: 8px; margin-bottom: 30px; border-left: 4px solid #ffc107;">
        <h3 style="color: #856404; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-clock" style="color: #f39c12;"></i> {{ 'email.account_suspended.data_conservation.title'|trans }}</h3>
        <p style="color: #856404; margin-bottom: 10px;">
            <strong>{{ 'email.account_suspended.data_conservation.good_news'|trans }}</strong>
        </p>
        <ul style="color: #856404; padding-left: 20px; margin: 0;">
            <li style="margin-bottom: 8px;">{{ 'email.account_suspended.data_conservation.objects_saved'|trans }}</li>
            <li style="margin-bottom: 8px;">{{ 'email.account_suspended.data_conservation.profile_preserved'|trans }}</li>
            <li style="margin-bottom: 8px;">{{ 'email.account_suspended.data_conservation.stats_restored'|trans }}</li>
            <li style="margin-bottom: 0;">{{ 'email.account_suspended.data_conservation.no_data_loss'|trans }}</li>
        </ul>
    </div>

    <div style="background-color: #f8f9fa; padding: 20px; border-radius: 8px; text-align: center;">
        <h3 style="color: #2c3e50; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-heart" style="color: #e74c3c;"></i> {{ 'email.account_suspended.support_message.title'|trans }}</h3>
        <p style="color: #666; margin-bottom: 15px;">
            {{ 'email.account_suspended.support_message.understanding'|trans }}
        </p>
        <p style="color: #666; margin: 0;">
            {{ 'email.account_suspended.support_message.team_available'|trans }}
        </p>
    </div>

    <p style="margin-top: 30px; color: #666; font-size: 14px; text-align: center;">
        <strong>{{ 'email.account_suspended.support_message.priority_support'|trans }}</strong><br>
        <a href="mailto:support@antiquites-en-france.com" style="color: #e74c3c; font-weight: bold;">
            support@antiquites-en-france.com
        </a><br>
        {{ 'email.account_suspended.support_message.phone_hours'|trans({'%supportPhone%': supportPhone}) }}
    </p>
{% endblock %}

{% block footer %}
    <p style="text-align: center; color: #666; font-size: 12px; margin: 0;">
        {{ 'email.account_suspended.footer.info'|trans }}<br>
        {{ 'email.account_suspended.footer.reason'|trans({'%suspensionDate%': suspensionDate|date('d/m/Y')}) }}
    </p>
{% endblock %}