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

{% block title %}{{ 'subscription.cancel.title'|trans }} - {{ 'app.name'|trans }}{% endblock %}

{% set body_class = 'page-with-hero' %}

{% block hero %}
<!-- Hero Section Cancel -->
<section class="hero-section">
    <div class="hero-decoration">
        <i class="fas fa-times-circle"></i>
    </div>
    
    <div class="container">
        <div class="hero-content text-center">
            <div class="status-icon warning">
                <i class="fas fa-times-circle"></i>
                </div>
            <h1 class="hero-title">{{ 'subscription.cancel.title'|trans }}</h1>
            <p class="hero-subtitle">
                    {{ 'subscription.cancel.description'|trans }}
                </p>
            </div>
    </div>
</section>
{% endblock %}

{% block body %}
<div class="status-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card mb-4">
                <div class="card-body text-center">
                    <h5><i class="fas fa-info-circle text-info me-2"></i>{{ 'subscription.cancel.what_do'|trans }}</h5>
                    <hr>
                    
                        <div class="status-actions">
                            <a href="{{ path('subscription_plans') }}" class="btn btn-primary mb-3">
                            <i class="fas fa-arrow-left me-2"></i>
                            {{ 'subscription.cancel.back_to_plans'|trans }}
                        </a>
                        
                        <a href="{{ path('app_homepage') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-home me-2"></i>
                            {{ 'subscription.cancel.back_to_home'|trans }}
                        </a>
                    </div>
                </div>
            </div>
            
                <div class="card mb-4">
                <div class="card-body">
                    <h6><i class="fas fa-question-circle text-primary me-2"></i>{{ 'subscription.cancel.why_choose'|trans }}</h6>
                    <hr>
                    <ul class="list-unstyled">
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {{ 'subscription.cancel.benefit.more_objects'|trans }}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {{ 'subscription.cancel.benefit.advanced_tools'|trans }}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {{ 'subscription.cancel.benefit.better_visibility'|trans }}
                        </li>
                        <li class="mb-2">
                            <i class="fas fa-check text-success me-2"></i>
                            {{ 'subscription.cancel.benefit.priority_support'|trans }}
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Support -->
                <div class="alert alert-light" role="alert">
                <h6><i class="fas fa-headset me-2"></i>{{ 'subscription.cancel.support.title'|trans }}</h6>
                <p class="mb-0">
                    {{ 'subscription.cancel.support.description'|trans({
                        '%email%': 'support@antiquites-en-france.fr',
                        '%phone%': '01 23 45 67 89'
                    })|raw }}
                </p>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}