{% extends "base.html" %}
{% load static %}

{% block extra_head %}
  {{ form.media.css }}
{% endblock extra_head %}

{% block title %}
  Lists - Yamtrack
{% endblock title %}

{% block content %}
  <div x-data="{ showModal: false }">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
      <div>
        <h1 class="text-3xl font-bold mb-2">Lists</h1>
        <p class="text-gray-400">Organize and share your media lists</p>
      </div>
      <button @click="showModal = true"
              class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors cursor-pointer">
        {% include "app/icons/plus.svg" with classes="w-5 h-5 mr-2" %}
        New List
      </button>
    </div>

    <div class="relative mb-6 flex gap-2"
         x-data="{ sort: '{{ current_sort }}', query: '{{ request.GET.q|default:''|escapejs }}' }">

      <!-- Form to manage state -->
      <form id="filter-form" class="hidden">
        <input type="hidden" name="sort" x-model="sort">
        <input type="hidden" name="q" x-model="query">
      </form>

      <div class="relative flex-1">
        <input placeholder="Search lists..."
               class="w-full py-2 pl-10 pr-4 bg-[#39404b] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-[#4a9eff] appearance-none"
               type="text"
               x-model="query"
               autocomplete="off"
               hx-get="{% url 'lists' %}"
               hx-trigger="keyup changed delay:300ms, search"
               {% if custom_lists %} hx-target="#lists-grid" {% else %} hx-target="this" hx-swap="none" {% endif %}
               hx-include="#filter-form"
               hx-indicator="#search-indicator">
        {% include "app/icons/magnifying-glass.svg" with classes="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" %}
        <div id="search-indicator"
             class="htmx-indicator absolute right-3 top-1/2 transform -translate-y-1/2">
          <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-500"></div>
        </div>
      </div>

      <div class="relative" x-data="{ open: false }">
        <button class="h-10 flex items-center gap-2 px-4 bg-[#39404b] rounded-md hover:bg-[#454d5a] transition-colors cursor-pointer"
                @click="open = !open"
                type="button">
          {% include "app/icons/arrows-up-down.svg" with classes="w-4 h-4" %}
          <span class="text-sm"
                x-text="sort === 'last_item_added' ? 'Last Item Added' : (sort === 'name' ? 'Name' : (sort === 'newest_first' ? 'Newest First' : 'Items Count'))"></span>
          {% include "app/icons/chevron-down.svg" with classes="w-4 h-4" %}
        </button>

        <div class="absolute right-0 mt-2 py-1 w-48 bg-[#39404b] rounded-md shadow-lg overflow-hidden z-10 border border-gray-700"
             x-cloak
             x-show="open"
             @click.outside="open = false"
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="transform opacity-0 scale-95"
             x-transition:enter-end="transform opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-75"
             x-transition:leave-start="transform opacity-100 scale-100"
             x-transition:leave-end="transform opacity-0 scale-95">
          {% for value, label in sort_choices %}
            <button hx-get="{% url 'lists' %}"
                    {% if custom_lists %} hx-target="#lists-grid" {% else %} hx-target="this" hx-swap="none" {% endif %}
                    hx-include="#filter-form"
                    hx-indicator="#loading-indicator"
                    class="block w-full px-4 py-2 text-left text-sm transition-colors cursor-pointer"
                    :class="sort === '{{ value }}' ? 'bg-indigo-600 text-white font-medium' : 'text-gray-300 hover:bg-[#454d5a] hover:text-white'"
                    @click="sort = '{{ value }}'; open = false"
                    type="button">{{ label }}</button>
          {% endfor %}
        </div>
      </div>
    </div>

    {% if custom_lists %}
      <div id="lists-grid"
           class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
        {% include "lists/components/list_grid.html" %}
      </div>
    {% else %}
      <div class="flex flex-col items-center justify-center py-16 bg-[#2a2f35] rounded-lg">
        <div class="text-center max-w-md mx-auto p-6">
          <div class="bg-[#39404b] rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
            {% include "app/icons/list-add.svg" with classes="w-8 h-8 text-gray-400" %}
          </div>
          <h3 class="text-xl font-semibold mb-2">No Lists Created Yet</h3>
          <p class="text-gray-400 mb-6">Create custom lists to organize your media collection and share with friends.</p>
          <button @click="showModal = true"
                  class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors cursor-pointer">
            Create Your First List
          </button>
        </div>
      </div>
    {% endif %}

    <div id="loading-indicator" class="htmx-indicator text-center pt-8">
      <div class="inline-flex justify-center items-center">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-500"></div>
      </div>
    </div>

    {% include "lists/components/list_form.html" %}
  </div>
{% endblock content %}

{% block js %}
  {{ form.media.js }}
{% endblock js %}