{% load static %}

{% with preview_name=name preview=value %}
  <li data-controller="lookbook-sidebar-toggle"
      data-action="sidebar-active->lookbook-sidebar-toggle#show"
  >
    <button
      data-action="click->lookbook-sidebar-toggle#toggle touch->lookbook-sidebar-toggle#toggle"
      data-lookbook-sidebar-toggle-target="button"
      class="flex items-center pt-1 pb-1 pl-4 w-full transition-all duration-150 ease-in cursor-pointer select-none hover:bg-gray-100"
      style="padding-left: 24px"
    >
      <span class="flex relative items-center w-full">

        <i style="height: 0.75rem; width: 0.75rem;"
           class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]" data-component="lookbook-icon"
           data-lookbook-sidebar-toggle-target="openArrow">
          <svg>
            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-down"></use>
          </svg>
        </i>

        <i style="height: 0.75rem; width: 0.75rem;"
           class="hidden absolute mr-1 icon-stroke-2 left-[-1rem]" data-component="lookbook-icon"
           data-lookbook-sidebar-toggle-target="closeArrow">
          <svg>
            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#chevron-right"></use>
          </svg>
        </i>

        <i style="height: 0.875rem; width: 0.875rem; " class="mr-1.5 text-indigo-500 icon-stroke-2" data-component="icon">
          <svg>
            <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#layers"></use>
          </svg>
        </i>

        <span class="truncate">{{ preview_name }}</span>
      </span>
    </button>

    <ul data-lookbook-sidebar-toggle-target="toggleable" class="hidden">
      {% for example in preview.examples %}
        <li>
          <a href="{% url 'django_lookbook:index' %}inspect/{{ preview.preview_name }}/{{ example }}/"
             class="flex items-center pt-1 pb-1 pl-4 w-full text-gray-800 transition-all duration-150 ease-in cursor-pointer select-none hover:text-gray-900"
             style="padding-left: 36px"
             data-controller="lookbook-sidebar-link"
          >
            <div class="flex relative items-center w-full">
              <i style="height: 0.875rem; width: 0.875rem; "
                 class="mr-1.5 text-indigo-500 icon-stroke-2" data-component="icon">
                <svg>
                  <use href="{% static 'lookbook/vendors/images/lucide-sprite.svg' %}#eye"></use>
                </svg>
              </i>
              <span class="truncate">{{ example }}</span>
            </div>
          </a>
        </li>
      {% endfor %}
    </ul>
  </li>

{% endwith %}
