{# app/templates/storefront/unavailable.html — standalone, no base.html extends #}
{# Rendered by StorefrontAccessMiddleware when store has no active subscription #}
<!DOCTYPE html>
<html lang="{{ language }}" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}{% if store %} | {{ store.name }}{% endif %}</title>

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

    {# Theme colors (use store theme if available, fallback to purple gradient) #}
    <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);
        }
    </style>
</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 available #}
        {% 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 %}

        {# Icon #}
        <div class="text-7xl mb-6">
            {% if reason == 'not_found' %}
                <svg class="w-20 h-20 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            {% else %}
                <svg class="w-20 h-20 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                </svg>
            {% endif %}
        </div>

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

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

        {# Action button #}
        <div class="flex gap-4 justify-center flex-wrap">
            <a href="javascript:history.back()"
               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">
                {% if language == 'fr' %}Retour
                {% elif language == 'de' %}Zur&uuml;ck
                {% elif language == 'lb' %}Zr&eacute;ck
                {% else %}Go Back
                {% endif %}
            </a>
        </div>

        {# Store name footer #}
        {% if store %}
        <div class="mt-10 pt-8 border-t border-gray-200 text-sm text-gray-400">
            {{ store.name }}
        </div>
        {% endif %}
    </div>
</body>
</html>
