{# app/templates/storefront/errors/base.html #}
{# Error page base template using Tailwind CSS with store theme support #}
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ status_code }} - {{ status_name }}{% endblock %}{% if store %} | {{ store.name }}{% endif %}</title>

    {# Tailwind CSS #}
    <link rel="stylesheet" href="{{ url_for('static', path='storefront/css/tailwind.output.css') }}">

    {# Store theme colors via CSS variables #}
    <style>
        :root {
            --color-primary: {{ theme.colors.primary if theme and theme.colors else '#6366f1' }};
            --color-secondary: {{ theme.colors.secondary if theme and theme.colors else '#8b5cf6' }};
            --color-accent: {{ theme.colors.accent if theme and theme.colors else '#ec4899' }};
        }

        .bg-gradient-theme {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        }

        .text-theme-primary {
            color: var(--color-primary);
        }

        .bg-theme-primary {
            background-color: var(--color-primary);
        }

        .border-theme-primary {
            border-color: var(--color-primary);
        }

        .hover\:bg-theme-primary:hover {
            background-color: var(--color-primary);
        }

        {% block extra_styles %}{% endblock %}
    </style>

    {% if theme and theme.custom_css %}
    <style>{{ theme.custom_css | safe }}{# sanitized: admin-controlled #}</style>
    {% endif %}
</head>
<body class="h-full bg-gradient-theme flex items-center justify-center p-8">
    <div class="bg-white rounded-3xl shadow-2xl max-w-xl w-full p-12 text-center">
        {# Store Logo #}
        {% if store and theme and theme.branding and theme.branding.logo %}
        <img src="{{ theme.branding.logo }}"
             alt="{{ store.name }}"
             class="max-w-[150px] max-h-[60px] mx-auto mb-8 object-contain">
        {% endif %}

        {% block content %}
        {# Error Icon #}
        <div class="text-7xl mb-4">{% block icon %}⚠️{% endblock %}</div>

        {# Status Code #}
        <div class="text-8xl font-bold text-theme-primary leading-none mb-2">
            {{ status_code }}
        </div>

        {# Status Name #}
        <h1 class="text-3xl font-semibold text-gray-900 mb-4">
            {{ status_name }}
        </h1>

        {# Error Message #}
        <p class="text-lg text-gray-500 mb-10 leading-relaxed">
            {{ message }}
        </p>

        {# Action Buttons #}
        <div class="flex gap-4 justify-center flex-wrap mt-8">
            {% block action_buttons %}
            <a href="{{ base_url }}"
               class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
                Continue Shopping
            </a>
            <a href="{{ base_url }}contact"
               class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
                Contact Us
            </a>
            {% endblock %}
        </div>

        {% block extra_content %}{% endblock %}

        {# Support Link #}
        <div class="mt-10 pt-8 border-t border-gray-200 text-sm text-gray-500">
            {% block support_link %}
            Need help? <a href="{{ base_url }}contact" class="text-theme-primary font-semibold hover:underline">Contact our support team</a>
            {% endblock %}
        </div>

        {# Store Info #}
        {% if store %}
        <div class="mt-8 text-sm text-gray-400">
            {{ store.name }}
        </div>
        {% endif %}
        {% endblock %}
    </div>
</body>
</html>
