{% extends 'base.html.twig' %}

{% block title -%}
    {{- 'shop.title'|trans({}, 'meta') -}}
{%- endblock %}

{% block meta %}
    {{
    include('partials/seo.html.twig', {
        title_key: 'shop.title',
        description_key: 'shop.description',
        robots: 'index,follow'
    })
    }}
    <twig:shop:CatalogSeo />
{% endblock meta %}

{% block header_top %}
    <twig:Image
        mapping="public"
        class="peer dark fixed -z-20 h-screen max-h-svh w-full overflow-hidden bg-transparent"
        picture:class="h-full w-full"
        img:class="min-safe-h-screen min-h-screen h-screen w-full object-cover"
        lazy="{{ false }}"
        quality="{{ 50 }}"
        responsive="{{ true }}"
        path="images/header/shop.jpg"
        imageWidth="1800"
        imageHeight="1177" />
{% endblock %}

{% block main %}
    <div
        class="relative -z-10 -mt-15 flex h-screen min-h-shop-hero flex-col items-center justify-center p-6 sm:p-10 xl:p-0">
        <div class="mx-auto max-w-xl">
            <h1 class="flex flex-col items-center text-center font-serif text-3xl tracking-widest text-on-foreground after:mt-6 after:mb-3 after:h-0.5 after:w-12 after:bg-surface md:text-4xl lg:text-6xl lg:after:mt-10 lg:after:mb-6">
                {{ 'shop.title'|trans()|raw }}
            </h1>
            <div
                class="text-center font-medium text-on-foreground text-shadow-md lg:text-lg">
                {{ 'shop.baseline'|trans()|raw }}
            </div>
        </div>
    </div>

    <twig:shop:Catalog />
{% endblock %}

{% block mobile_bottom_bar %}
    <twig:shop:CatalogMobileBar />
{% endblock %}
