{% for custom_list in custom_lists %}
  <div class="bg-[#2a2f35] rounded-lg overflow-hidden hover:shadow-lg group"
       x-data="{ showModal: false }"
       {% if forloop.last and custom_lists.has_next %} hx-get="{% url 'lists' %}?page={{ custom_lists.next_page_number }}" hx-trigger="revealed threshold:200px" hx-swap="afterend" hx-include="#filter-form" hx-indicator="#loading-indicator" {% endif %}>
    <div class="relative h-48 flex items-center justify-center">
      <img alt="{{ custom_list.name }}"
           class="{% if custom_list.image != IMG_NONE %}w-full h-full object-cover{% else %}w-3/5 h-3/5{% endif %}"
           src="{{ custom_list.image }}">

      <div class="absolute inset-0 bg-black/40 transition-opacity group-hover:bg-black/50"></div>
      <a href="{% url 'list_detail' custom_list.id %}"
         class="absolute inset-0"></a>

      <button class="absolute top-2 right-2 p-2 bg-black/50 hover:bg-black/75 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200 text-white hover:text-indigo-400 cursor-pointer"
              @click="showModal = true"
              title="Edit list">{% include "app/icons/horizontal-sliders.svg" with classes="w-4 h-4" %}</button>
      <div class="absolute bottom-4 left-4 flex flex-col items-start max-w-[calc(100%-2rem)]">
        <h3 class="text-xl font-semibold text-white mb-1 line-clamp-1 w-full">{{ custom_list.name }}</h3>
        <p class="text-sm text-gray-200 line-clamp-2 w-full">{{ custom_list.description }}</p>
      </div>
    </div>
    <div class="p-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          {% include "app/icons/persons.svg" with classes="w-4 h-4 text-gray-400 mr-2" %}
          <div class="flex -space-x-2">
            <div class="w-6 h-6 rounded-full bg-[#4f46e5] flex items-center justify-center border-2 border-[#2a2f35] text-xs font-medium"
                 title="{{ custom_list.owner.username }}">{{ custom_list.owner.username.0|upper }}</div>
            {% for collaborator in custom_list.collaborators.all %}
              <div class="w-6 h-6 rounded-full bg-[#4b5563] flex items-center justify-center border-2 border-[#2a2f35] text-xs font-medium"
                   title="{{ collaborator.username }}">{{ collaborator.username.0|upper }}</div>
            {% endfor %}
          </div>
        </div>
        <div class="flex items-center text-gray-400 text-sm">
          {% with item_count=custom_list.items.count %}<span>{{ item_count }} item{{ item_count|pluralize }}</span>{% endwith %}
        </div>
      </div>
    </div>

    {% include "lists/components/list_form.html" with form=custom_list.form %}
  </div>
{% endfor %}