{% load i18n %}
<section class="bg-white py-2 antialiased dark:bg-gray-900 md:py-8">
  <form action="{% url 'web:cart_detail' %}" method="post">
    {% csrf_token %}
    <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
      <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">{% translate 'Carrito' %}</h2>

      <div class="mt-4 sm:mt-6 md:gap-6 lg:flex lg:items-start xl:gap-8">
        <div class="mx-auto w-full flex-none lg:max-w-2xl xl:max-w-4xl">
          <div class="space-y-6">

            {% for item in items %}
              <div
                class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 md:p-6">
                <div class="space-y-4 md:flex md:items-center md:justify-between md:gap-6 md:space-y-0">
                  <a href="#" class="shrink-0 md:order-1">
                    <img class="h-20 w-20 dark:hidden" src="{{ item.product.images.all|first }}"
                         alt="{{ item.product.name }}"/>
                    <img class="hidden h-20 w-20 dark:block" src="{{ item.product.images.all|first }}"
                         alt="{{ item.product.name }}"/>
                  </a>

                  <label for="counter-input" class="sr-only">{% translate 'Cantidad' %}</label>
                  <div class="flex items-center justify-between md:order-3 md:justify-end">
                    <div class="flex items-center">
                  <span
                    class="w-10 shrink-0 border-0 bg-transparent text-center text-sm font-medium text-gray-900 focus:outline-none focus:ring-0 dark:text-white">
                    {{ item.quantity }}x
                  </span>
                    </div>
                    <div class="text-end md:order-4 md:w-32">
                      <p
                        class="text-base font-bold text-gray-900 dark:text-white">{{ item.product.price.price_with_tax }}
                        €</p>
                    </div>
                  </div>

                  <div class="w-full min-w-0 flex-1 space-y-4 md:order-2 md:max-w-md">
                    <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
                       class="text-base font-medium text-gray-900 hover:underline dark:text-white"
                    >
                      {{ item.product.name }}
                    </a>

                    <div class="flex items-center gap-4">
                      <form class="flex" hx-post="{% url 'web:delete_cart_item' pk=item.pk %}"
                            hx-swap="none">
                        {% csrf_token %}
                        <button
                          type="submit"
                          class="inline-flex items-center text-sm font-medium text-red-600 hover:underline dark:text-red-500"
                        >
                          {% include 'components/icons/x.svg' %}
                          {% translate 'Quitar' %}
                        </button>
                      </form>

                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}

            {% if items.count == 0 %}
              <p class="text-base font-normal text-gray-500 dark:text-gray-400">
                {% translate 'No hay nada en el carrito...' %}
              </p>
              <p>
                <a href="{% url 'web:index' %}" title=""
                   class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
                  {% translate 'Volver a inicio' %}
                </a>
              </p>
            {% endif %}

            <section>
              <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                {% translate 'Dirección de envío' %}
              </h2>

              <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
                {% if user.is_anonymous %}
                  <div class="sm:col-span-2">
                    <label for="email"
                           class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'E-Mail' %}</label>
                    <input type="text" name="email" id="email"
                           class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                           placeholder="{% translate 'E-Mail' %}"
                           value=""
                           required=""
                    >
                  </div>
                {% else %}
                  <input type="hidden" name="email" value="{{ user.email }}">
                {% endif %}
                <div class="sm:col-span-2">
                  <label for="shipping_address_full_name"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label>
                  <input type="text" name="shipping_address_full_name" id="shipping_address_full_name"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Nombre completo' %}"
                         value="{% if shipping_address %}{{ shipping_address.full_name }}{% endif %}"
                         required=""
                  >
                  <label for="shipping_address"
                         class="block my-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Dirección' %}</label>
                  <input type="text" name="shipping_address" id="shipping_address"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Dirección' %}"
                         value="{% if shipping_address %}{{ shipping_address.address }}{% endif %}"
                         required=""
                  >
                </div>
                <div class="w-full">
                  <label for="shipping_address_town"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Localidad' %}</label>
                  <input type="text" name="shipping_address_town" id="shipping_address_town"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Localidad' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_town }}{% endif %}"
                         required=""
                  >
                </div>
                <div class="w-full">
                  <label for="shipping_address_zip"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Código postal' %}</label>
                  <input type="text" name="shipping_address_zip" id="shipping_address_zip"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Código postal' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_zip }}{% endif %}"
                         required=""
                  >
                </div>

                <div>
                  <label for="shipping_address_state"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label>
                  <input type="text" name="shipping_address_state" id="shipping_address_state"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Provincia' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_state }}{% endif %}"
                         required=""
                  >

                </div>
                <div>
                  <label for="shipping_address_country"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'País' %}</label>
                  <input type="text" name="shipping_address_country" id="shipping_address_country"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'País' %}"
                         value="{% if shipping_address %}{{ shipping_address.address_country }}{% endif %}"
                         required=""
                  >
                </div>

              </div>
            </section>

            <section>
              <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                {% translate 'Dirección de envío' %}
              </h2>

              <div class="grid gap-4 sm:grid-cols-2 sm:gap-6 my-2">
                <div class="sm:col-span-2">
                  <label for="billing_address_full_name"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Nombre completo' %}</label>
                  <input type="text" name="billing_address_full_name" id="billing_address_full_name"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Nombre completo' %}"
                         value="{% if billing_address %}{{ billing_address.full_name }}{% endif %}"
                         required=""
                  >
                  <label for="billing_address"
                         class="block my-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Dirección' %}</label>
                  <input type="text" name="billing_address" id="billing_address"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Dirección' %}"
                         value="{% if billing_address %}{{ billing_address.address }}{% endif %}"
                         required=""
                  >
                </div>
                <div class="w-full">
                  <label for="billing_address_town"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Localidad' %}</label>
                  <input type="text" name="billing_address_town" id="billing_address_town"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Localidad' %}"
                         value="{% if billing_address %}{{ billing_address.address_town }}{% endif %}"
                         required=""
                  >
                </div>
                <div class="w-full">
                  <label for="billing_address_zip"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Código postal' %}</label>
                  <input type="text" name="billing_address_zip" id="billing_address_zip"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Código postal' %}"
                         value="{% if billing_address %}{{ billing_address.address_zip }}{% endif %}"
                         required=""
                  >
                </div>

                <div>
                  <label for="billing_address_state"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'Provincia' %}</label>
                  <input type="text" name="billing_address_state" id="billing_address_state"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'Provincia' %}"
                         value="{% if billing_address %}{{ billing_address.address_state }}{% endif %}"
                         required=""
                  >

                </div>
                <div>
                  <label for="billing_address_country"
                         class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{% translate 'País' %}</label>
                  <input type="text" name="billing_address_country" id="billing_address_country"
                         class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
                                focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600
                                dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                         placeholder="{% translate 'País' %}"
                         value="{% if billing_address %}{{ billing_address.address_country }}{% endif %}"
                         required=""
                  >
                </div>

              </div>
            </section>

            <section>
              <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                {% translate 'Opciones de envío' %}
              </h2>

              {% for shipping_method in shipping_methods %}
                <input type="radio" id="shipping_method_{{ shipping_method.pk }}" name="shipping_method"
                       value="{{ shipping_method.pk }}">
                <label for="shipping_method_{{ shipping_method.pk }}">
                  {{ shipping_method.name }} - {{ shipping_method.shipping_product.price.price_with_tax }}€
                </label>
              {% endfor %}
            </section>
          </div>

        </div>

        <!-- Resumen del pedido -->
        <div class="mx-auto mt-6 max-w-4xl flex-1 space-y-6 lg:mt-0 lg:w-full">
          <div
            class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">
            <p class="text-xl font-semibold text-gray-900 dark:text-white">{% translate 'Resumen del pedido' %}</p>

            <div class="space-y-4">
              <div class="space-y-2">
                <dl class="flex items-center justify-between gap-4">
                  <dt
                    class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Base imponible' %}</dt>
                  <dd class="text-base font-medium text-gray-900 dark:text-white">{{ base_total }} €</dd>
                </dl>

                <dl class="flex items-center justify-between gap-4">
                  <dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Descuentos' %}</dt>
                  <dd class="text-base font-medium text-green-600">-{{ savings }} €</dd>
                </dl>

                <dl class="flex items-center justify-between gap-4">
                  <dt
                    class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Gastos de envío' %}</dt>
                  <dd class="text-base font-medium text-gray-900 dark:text-white">{{ shipping_cost }} €</dd>
                </dl>

                <dl class="flex items-center justify-between gap-4">
                  <dt class="text-base font-normal text-gray-500 dark:text-gray-400">{% translate 'Impuestos' %}</dt>
                  <dd class="text-base font-medium text-gray-900 dark:text-white">{{ tax_total }} €</dd>
                </dl>
              </div>

              <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
                <dt class="text-base font-bold text-gray-900 dark:text-white">{% translate 'Total' %}</dt>
                <dd class="text-base font-bold text-gray-900 dark:text-white">{{ total }} €</dd>
              </dl>
            </div>

            <button
              class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
              {% translate 'Terminar pedido' %}
            </button>

            <div class="flex items-center justify-center gap-2">
              <span class="text-sm font-normal text-gray-500 dark:text-gray-400"> {% translate 'o' %} </span>
              <a href="{% url 'web:index' %}" title=""
                 class="inline-flex items-center gap-2 text-sm font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">
                {% translate 'Seguir comprando' %}
              </a>
            </div>
          </div>

          {#        <div#}
          {#          class="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6">#}
          {#          <form class="space-y-4">#}
          {#            <div>#}
          {#              <label for="voucher" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Do you have a#}
          {#                voucher or gift card? </label>#}
          {#              <input type="text" id="voucher"#}
          {#                     class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"#}
          {#                     placeholder="" required/>#}
          {#            </div>#}
          {#            <button type="submit"#}
          {#                    class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">#}
          {#              Apply Code#}
          {#            </button>#}
          {#          </form>#}
          {#        </div>#}
        </div>
      </div>

    </div>
  </form>
</section>