<!doctype html>
<html lang="{{ app.request.locale }}">
<head>
    {% set head_title %}
        {% block title %}
            {{ 'checkout.title'|trans({}, 'meta') }}
        {% 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-page text-foreground block antialiased">
{{ component('tracking:Scripts', { position: 'body' }) }}
<div class="min-h-screen">
    {% block checkout_header %}
        {% set checkout_brand_label = contact_business_name()|default('checkout.title'|trans) %}
        {% set checkout_brand_path = checkout_brand_image_path() %}
        <header class="border-b border-primary/10 bg-white">
            <div class="mx-auto flex max-w-[1440px] items-center justify-center px-4 py-5 md:px-16">
                <a href="{{ path('homepage') }}" class="inline-flex w-64 items-center justify-center">
                    {% if checkout_brand_path %}
                        <img
                            src="{{ asset(checkout_brand_path|image_path) }}"
                            alt="{{ checkout_brand_label }}"
                            data-checkout-brand-logo
                            class="h-auto max-h-20 w-auto max-w-none object-contain md:max-h-24"
                        >
                    {% else %}
                        <twig:theme:BrandLogo
                            alt="{{ checkout_brand_label }}"
                            class="h-20 w-64 md:h-24"
                            imageClass="h-full w-auto object-contain"
                        />
                    {% endif %}
                </a>
            </div>
        </header>
    {% endblock %}
    <main>
        {% block main -%}
        {%- endblock %}
    </main>
    {% block checkout_footer -%}
    {%- endblock %}
</div>
{{ include('partials/notifier.html.twig') }}
</body>
</html>
