{% extends 'theme/base.html' %}
{% load static i18n %}

{% block main %}
  {% include 'components/generic/navbar.html' %}
  <section class="p-16 mx-auto justify-between mb-4 grid gap-4 sm:grid-cols-1 md:mb-8 lg:grid-cols-2 xl:grid-cols-2">
    <section class="p-2 border border-gray-100 dark:border-gray-600 rounded-l">
      <ul>
        {% for item in items %}
          <li class="p-4">
            <a href="{% url 'web:product_detail' pk=item.product.pk slug=item.product.slug %}"
               class="text-lg font-semibold leading-tight text-gray-900 hover:underline dark:text-white">
              <img class="mx-auto h-24 w-auto dark:hidden" src="{{ item.product.images.all|first }}"
                   alt="{{ product.name }}"/>
              <img class="mx-auto hidden h-24 w-auto dark:block" src="{{ item.product.images.all|first }}"
                   alt="{{ product.name }}"/>

              {{ item.product.name }}
            </a>
          </li>
        {% endfor %}
      </ul>
    </section>
    <section class="p-2 border border-gray-100 dark:border-gray-600 rounded-l">

    </section>
  </section>
{% endblock %}