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

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

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

  <section class="min-w-full py-8  md:py-16  antialiased">
    <div class="max-w-screen-xl px-4 mx-auto 2xl:px-0">
      <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">

          <div class="carousel w-full">
            {% for image in product.images.all %}

              <div id="product-image-{{ forloop.counter }}" class="carousel-item w-full">
                <img class="carousel-item w-full " src="{{ image.xl.url }}"
                     alt="{{ product.name }}"/>
              </div>
            {% endfor %}

          </div>
          <div class="flex w-full justify-center gap-2 py-2">
            {% for image in product.images.all %}
              <a href="#product-image-{{ forloop.counter }}" class="btn btn-xs">{{ forloop.counter }}</a>
            {% endfor %}
          </div>

        </div>

        <div class="my-4 sm:m-8 lg:m-0">

          <h1 class="text-xl font-semibold  sm:text-2xl ">
            {{ product.name }}
          </h1>

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

          <div class="my-4 sm:gap-4 items-center flex sm:m-8">

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

            {% include 'components/cart/add_to_cart.html' %}

            <hr class="my-6 md:my-8  "/>

          </div>
          <p class="mb-6  ">
            {{ product.description }}
          </p>
        </div>
      </div>
  </section>
{% endblock %}