{# app/templates/platform/content-page.html #}
{# Generic template for platform content pages (About, FAQ, Terms, Contact, etc.) #}
{% extends "platform/base.html" %}

{% set _lang = current_language|default('fr') %}
{% set _page_title = page.get_translated_title(_lang) %}
{% set _page_content = page.get_translated_content(_lang) %}

{% block title %}{{ _page_title }} - Marketplace{% endblock %}

{% block meta_description %}
    {% if page.meta_description %}
        {{ page.meta_description }}
    {% else %}
        {{ _page_title }} - Multi-Store Marketplace Platform
    {% endif %}
{% endblock %}

{% block meta_keywords %}
    {% if page.meta_keywords %}
        {{ page.meta_keywords }}
    {% else %}
        {{ _page_title }}, marketplace, platform
    {% endif %}
{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    {# Breadcrumbs #}
    <nav class="flex mb-8 text-sm" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-2">
            <li class="inline-flex items-center">
                <a href="/" class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
                    <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                    </svg>
                    {{ _("cms.platform.content_page.home") }}
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-4 h-4 text-gray-400 mx-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-gray-700 dark:text-gray-300 font-medium">{{ _page_title }}</span>
                </div>
            </li>
        </ol>
    </nav>

    {# Page Header #}
    <div class="mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-4">
            {{ _page_title }}
        </h1>

        {# Published date (if available) #}
        {% if page.published_at %}
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
            <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            <span>{{ _("cms.platform.content_page.published") }} {{ page.published_at.strftime('%B %d, %Y') }}</span>
        </div>
        {% endif %}
    </div>

    {# Page Content #}
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm p-8 md:p-12">
        <div class="prose prose-lg dark:prose-invert max-w-none">
            {% if page.content_format == 'markdown' %}
                {# Future enhancement: Render with markdown library #}
                <div class="markdown-content">
                    {{ _page_content | safe }}{# sanitized: CMS content #}
                </div>
            {% else %}
                {# HTML content (default) #}
                {{ _page_content | safe }}{# sanitized: CMS content #}
            {% endif %}
        </div>
    </div>

    {# Last updated timestamp #}
    {% if page.updated_at %}
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 text-center">
        <p class="text-sm text-gray-500 dark:text-gray-400">
            {{ _("cms.platform.content_page.last_updated") }} {{ page.updated_at.strftime('%B %d, %Y') }}
        </p>
    </div>
    {% endif %}

    {# Call-to-action section (for specific pages) #}
    {% if page.slug in ['about', 'contact'] %}
    <div class="mt-12 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl p-8 text-center">
        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
            {% if page.slug == 'about' %}
                {{ _("cms.platform.content_page.cta_about_title") }}
            {% elif page.slug == 'contact' %}
                {{ _("cms.platform.content_page.cta_contact_title") }}
            {% endif %}
        </h3>
        <p class="text-gray-600 dark:text-gray-400 mb-6">
            {% if page.slug == 'about' %}
                {{ _("cms.platform.content_page.cta_about_subtitle") }}
            {% elif page.slug == 'contact' %}
                {{ _("cms.platform.content_page.cta_contact_subtitle") }}
            {% endif %}
        </p>
        <a href="/contact" class="inline-block bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-8 py-3 rounded-lg font-semibold hover:opacity-90 transition">
            {% if page.slug == 'about' %}
                {{ _("cms.platform.content_page.cta_about_button") }}
            {% elif page.slug == 'contact' %}
                {{ _("cms.platform.content_page.cta_contact_button") }}
            {% endif %}
        </a>
    </div>
    {% endif %}

</div>

{# Additional styling for prose content #}
<style>
    /* Enhanced prose styling for content pages */
    .prose {
        color: inherit;
    }

    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
        color: inherit;
        font-weight: 700;
        margin-top: 2em;
        margin-bottom: 1em;
    }

    .prose h2 {
        font-size: 1.875rem;
        line-height: 2.25rem;
        border-bottom: 2px solid var(--color-primary);
        padding-bottom: 0.5rem;
    }

    .prose h3 {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .prose p {
        margin-bottom: 1.5em;
        line-height: 1.75;
    }

    .prose ul, .prose ol {
        margin-bottom: 1.5em;
        padding-left: 1.5em;
    }

    .prose li {
        margin-bottom: 0.5em;
    }

    .prose a {
        color: var(--color-primary);
        text-decoration: underline;
        font-weight: 500;
    }

    .prose a:hover {
        opacity: 0.8;
    }

    .prose strong {
        font-weight: 600;
        color: inherit;
    }

    .prose code {
        background-color: rgba(0, 0, 0, 0.05);
        padding: 0.2em 0.4em;
        border-radius: 0.25rem;
        font-size: 0.9em;
    }

    .dark .prose code {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .prose pre {
        background-color: rgba(0, 0, 0, 0.05);
        padding: 1em;
        border-radius: 0.5rem;
        overflow-x: auto;
        margin-bottom: 1.5em;
    }

    .dark .prose pre {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .prose blockquote {
        border-left: 4px solid var(--color-primary);
        padding-left: 1em;
        font-style: italic;
        opacity: 0.9;
        margin: 1.5em 0;
    }

    .prose table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1.5em;
    }

    .prose th, .prose td {
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0.75em;
        text-align: left;
    }

    .dark .prose th, .dark .prose td {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .prose th {
        background-color: rgba(0, 0, 0, 0.05);
        font-weight: 600;
    }

    .dark .prose th {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .prose hr {
        border: 0;
        border-top: 2px solid rgba(0, 0, 0, 0.1);
        margin: 3em 0;
    }

    .dark .prose hr {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .prose img {
        border-radius: 0.5rem;
        margin: 2em auto;
        max-width: 100%;
        height: auto;
    }
</style>
{% endblock %}