{% sw_extends '@Storefront/storefront/element/cms-element-image-gallery.html.twig' %}

{#
  XPS PDP gallery — single-image framed panel (no Shopware slider).

  Mobile (Figma node #775:11679): The image card (342×262) has the product title
  and availability badge overlaid INSIDE the frame at the top, with the product
  image filling the card background.

  Priority order for the image source:
    1. element.data.sliderItems (CMS-managed media — most reliable in element context)
    2. page.product.cover  (available in product-detail page context)
    3. Fallback asset PNG
#}
{% block element_image_gallery_inner %}
    {% set fallbackUrl = asset('bundles/ddmsxaverbertschtheme/assets/parker_45_fitting.png', 'asset') %}
    {% set coverUrl = '' %}
    {% set coverAlt = '' %}

    {# --- Priority 1: CMS slider items (always available in element context) --- #}
    {% if element.data.sliderItems is defined and element.data.sliderItems|length > 0 %}
        {% set imageItems = element.data.sliderItems|filter(item =>
            item.media is defined
            and item.media is not null
            and item.media.url is defined
            and item.media.url
            and 'pdf' not in item.media.url|lower
            and 'dwg' not in (item.media.url|lower)
            and 'stp' not in (item.media.url|lower)
            and '.sldprt' not in (item.media.url|lower)
        ) %}
        {% if imageItems|length > 0 %}
            {% set firstImage = imageItems|first %}
            {% set coverUrl = firstImage.media.url %}
            {% set coverAlt = firstImage.media.translated.alt|default(firstImage.media.translated.title|default('')) %}
        {% endif %}
    {% endif %}

    {# --- Priority 2: product cover from page context --- #}
    {% if not coverUrl %}
        {% if page is defined and page.product is defined %}
            {% if page.product.cover is defined
                and page.product.cover is not null
                and page.product.cover.media is defined
                and page.product.cover.media is not null
                and page.product.cover.media.url %}
                {% set coverUrl = page.product.cover.media.url %}
                {% set coverAlt = page.product.cover.media.translated.alt|default(page.product.translated.name|default('')) %}
            {% endif %}
        {% endif %}
    {% endif %}

    {# --- Priority 3: fallback asset --- #}
    {% if not coverUrl %}
        {% set coverUrl = fallbackUrl %}
    {% endif %}

    {% if not coverAlt %}
        {% set coverAlt = page is defined and page.product is defined ? page.product.translated.name|default('Produktbild') : 'Produktbild' %}
    {% endif %}

    {% if coverUrl %}
        {% if "local.xps.de" in coverUrl %}
            {% set coverUrl = coverUrl|replace({"local.xps.de": "www.xps-store.de"}) %}
        {% elseif "http" not in coverUrl %}
            {% set coverUrl = "https://www.xps-store.de" ~ coverUrl %}
        {% endif %}
    {% endif %}

    {# Resolve product data for mobile title overlay #}
    {% set galleryProduct = page is defined and page.product is defined ? page.product : null %}
    {% set galleryStockAvail = galleryProduct and (not galleryProduct.isCloseout or galleryProduct.availableStock >= galleryProduct.minPurchase) and galleryProduct.available %}

    <div class="xps-pdp__gallery">
        <div class="xps-pdp__gallery-frame">

            {# ── Mobile-only title overlay (Figma node #775:11679) ──
               Shows product title + availability badge at top of image card.
               Hidden on desktop via CSS (display:none at min-width:992px).
               Image is positioned absolutely to fill the card below the overlay. #}
            {% if galleryProduct %}
                <div class="xps-pdp__gallery-mobile-overlay">
                    <h1 class="xps-pdp__gallery-product-title">{{ galleryProduct.translated.name }}</h1>
                    <div class="xps-pdp__gallery-title-line" aria-hidden="true"></div>
                    <div class="xps-pdp__gallery-avail-badge{% if not galleryStockAvail %} xps-pdp__gallery-avail-badge--out{% endif %}">
                        <span class="xps-pdp__gallery-avail-dot" aria-hidden="true"></span>
                        <span>
                            {% if galleryStockAvail %}
                                {{ "detail.deliveryTimeAvailable"|trans|default("Sofort verfügbar") }}
                            {% else %}
                                {{ "detail.themeDeliveryNotAvailableTitle"|trans|default("Lieferzeit auf Anfrage") }}
                            {% endif %}
                        </span>
                    </div>
                </div>
            {% endif %}

            <img src="{{ coverUrl }}"
                 alt="{{ coverAlt }}"
                 class="xps-pdp__gallery-image"
                 loading="eager"
                 itemprop="image"
                 onerror="this.onerror=null;this.src='{{ fallbackUrl }}';" />
        </div>
    </div>
{% endblock %}