{% extends "base.html" %}
{% import "macros/ui.html" as ui %}

{% block title %}{{ product.name }}{% endblock title %}

{% block content %}
<div class="grid gap-10 lg:grid-cols-2">
  <!-- gallery -->
  <div x-data="{ active: 0 }" class="space-y-4">
    <div class="aspect-square overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt">
      {% if images | length > 0 %}
      {% for image in images %}
      <img x-show="active === {{ loop.index0 }}" src="/images/{{ image }}" alt="{{ product.name }}" class="size-full object-cover">
      {% endfor %}
      {% endif %}
    </div>
    {% if images | length > 1 %}
    <div class="flex flex-wrap gap-2">
      {% for image in images %}
      <button type="button" @click="active = {{ loop.index0 }}"
        :class="active === {{ loop.index0 }} ? 'border-primary dark:border-primary-dark' : 'border-outline dark:border-outline-dark'"
        class="size-16 overflow-hidden rounded-radius border">
        <img src="/images/{{ image }}" alt="" class="size-full object-cover">
      </button>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <!-- details -->
  <div class="space-y-6">
    {% if category %}
    <a href="/category/{{ category.slug }}" class="text-sm font-medium text-primary dark:text-primary-dark">{{ category.name }}</a>
    {% endif %}
    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h1>
    <p class="text-2xl font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>

    {% if product.description %}
    <div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>
    {% endif %}

    {% if product.stock > 0 %}
    <form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none" class="flex flex-wrap items-end gap-3"
      hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
      <input type="hidden" name="product_id" value="{{ product.id }}">
      <div class="space-y-1.5">
        <label for="quantity" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="quantity", lang=lang | default(value='sk')) }}</label>
        <input id="quantity" name="quantity" type="number" min="1" max="{{ product.stock }}" value="1"
          class="w-24 rounded-radius border border-outline bg-surface px-3 py-2 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
      </div>
      {{ ui::button_primary(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit") }}
    </form>
    <p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
    {% else %}
    <p class="inline-flex rounded-radius bg-danger/10 px-3 py-2 text-sm font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
    {% endif %}
  </div>
</div>
{% endblock content %}