{# Main panel fragment for HTMX navigation - product detail content #}
{% import 'macros/stickers.html' as stick %}
{% import '_types/product/prices.html' as prices %}
{% set prices_ns = namespace() %}
{{ prices.set_prices(d, prices_ns)}}

  {# Product detail grid from content block #}
  <div class="mt-3 grid grid-cols-1 md:grid-cols-5 gap-6" data-gallery-root>
    <div class="md:col-span-2">
  {% if d.images and d.images|length > 0 %}
    <div class="relative rounded-xl overflow-hidden bg-stone-100">
      {# --- like button overlay in top-right --- #}
      {% if g.user %}
      <div class="absolute top-3 right-5 z-10 text-6xl md:text-xl">
        {% set slug = d.slug %}
        {% set liked = liked_by_current_user %}
        {% include "_types/browse/like/button.html" %}
      </div>
      {% endif %}

      <figure class="inline-block">
        <div class="relative w-full aspect-square">
          <img
            data-main-img
            src="{{ d.images[0] }}"
            alt="{{ d.title }}"
            class="w-full h-full object-contain object-top"
            loading="eager" decoding="async"
          />

          {% for l in d.labels %}
            <img
              src="{{ asset_url('labels/' + l + '.svg') }}"
              alt=""
              class="pointer-events-none absolute inset-0 w-full h-full object-contain object-top"
            />
          {% endfor %}
        </div>
        <figcaption class="mt-2 text-sm text-stone-600 text-center">
          {{ d.brand }}
        </figcaption>
      </figure>

      {% if d.images|length > 1 %}
        <button type="button" data-prev
                class="absolute left-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg focus:outline-none focus:ring-2 focus:ring-stone-300 text-3xl md:text-4xl"
                title="Previous">‹</button>
        <button type="button" data-next
                class="absolute right-2 top-1/2 -translate-y-1/2 z-10 grid place-items-center w-12 h-12 md:w-14 md:h-14 rounded-full bg-white/90 hover:bg-white shadow-lg focus:outline-none focus:ring-2 focus:ring-stone-300 text-3xl md:text-4xl"
                title="Next">›</button>
      {% endif %}
    </div>

    <div class="flex flex-row justify-center">
      <div class="mt-3 flex gap-2 overflow-x-auto no-scrollbar">
        {% for u in d.images %}
          <button type="button" data-thumb
                  class="shrink-0 rounded-lg overflow-hidden bg-stone-100 hover:opacity-90 ring-offset-2"
                  title="Image {{ loop.index }}">
            <img src="{{ u }}" class="h-16 w-16 object-contain" alt="thumb {{ loop.index }}" loading="lazy" decoding="async">
          </button>
          <span data-image-src="{{ u }}" class="hidden"></span>
        {% endfor %}
      </div>
    </div>
  {% else %}
    <div class="relative aspect-square bg-stone-100 rounded-xl flex items-center justify-center text-stone-400">
      {# Even if no image, still render the like button in the corner for consistency #}
      {% if g.user %}
      <div class="absolute top-2 right-2 z-10">
        {% set slug = d.slug %}
        {% set liked = liked_by_current_user %}
        {% include "_types/browse/like/button.html" %}
      </div>
      {% endif %}

      No image
    </div>
  {% endif %}

  <div class="p-2 flex flex-row justify-center gap-2">
    {% for s in d.stickers %}
      {{ stick.sticker(asset_url('stickers/' + s + '.svg'), s, True, size=40) }}
    {% endfor %}
  </div>
</div>

    <div class="md:col-span-3">
      {# Optional extras shown quietly #}
      <div class="mt-2 space-y-1 text-sm text-stone-600">
        {% if d.price_per_unit or d.price_per_unit_raw %}
          <div>Unit price: {{ prices.price_str(d.price_per_unit, d.price_per_unit_raw, d.price_per_unit_currency) }}</div>
        {% endif %}
        {% if d.case_size_raw %}
          <div>Case size: {{ d.case_size_raw }}</div>
        {% endif %}

      </div>

      {% if d.description_short or d.description_html %}
        <div class="mt-4 text-stone-800 space-y-3">
          {% if d.description_short %}
            <p class="leading-relaxed text-lg">{{ d.description_short }}</p>
          {% endif %}
          {% if d.description_html %}
            <div class="max-w-none text-sm leading-relaxed">
              {{ d.description_html | safe }}
            </div>
          {% endif %}
        </div>
      {% endif %}

      {% if d.sections and d.sections|length %}
        <div class="mt-8 space-y-3">
          {% for sec in d.sections %}
            <details class="group rounded-xl border bg-white shadow-sm open:shadow p-0">
              <summary class="cursor-pointer select-none px-4 py-3 flex items-center justify-between">
                <span class="font-medium">{{ sec.title }}</span>
                <span class="ml-2 text-xl transition-transform group-open:rotate-180">⌄</span>
              </summary>
              <div class="px-4 pb-4 max-w-none text-sm leading-relaxed">
                {{ sec.html | safe }}
              </div>
            </details>
          {% endfor %}
        </div>
      {% endif %}
    </div>

  </div>
  <div class="pb-8"></div>