{# app/templates/shop/content-page.html #}
{# Generic CMS content page template #}
{% extends "shop/base.html" %}

{# Dynamic title from CMS #}
{% block title %}{{ page.title }}{% endblock %}

{# SEO from CMS #}
{% block meta_description %}{{ page.meta_description or page.title }}{% endblock %}
{% block meta_keywords %}{{ page.meta_keywords or vendor.name }}{% endblock %}

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

    {# Breadcrumbs #}
    <div class="breadcrumb mb-6">
        <a href="{{ base_url }}" class="hover:text-primary">Home</a>
        <span>/</span>
        <span class="text-gray-900 dark:text-gray-200 font-medium">{{ page.title }}</span>
    </div>

    {# Page Header #}
    <div class="mb-8">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">
            {{ page.title }}
        </h1>

        {# Optional: Show vendor override badge for debugging #}
        {% if page.vendor_id %}
        <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                Custom {{ vendor.name }} version
            </span>
        </div>
        {% endif %}

        {# Published date (optional) #}
        {% if page.published_at %}
        <div class="text-sm text-gray-500 dark:text-gray-400">
            Published {{ page.published_at.strftime('%B %d, %Y') }}
        </div>
        {% endif %}
    </div>

    {# Content #}
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-8">
        <div class="prose prose-lg dark:prose-invert max-w-none">
            {% if page.content_format == 'markdown' %}
                {# Markdown content - future enhancement: render with markdown library #}
                <div class="markdown-content">
                    {{ page.content | safe }}
                </div>
            {% else %}
                {# HTML content (default) #}
                {{ page.content | safe }}
            {% endif %}
        </div>
    </div>

    {# Last updated timestamp #}
    {% if page.updated_at %}
    <div class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
        Last updated: {{ page.updated_at.strftime('%B %d, %Y') }}
    </div>
    {% endif %}

</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Future enhancement: Add any CMS-specific JavaScript here
// For example:
// - Table of contents generation
// - Anchor link handling
// - Image lightbox
// - Copy code blocks
</script>
{% endblock %}