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

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

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

{% block page_hero %}
    {% set hero_image_path %}{% block hero_image %}{{ viti_theme_asset('images/headers/header-cuvees.jpg') }}{% endblock %}{% endset %}
    {% include 'partials/_hero.html.twig' with {
        page_key: 'cuvee',
        target_id: 'cuvees',
        image: 'images/headers/header-cuvees.jpg',
        image_path: hero_image_path|trim,
        image_alt: 'background-header.cuvee'
    } %}
{% endblock %}

{% block main %}
    <section id="cuvees" class="theme-page theme-cuvees-page">
        <div class="theme-container">
            <turbo-frame id="cuvees-content" data-turbo-action="advance">
                {% if selectedProduct is defined and selectedProduct %}
                    {% include 'cuvees/_detail.html.twig' with { product: selectedProduct } only %}
                {% else %}
                    <div class="theme-cuvees-intro">
                        <p class="theme-intro">{{ 'cuvee.intro'|trans }}</p>
                    </div>

                    <twig:collection:ProductCollection collection="cuvees" title="{{ 'cuvee.title'|trans }}" />

                    <div class="theme-cuvees-order">
                        <a class="theme-button-fill theme-hover-link-effect" href="{{ path('shop') }}" title="{{ 'shop.balise'|trans({}, 'meta') }}">
                            {{ 'cuvee.button_order'|trans }}
                        </a>
                    </div>
                {% endif %}
            </turbo-frame>
        </div>
    </section>

    <section id="custom-stickers" class="theme-page theme-custom-stickers-page">
        <div class="theme-container">
            <div class="theme-stickers-title">{{ 'cuvee.stickers.title'|trans|raw }}</div>
            <p>{{ 'cuvee.stickers.text'|trans|raw }}</p>
            <div class="theme-stickers">
                <twig:Image mapping="public" alt="{{ 'cuvee.stickers.sticker_1'|trans }}" fit="contain" lazy="{{ false }}" responsive="{{ false }}" path="{{ viti_theme_asset('images/etiquette-1.webp') }}" imageWidth="220" imageHeight="154" />
                <twig:Image mapping="public" alt="{{ 'cuvee.stickers.sticker_2'|trans }}" fit="contain" lazy="{{ false }}" responsive="{{ false }}" path="{{ viti_theme_asset('images/etiquette-2.webp') }}" imageWidth="220" imageHeight="146" />
                <twig:Image mapping="public" alt="{{ 'cuvee.stickers.sticker_3'|trans }}" fit="contain" lazy="{{ false }}" responsive="{{ false }}" path="{{ viti_theme_asset('images/etiquette-3.webp') }}" imageWidth="220" imageHeight="146" />
            </div>
        </div>
    </section>
{% endblock %}
