{% sw_extends '@Storefront/storefront/block/cms-block-gallery-buybox.html.twig' %}
{% import '@RiccardoTheme/storefront/rz/flavor.html.twig' as rz %}

{#
 # Riccardo Produktbühne: Galerie auf farbiger Bühne + Kaufbereich + mitlaufende Kaufleiste
 #}
{% block block_gallery_buybox %}
    {% set product = page.product %}
    {% set cf = product.translated.customFields %}
    {% set tint = cf.rz_tint|default('neutral') %}
    {% set rzColor = rz.color(product)|trim %}
    {% set rzName = rz.nameParts(product, rzColor is not empty or product.translated.name matches '/Nikotinsalz Liquid|Longfill|E-Liquid/i')|trim|split('|') %}
    {% set bgNoten = rz_noten(product) %}
    {% set bgWord = bgNoten ? bgNoten|first : product.translated.name|split(' - ')|first %}
    {% set leftElement = block.slots.getSlot('left') %}
    {% set rightElement = block.slots.getSlot('right') %}
    {% set totalReviews = rightElement.data.totalReviews|default(0) %}
    {% set price = product.calculatedPrices.count > 0 ? product.calculatedPrices.last : product.calculatedPrice %}

    {# Merkmale für die Kurzinfo #}
    {% set facts = [] %}
    {% for group in product.sortedProperties %}
        {% if group.translated.name in ['Liquid-Typ'] %}
            {% set facts = facts|merge([{ label: group.translated.name, value: group.options|map(o => o.translated.name)|join(', ') }]) %}
        {% endif %}
    {% endfor %}
    {% if product.purchaseUnit and product.unit %}
        {% set facts = facts|merge([{ label: 'Inhalt', value: product.purchaseUnit|round ~ ' ' ~ product.unit.translated.shortCode }]) %}
    {% endif %}
    {% for spec in cf.rz_specs|default([])|slice(0, 3) %}
        {% set facts = facts|merge([{ label: spec.label, value: spec.value }]) %}
    {% endfor %}

    {% set isNicotine = product.translated.name matches '/Nikotin/i' %}

    <div class="col-12">
        <div class="rz-pdp-stage">
            {# ---------------------------------------------------------- Galerie #}
            <div class="rz-pdp-gallery rz-tint--{{ tint }}{% if rzColor %} has-flavor{% endif %}"{% if rzColor %} style="--flavor: {{ rzColor }}"{% endif %} data-cms-element-id="{{ leftElement.id }}">
                <span class="rz-pdp-bgword" aria-hidden="true">{{ bgWord }}</span>
                {% if price.listPrice.percentage > 0 %}
                    <span class="rz-sticker" aria-hidden="true"><small>statt {{ price.listPrice.price|currency }}</small><strong>{{ price.unitPrice|number_format(2, ',', '.') }}</strong><small>Euro</small></span>
                {% endif %}
                {% sw_include '@Storefront/storefront/element/cms-element-' ~ leftElement.type ~ '.html.twig' ignore missing with {
                    element: leftElement,
                    startIndexThumbnails: 1,
                    startIndexSlider: 1
                } %}

                {% sw_include '@RiccardoTheme/storefront/component/rz-stamp.html.twig' with { product: product } %}
            </div>

            {# ---------------------------------------------------------- Kaufbereich #}
            <div class="rz-pdp-panel{% if rzColor %} has-flavor{% endif %}"{% if rzColor %} style="--flavor: {{ rzColor }}"{% endif %} data-cms-element-id="{{ rightElement.id }}">
                <div class="rz-pdp-meta">
                    <span class="rz-pdp-brand">{{ rzName[0]|raw }}{% if rzName[2] %} · {{ rzName[2]|raw }}{% endif %}</span>
                    {% if product.ratingAverage > 0 and totalReviews > 0 %}
                        <a class="rz-pdp-rating" href="#rz-pdp-reviews">
                            {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with { points: product.ratingAverage, style: 'text-primary' } %}
                            <span>{{ product.ratingAverage|number_format(1, ',') }} · {{ totalReviews }} {{ totalReviews == 1 ? 'Bewertung' : 'Bewertungen' }}</span>
                        </a>
                    {% endif %}
                </div>

                <h1 class="rz-pdp-title">
                    <span class="visually-hidden">{{ rzName[0]|raw }} – </span>{{ rzName[1]|raw }}{% if rzName[2] %}<span class="visually-hidden"> – {{ rzName[2]|raw }}</span>{% endif %}
                </h1>

                {% if bgNoten %}
                    <div class="rz-pdp-notes" aria-label="Geschmacksnoten">
                        {% for note in bgNoten %}<span class="rz-note rz-note--{{ loop.index <= 3 ? loop.index : 3 }}">{{ note }}</span>{% endfor %}
                    </div>
                {% endif %}

                {% if facts|length %}
                    <dl class="rz-pdp-facts">
                        {% for fact in facts %}
                            <div><dt>{{ fact.label }}</dt><dd>{{ fact.value }}</dd></div>
                        {% endfor %}
                    </dl>
                {% endif %}

                <div class="rz-pdp-buy" id="rz-pdp-buy">
                    {% sw_include '@Storefront/storefront/element/cms-element-' ~ rightElement.type ~ '.html.twig' ignore missing with { element: rightElement } %}
                </div>

                <ul class="rz-pdp-service">
                    <li>{% sw_icon 'truck' style { size: 'sm' } %}<span><strong>Versandkostenfrei</strong> ab 39,95&nbsp;€ Bestellwert</span></li>
                    <li>{% sw_icon 'marker' style { size: 'sm' } %}<span><a href="/filialen">Beratung &amp; Probieren in deiner Filiale</a></span></li>
                    <li>{% sw_icon 'package-open' style { size: 'sm' } %}<span><strong>30 Tage</strong> Rückgabe &amp; kostenlose Retoure</span></li>
                </ul>

                {% if isNicotine %}
                    <p class="rz-pdp-warning">{% sw_icon 'alert' style { size: 'xs' } %} Dieses Produkt enthält Nikotin: einen Stoff, der sehr stark abhängig macht. Abgabe nur ab 18 Jahren.</p>
                {% endif %}
            </div>
        </div>

        {# ---------------------------------------------------------- Mitlaufende Kaufleiste
         #
         # Nur für Artikel, die man auch kaufen kann. Sonst stand hier "In den
         # Warenkorb", während zwei Zeilen höher "Nicht mehr verfügbar" zu
         # lesen war und der eigentliche Kaufen-Knopf gar nicht mehr da war -
         # aufgefallen am 25.09.2026, als ausverkaufte Artikel gesperrt wurden.
         #
         # Dieselbe Bedingung wie in Shopwares Kauf-Vorlage, damit beide
         # Knöpfe nicht auseinanderlaufen.
         #}
        {% set rzKaufbar = product.available and product.childCount <= 0 and product.calculatedMaxPurchase > 0 %}
        <div class="rz-sticky-buy{% if not rzKaufbar %} rz-sticky-buy--gesperrt{% endif %}"
             data-rz-sticky-buy="true" aria-hidden="true">
            <div class="container">
                <div class="rz-sticky-buy-inner">
                    <img class="rz-sticky-buy-flame" src="{{ asset('assets/img/riccardo-flame.png', 'theme') }}" alt="" width="18" height="36" aria-hidden="true">
                    {% if product.cover.media %}
                        {% sw_thumbnails 'rz-sticky-buy-thumb' with { media: product.cover.media, sizes: { default: '80px' }, attributes: { class: 'rz-sticky-buy-img', alt: product.translated.name, loading: 'lazy' } } %}
                    {% endif %}
                    <div class="rz-sticky-buy-name">
                        <strong>{{ product.translated.name }}</strong>
                        {% if product.variation %}<span>{% for v in product.variation %}{{ v.option }}{% if not loop.last %} · {% endif %}{% endfor %}</span>{% endif %}
                    </div>
                    <div class="rz-sticky-buy-price">
                        {% if price.listPrice.percentage > 0 %}<s>{{ price.listPrice.price|currency }}</s>{% endif %}
                        <strong>{{ price.unitPrice|currency }}</strong>
                    </div>
                    {% if rzKaufbar %}
                        <button type="button" class="btn btn-buy rz-sticky-buy-btn" data-rz-sticky-buy-trigger="true">In den Warenkorb</button>
                    {% else %}
                        <span class="rz-sticky-buy-hinweis">Zurzeit nicht lieferbar</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}