{% extends 'base.html' %}
{% load traduction_tags %}

{% block title %}{{ legal_page.title }} - {{ settings.site_name }}{% endblock %}

{% block meta_description %}{{ legal_page.meta_description|default:legal_page.summary }}{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<section class="bg-gray-100 py-4 border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="flex text-sm text-gray-600">
            <a href="{% url 'core:home' %}" class="hover:text-primary transition">{% t 'accueil' 'Accueil' %}</a>
            <span class="mx-2">/</span>
            <span class="text-primary font-medium">{{ legal_page.title }}</span>
        </nav>
    </div>
</section>

<!-- Page Header -->
<section class="bg-gradient-to-r from-primary to-secondary py-12 text-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-start justify-between">
            <div>
                <h1 class="text-3xl md:text-4xl font-bold">{{ legal_page.title }}</h1>
                {% if legal_page.summary %}
                <p class="mt-4 text-lg text-gray-200 max-w-3xl">{{ legal_page.summary }}</p>
                {% endif %}
                <p class="mt-4 text-sm text-gray-300">
                    {% t 'derniere_mise_a_jour' 'Derniere mise a jour' %}: {{ legal_page.updated_at|date:"d F Y" }}
                </p>
            </div>
            {% if user.is_staff %}
            <a href="{% url 'admin:core_legalpage_change' legal_page.pk %}"
               class="inline-flex items-center px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg text-sm font-medium transition"
               title="Modifier cette page">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
                Modifier
            </a>
            {% endif %}
        </div>
    </div>
</section>

<!-- Content -->
<section class="py-12 bg-white">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="prose prose-lg max-w-none legal-content">
            {{ legal_page.content|safe }}
        </div>
    </div>
</section>

<!-- Navigation entre pages legales -->
{% if all_legal_pages %}
<section class="py-8 bg-gray-50 border-t">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">{% t 'autres_pages_legales' 'Autres pages legales' %}</h3>
        <div class="flex flex-wrap gap-3">
            {% for page in all_legal_pages %}
            <a href="{% url 'core:legal_page' slug=page.slug %}"
               class="inline-flex items-center px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-700 hover:bg-primary hover:text-white hover:border-primary transition">
                {{ page.title }}
            </a>
            {% endfor %}
        </div>
    </div>
</section>
{% endif %}

<!-- Contact -->
<section class="py-8 bg-gray-100 border-t">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-gray-600">
            {% t 'questions_sur_cette_page' 'Des questions concernant cette page' %}?
            <a href="{% url 'contact:contact' %}" class="text-secondary hover:underline font-medium">
                {% t 'contactez_nous' 'Contactez-nous' %}
            </a>
        </p>
    </div>
</section>
{% endblock %}

{% block extra_css %}
<style>
.legal-content h2 {
    color: #1e3a5f;
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.legal-content h3 {
    color: #1e3a5f;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.legal-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.legal-content ul li {
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: #2563eb;
    text-decoration: underline;
}

.legal-content a:hover {
    color: #1d4ed8;
}

.legal-content hr {
    margin: 2rem 0;
    border-color: #e5e7eb;
}

.legal-content strong {
    font-weight: 600;
    color: #1f2937;
}

.legal-content em {
    font-style: italic;
    color: #4b5563;
}
</style>
{% endblock %}