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

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

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

  <section class="min-w-full py-8 bg-white md:py-16 dark:bg-gray-900 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">

          <sl-carousel pagination navigation mouse-dragging style="--aspect-ratio: 1/1;">
            {% for image in product.images.all %}
              <sl-carousel-item>
                <img
                  alt="{{ product.name }}"
                  src="{{ image.xl.url }}"
                />
              </sl-carousel-item>
            {% endfor %}
          </sl-carousel>
        </div>

        <div class="my-4 sm:m-8 lg:m-0">
          <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">
            {{ product.name }}
          </h1>
          <div class="my-4 sm:items-center sm:gap-4 sm:flex">
            <p
              class="text-2xl font-extrabold text-gray-900 sm:text-3xl dark:text-white"
            >
              {{ product.price.price_with_tax }} €
            </p>

            <sl-rating label="Rating" readonly value="3"></sl-rating>

            <!--
            <div class="flex items-center gap-2 mt-2 sm:mt-0">
              <div class="flex items-center gap-1">
                {% include 'components/icons/star.svg' %}
                {% include 'components/icons/star.svg' %}
                {% include 'components/icons/star.svg' %}
                {% include 'components/icons/star.svg' %}
                {% include 'components/icons/star.svg' %}

              </div>
              <p
                class="text-sm font-medium leading-none text-gray-500 dark:text-gray-400"
              >
                (5.0)
              </p>
              <a
                href="#"
                class="text-sm font-medium leading-none text-gray-900 underline hover:no-underline dark:text-white"
              >
                345 Reviews
              </a>
            </div>
            -->
          </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 border-gray-200 dark:border-gray-800"/>

          </div>
          <p class="mb-6 text-gray-500 dark:text-gray-400">
            {{ product.description }}
          </p>
        </div>
      </div>
  </section>
{% endblock %}