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

{% block subject %}{{ 'subscription.trial_started.subject'|trans({}, 'emails') }}{% endblock %}

{% block header %}
    <h1 style="color: #2c3e50; margin-bottom: 20px;">
        <i class="fas fa-crown" style="color: #f1c40f;"></i> {{ 'subscription.trial_started.subject'|trans({}, 'emails') }}
    </h1>
{% endblock %}

{% block content %}
    <div style="background-color: #e8f5e8; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
        <h2 style="color: #27ae60; margin-top: 0;">
            <i class="fas fa-check-circle" style="color: #27ae60;"></i> {{ 'subscription.trial_started.congratulations'|trans({'%firstName%': member.firstName}, 'emails') }}
        </h2>
        <p style="font-size: 16px; margin-bottom: 10px;">
            {{ 'subscription.trial_started.trial_info'|trans({'%trialDays%': 15, '%endDate%': endDate|date('d/m/Y à H:i')}, 'emails') }}
        </p>
    </div>

    <div style="margin-bottom: 30px;">
        <h3 style="color: #2c3e50; margin-bottom: 15px;"><i class="fas fa-rocket" style="color: #3498db;"></i> {{ 'subscription.trial_started.benefits.title'|trans({}, 'emails') }}</h3>
        
        <div style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <h4 style="color: #3498db; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-camera" style="color: #3498db;"></i> {{ 'subscription.trial_started.benefits.unlimited_objects.title'|trans({}, 'emails') }}</h4>
            <p style="margin: 0;">{{ 'subscription.trial_started.benefits.unlimited_objects.description'|trans({}, 'emails') }}</p>
        </div>
        
        <div style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <h4 style="color: #3498db; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-search" style="color: #3498db;"></i> {{ 'subscription.trial_started.benefits.advanced_search.title'|trans({}, 'emails') }}</h4>
            <p style="margin: 0;">{{ 'subscription.trial_started.benefits.advanced_search.description'|trans({}, 'emails') }}</p>
        </div>
        
        <div style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <h4 style="color: #3498db; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-chart-line" style="color: #3498db;"></i> {{ 'subscription.trial_started.benefits.detailed_stats.title'|trans({}, 'emails') }}</h4>
            <p style="margin: 0;">{{ 'subscription.trial_started.benefits.detailed_stats.description'|trans({}, 'emails') }}</p>
        </div>
        
        <div style="background-color: #f8f9fa; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <h4 style="color: #3498db; margin-top: 0; margin-bottom: 10px;"><i class="fas fa-headset" style="color: #3498db;"></i> {{ 'subscription.trial_started.benefits.priority_support.title'|trans({}, 'emails') }}</h4>
            <p style="margin: 0;">{{ 'subscription.trial_started.benefits.priority_support.description'|trans({}, 'emails') }}</p>
        </div>
    </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: 10px;"><i class="fas fa-clock" style="color: #f39c12;"></i> {{ 'subscription.trial_started.important.title'|trans({}, 'emails') }}</h3>
        <p style="color: #856404; margin-bottom: 10px;">
            {{ 'subscription.trial_started.important.end_date'|trans({'%endDate%': endDate|date('d/m/Y à H:i')}, 'emails') }}
        </p>
        <p style="color: #856404; margin: 0;">
            {{ 'subscription.trial_started.important.reminder'|trans({}, 'emails') }}
        </p>
    </div>

    <div style="text-align: center; margin-bottom: 30px;">
        <a href="{{ dashboardUrl }}" 
           style="display: inline-block; background-color: #3498db; color: white; padding: 15px 30px; 
                  text-decoration: none; border-radius: 6px; font-weight: bold; margin-right: 10px;">
            <i class="fas fa-tachometer-alt"></i> {{ 'subscription.trial_started.buttons.dashboard'|trans({}, 'emails') }}
        </a>
        <a href="{{ catalogUrl }}" 
           style="display: inline-block; background-color: #27ae60; color: white; padding: 15px 30px; 
                  text-decoration: none; border-radius: 6px; font-weight: bold;">
            <i class="fas fa-search"></i> {{ 'subscription.trial_started.buttons.catalog'|trans({}, 'emails') }}
        </a>
    </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-lightbulb" style="color: #f39c12;"></i> {{ 'subscription.trial_started.tips.title'|trans({}, 'emails') }}</h3>
        <ul style="text-align: left; padding-left: 20px; color: #666;">
            <li style="margin-bottom: 8px;">{{ 'subscription.trial_started.tips.complete_profile'|trans({}, 'emails') }}</li>
            <li style="margin-bottom: 8px;">{{ 'subscription.trial_started.tips.publish_objects'|trans({}, 'emails') }}</li>
            <li style="margin-bottom: 8px;">{{ 'subscription.trial_started.tips.explore_listings'|trans({}, 'emails') }}</li>
            <li style="margin-bottom: 8px;">{{ 'subscription.trial_started.tips.configure_alerts'|trans({}, 'emails') }}</li>
        </ul>
    </div>

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

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