{% sw_extends '@Storefront/storefront/element/cms-element-buy-box.html.twig' %}

{# ============================================================
   GoFlare Buy-Box Override
   - Produktname (h1) VOR dem Buy-Widget
   - "Product Details" (Custom-Field) UNTER dem Buy-Widget
     (linke Spalte, unter Menge + Warenkorb-Button)
   ============================================================ #}

{% block element_buy_box_inner %}
    {% if element.data.product %}
        <h1 class="product-detail-name goflare-pdp-title">
            {{ element.data.product.translated.name }}
        </h1>
    {% endif %}

    {{ parent() }}

    {# Product Details aus Custom-Field custom_produkte_zusatztext2 #}
    {% set gfDetailText = element.data.product
        ? (element.data.product.translated.customFields['custom_produkte_zusatztext2']
            ?? element.data.product.customFields['custom_produkte_zusatztext2']
            ?? null)
        : null %}

    {% if gfDetailText is not empty %}
        <div class="goflare-pdp-details">
            <details class="goflare-description-toggle">
                <summary class="goflare-description-toggle-title">
                    <span class="goflare-description-toggle-label">Product Details</span>
                    <span class="goflare-description-toggle-icon" aria-hidden="true"></span>
                </summary>
                <div class="goflare-description-toggle-content">
                    <div class="product-detail-description-text">
                        {{ gfDetailText|raw }}
                    </div>
                </div>
            </details>
        </div>
    {% endif %}
{% endblock %}