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

{% block subject %}
    {% if daysLeft == 1 %}
        {{ 'email.trial_ending.subject.last_chance'|trans }}
    {% elseif daysLeft <= 3 %}
        {{ 'email.trial_ending.subject.few_days'|trans({'%days%': daysLeft}) }}
    {% else %}
        {{ 'email.trial_ending.subject.many_days'|trans({'%days%': daysLeft}) }}
    {% endif %}
{% endblock %}

{% block header %}
    <h1 style="color: {% if urgency == 'critical' %}#e74c3c{% elseif urgency == 'high' %}#f39c12{% else %}#3498db{% endif %}; margin-bottom: 20px;">
        {% if daysLeft == 1 %}
            <i class="fas fa-exclamation-triangle" style="color: #e74c3c;"></i> {{ 'email.trial_ending.header.last_chance'|trans }}
        {% else %}
            <i class="fas fa-hourglass-half" style="color: #f39c12;"></i> {{ 'email.trial_ending.header.days_left'|trans({'%days%': daysLeft, '%plural%': daysLeft > 1 ? 's' : ''}) }}
        {% endif %}
    </h1>
{% endblock %}

{% block content %}
    <div style="background-color: {% if urgency == 'critical' %}#fdf2f2{% elseif urgency == 'high' %}#fef9e7{% else %}#e8f4fd{% endif %}; 
                padding: 20px; border-radius: 8px; margin-bottom: 20px; 
                border-left: 4px solid {% if urgency == 'critical' %}#e74c3c{% elseif urgency == 'high' %}#f39c12{% else %}#3498db{% endif %};">
        <h2 style="color: {% if urgency == 'critical' %}#c0392b{% elseif urgency == 'high' %}#d68910{% else %}#2980b9{% endif %}; margin-top: 0;">
            {% if daysLeft == 1 %}
                <i class="fas fa-bell" style="color: #e74c3c;"></i> {{ 'email.trial_ending.alert.ending_tomorrow'|trans }}
            {% else %}
                <i class="fas fa-clock" style="color: #f39c12;"></i> {{ 'email.trial_ending.alert.ending_in_days'|trans({'%days%': daysLeft}) }}
            {% endif %}
        </h2>
        <p style="font-size: 16px; margin-bottom: 10px; color: {% if urgency == 'critical' %}#a93226{% elseif urgency == 'high' %}#b7950b{% else %}#2471a3{% endif %};">
            {{ 'email.trial_ending.greeting'|trans({'%firstName%': member.firstName, '%endDate%': endDate|date('d/m/Y à H:i')}) }}
        </p>
        <p style="margin: 0; color: {% if urgency == 'critical' %}#a93226{% elseif urgency == 'high' %}#b7950b{% else %}#2471a3{% endif %};">
            {% if daysLeft == 1 %}
                {{ 'email.trial_ending.warning.last_chance'|trans }}
            {% else %}
                {{ 'email.trial_ending.warning.think_subscription'|trans }}
            {% endif %}
        </p>
    </div>

    <div style="margin-bottom: 30px;">
        <h3 style="color: #2c3e50; margin-bottom: 15px;"><i class="fas fa-gem" style="color: #9b59b6;"></i> {{ 'email.trial_ending.losing.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.trial_ending.losing.unlimited_objects.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.trial_ending.losing.unlimited_objects.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.trial_ending.losing.advanced_search.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.trial_ending.losing.advanced_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.trial_ending.losing.statistics.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.trial_ending.losing.statistics.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-headset" style="color: #c0392b;"></i> {{ 'email.trial_ending.losing.priority_support.title'|trans }}</h4>
            <p style="margin: 0; color: #a93226;">{{ 'email.trial_ending.losing.priority_support.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-euro-sign" style="color: #27ae60;"></i> {{ 'email.trial_ending.pricing.title'|trans }}</h3>
        
        <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
            <div style="background-color: white; padding: 20px; border-radius: 8px; margin-bottom: 15px; 
                        flex: 1; margin-right: 10px; min-width: 200px; text-align: center; border: 2px solid #3498db;">
                <h4 style="color: #2980b9; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-calendar-alt" style="color: #2980b9;"></i> {{ 'email.trial_ending.pricing.monthly.title'|trans }}</h4>
                <div style="font-size: 24px; font-weight: bold; color: #2c3e50; margin-bottom: 5px;">{{ 'email.trial_ending.pricing.monthly.price'|trans }}</div>
                <div style="color: #666; font-size: 14px;">{{ 'email.trial_ending.pricing.monthly.period'|trans }}</div>
                <div style="color: #27ae60; font-size: 12px; margin-top: 5px;">{{ 'email.trial_ending.pricing.monthly.benefit'|trans }}</div>
            </div>
            
            <div style="background-color: white; padding: 20px; border-radius: 8px; margin-bottom: 15px; 
                        flex: 1; margin-left: 10px; min-width: 200px; text-align: center; border: 2px solid #27ae60; position: relative;">
                <div style="background-color: #27ae60; color: white; padding: 5px 10px; border-radius: 15px; 
                            font-size: 12px; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);">
                    <i class="fas fa-piggy-bank"></i> {{ 'email.trial_ending.pricing.yearly.badge'|trans }}
                </div>
                <h4 style="color: #229954; margin-top: 15px; margin-bottom: 10px;"><i class="fas fa-calendar" style="color: #229954;"></i> {{ 'email.trial_ending.pricing.yearly.title'|trans }}</h4>
                <div style="font-size: 24px; font-weight: bold; color: #2c3e50; margin-bottom: 5px;">{{ 'email.trial_ending.pricing.yearly.price'|trans }}</div>
                <div style="color: #666; font-size: 14px;">{{ 'email.trial_ending.pricing.yearly.period'|trans }}</div>
                <div style="color: #27ae60; font-size: 12px; margin-top: 5px;">{{ 'email.trial_ending.pricing.yearly.benefit'|trans }}</div>
            </div>
        </div>
    </div>

    <div style="text-align: center; margin-bottom: 30px;">
        <a href="{{ subscriptionUrl }}" 
           style="display: inline-block; background-color: {% if urgency == 'critical' %}#e74c3c{% else %}#27ae60{% endif %}; 
                  color: white; padding: 20px 40px; text-decoration: none; border-radius: 8px; 
                  font-weight: bold; font-size: 18px; margin-bottom: 15px;">
            {% if daysLeft == 1 %}
                <i class="fas fa-rocket"></i> {{ 'email.trial_ending.buttons.subscribe_last_chance'|trans }}
            {% else %}
                <i class="fas fa-rocket"></i> {{ 'email.trial_ending.buttons.continue_premium'|trans }}
            {% endif %}
        </a>
        <br>
        <a href="{{ dashboardUrl }}" 
           style="display: inline-block; background-color: #3498db; color: white; padding: 12px 25px; 
                  text-decoration: none; border-radius: 6px; font-weight: bold;">
            <i class="fas fa-tachometer-alt"></i> {{ 'email.trial_ending.buttons.dashboard'|trans }}
        </a>
    </div>

    {% if urgency == 'critical' %}
    <div style="background-color: #fdf2f2; padding: 20px; border-radius: 8px; text-align: center; border: 2px solid #e74c3c;">
        <h3 style="color: #c0392b; margin-top: 0; margin-bottom: 15px;"><i class="fas fa-exclamation-circle" style="color: #e74c3c;"></i> {{ 'email.trial_ending.critical.title'|trans }}</h3>
        <p style="color: #a93226; margin: 0; font-size: 16px;">
            {{ 'email.trial_ending.critical.description'|trans }}
        </p>
    </div>
    {% endif %}

    <p style="margin-top: 30px; color: #666; font-size: 14px;">
        {{ 'email.trial_ending.support_text'|trans }}
        <a href="mailto:support@antiquites-en-france.com" style="color: #3498db;">
            {{ 'email.trial_ending.contact_team'|trans }}
        </a> - {{ 'email.trial_ending.here_to_help'|trans }}
    </p>
{% endblock %}

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