<!doctype html>
<html lang="{{ app.request.locale }}">
<head>
    {% set head_title %}
        {% block title %}
            Welcome!
        {% endblock %}
    {% endset %}
    {% set head_meta %}
        {% block meta %}
        {% endblock %}
    {% endset %}
    {% set head_stylesheets %}
        {% block stylesheets %}
        {% endblock %}
    {% endset %}
    {% set head_javascripts %}
        {% block javascripts %}
        {% endblock %}
    {% endset %}
    {{
    include('partials/head.html.twig', {
        head_title: head_title,
        head_meta: head_meta,
        head_stylesheets: head_stylesheets,
        head_javascripts: head_javascripts
    })
    }}
</head>
<body class="bg-light text-dark block antialiased">
{{ component('tracking:Scripts', { position: 'body' }) }}
<div class="min-h-screen">
    {% block checkout_header %}
        {% set checkout_brand_label = checkout_brand_name|default('checkout.title'|trans) %}
        <header class="border-gold/20 border-b bg-white/90 backdrop-blur">
            <div class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-y-4 px-4 py-4 sm:px-6 lg:px-8">
                <a href="{{ path('homepage') }}" class="inline-flex items-center">
                    {% if checkout_brand_image_path|default(null) %}
                        <img
                            src="{{ asset(checkout_brand_image_path) }}"
                            alt="{{ checkout_brand_label }}"
                            class="max-h-12 w-auto max-w-[180px] object-contain sm:max-h-14 sm:max-w-[220px]">
                    {% else %}
                        <span class="font-serif text-lg tracking-[0.08em] uppercase sm:text-lg">
                {{ checkout_brand_label }}
              </span>
                    {% endif %}
                </a>

                <a
                    href="{{ path('shop') }}"
                    class="text-dark/75 hover:text-gold tracking-[0.10em] uppercase transition sm:text-sm">
                    {{ 'shop.back'|trans }}
                </a>
            </div>
        </header>
    {% endblock %}
    <main>
        {% block main -%}
        {%- endblock %}
    </main>
    {% block checkout_footer -%}
    {%- endblock %}
</div>
{{ include('partials/notifier.html.twig') }}
</body>
</html>
