{% extends 'theme/base.html' %}

{% load static %}
{% load i18n %}

{% block main %}
  {% include 'components/generic/navbar.html' %}

  <section class="py-6 md:py-12 antialiased">
    <div class="max-w-screen-xl px-4 sm:px-6 lg:px-8 mx-auto">
      <div class="lg:grid lg:grid-cols-2 lg:gap-8 xl:gap-16">
        <div class="shrink-0 max-w-md lg:max-w-lg mx-auto w-full">

          <div class="carousel w-full rounded-2xl bg-base-200/50 aspect-square">
            {% for image in product.images.all %}
              <div id="product-image-{{ forloop.counter }}" class="carousel-item w-full items-center justify-center">
                <img class="w-full h-full object-contain p-6" src="{{ image.xl.url }}" alt="{{ product.name }}"/>
              </div>
            {% endfor %}
          </div>

          {% if product.images.all|length > 1 %}
            <div class="flex w-full justify-center gap-2 py-3 flex-wrap">
              {% for image in product.images.all %}
                <a href="#product-image-{{ forloop.counter }}" class="w-14 h-14 rounded-lg border-2 border-base-300 hover:border-primary overflow-hidden shrink-0">
                  <img class="w-full h-full object-contain bg-base-200/50 p-1" src="{{ image.s.url }}" alt="{{ product.name }} {{ forloop.counter }}">
                </a>
              {% endfor %}
            </div>
          {% endif %}
        </div>

        <div class="mt-6 lg:mt-0">
          <h1 class="font-display text-2xl sm:text-3xl font-bold text-base-content">
            {{ product.name }}
          </h1>

          <div class="my-4 flex items-center gap-3 flex-wrap">
            <p class="font-display text-3xl sm:text-4xl font-extrabold">
              {% if product.price %}
                {{ product.price.price_with_tax }} €
              {% elif product.min_variant_price %}
                {% translate 'Desde' %} {{ product.min_variant_price.price_with_tax }} €
              {% endif %}
            </p>

            {% if not product.has_variants %}
              {% if product.stock > 0 %}
                <span class="badge badge-success badge-outline">{% translate 'En stock' %}</span>
              {% else %}
                <span class="badge badge-error badge-outline">{% translate 'Agotado' %}</span>
              {% endif %}
            {% endif %}
          </div>

          <hr class="my-6 border-base-300"/>

          <div class="flex items-center gap-3">
            {% if user.is_authenticated %}
              <div hx-get="{% url 'web:wishlist_button' pk=product.pk %}" hx-trigger="load, updated-wishlist">
              </div>
            {% endif %}

            <div class="flex-1 max-w-xs">
              {% include 'components/cart/add_to_cart.html' %}
            </div>
          </div>

          <hr class="my-6 border-base-300"/>

          <p class="text-base-content/80 leading-relaxed whitespace-pre-line">
            {{ product.description }}
          </p>
        </div>
      </div>
    </div>
  </section>
{% endblock %}