media_list.html

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

{% block title %}
  {{ media_type|media_type_readable_plural }} - Yamtrack
{% endblock title %}

{% block content %}
  <h1 class="text-3xl font-bold mb-6">{{ media_type|media_type_readable_plural }}</h1>

  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.store('bulk', {
        active: false,
        ids: [],
        toggle(id) {
          const i = this.ids.indexOf(id);
          i === -1 ? this.ids.push(id) : this.ids.splice(i, 1);
        },
        selectAll() {
          document.querySelectorAll('[data-bulk-id]').forEach(function(el) {
            const id = parseInt(el.dataset.bulkId);
            if (Alpine.store('bulk').ids.indexOf(id) === -1) Alpine.store('bulk').ids.push(id);
          });
        },
        clear() { this.ids = []; this.active = false; },
      });
    });
  </script>

  <div x-data="{ sort: '{{ current_sort }}', status: '{{ current_status }}', layout: '{{ current_layout }}', search: '{{ request.GET.search|default:'' }}', bulkListsOpen: false, statusLabels: {
    {% for value, label in status_choices %}
      '{{ value }}': '{{ label }}'
      {% if not forloop.last %},{% endif %}

    {% endfor %}
    }, sortLabels: {
    {% for value, label in sort_choices %}
      '{{ value }}': '{{ label }}'
      {% if not forloop.last %},{% endif %}

    {% endfor %}
    } }">

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

    <div class="flex flex-col md:flex-row gap-4 mb-6">
      <!-- Search -->
      <div class="relative grow">
        <input placeholder="Search {{ media_type_plural }} in your list..."
               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="search"
               hx-get="{% url 'medialist' media_type %}"
               hx-trigger="keyup changed delay:300ms, search"
               {% if media_list %} hx-target="{{ layout_class }}" {% else %} hx-target="#empty_list" {% endif %}
               hx-include="#filter-form"
               hx-indicator="#search-indicator">
        {% include "app/icons/magnifying-glass.svg" with classes="w-6 h-6 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" %}
        <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="flex gap-2 flex-wrap">
        <!-- Filter by Status -->
        <div class="relative" x-data="{ open: false }">
          <button class="flex items-center px-4 py-2 bg-[#39404b] rounded-md hover:bg-[#454d5a] transition-colors cursor-pointer"
                  @click="open = !open"
                  type="button">
            {% include "app/icons/funnel.svg" with classes="w-4 h-4 mr-2" %}
            <span x-text="statusLabels[status] || status"></span>
            {% include "app/icons/chevron-down.svg" with classes="w-4 h-4 ml-2" %}
          </button>

          <div class="absolute z-10 mt-2 py-1 w-48 bg-[#39404b] rounded-md shadow-lg overflow-hidden 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 status_choices %}
              <button hx-get="{% url 'medialist' media_type %}"
                      {% if media_list %} hx-target="{{ layout_class }}" {% else %} hx-target="#empty_list" {% 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="status === '{{ value }}' ? 'bg-indigo-600 text-white font-medium' : 'text-gray-300 hover:bg-[#454d5a] hover:text-white'"
                      @click="status = '{{ value }}'; open = false"
                      type="button">{{ label }}</button>
            {% endfor %}
          </div>
        </div>

        <!-- Sort by -->
        <div class="relative" x-data="{ open: false }">
          <button class="flex items-center px-4 py-2 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 mr-2" %}
            <span x-text="sortLabels[sort] || sort"></span>
            {% include "app/icons/chevron-down.svg" with classes="w-4 h-4 ml-2" %}
          </button>

          <div class="absolute z-10 mt-2 py-1 w-48 bg-[#39404b] rounded-md shadow-lg overflow-hidden 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 'medialist' media_type %}"
                      {% if media_list %} hx-target="{{ layout_class }}" {% else %} hx-target="#empty_list" {% 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>

        <!-- Bulk Select Toggle -->
        <button class="flex items-center px-4 py-2 rounded-md transition-colors cursor-pointer"
                :class="$store.bulk.active ? 'bg-indigo-600 text-white' : 'bg-[#39404b] hover:bg-[#454d5a]'"
                @click="$store.bulk.active = !$store.bulk.active; if (!$store.bulk.active) $store.bulk.ids = []"
                type="button"
                title="Select items">
          {% include "app/icons/circle-check.svg" with classes="w-4 h-4 mr-2" %}
          Select
        </button>

        <!-- Layout Toggle -->
        <div class="flex rounded-md overflow-hidden border border-gray-700">
          <a :href="`{% url 'medialist' media_type %}?${search ? 'search=' + search + '&' : ''}${status !== 'all' ? 'status=' + status + '&' : ''}${sort !== 'score' ? 'sort=' + sort + '&' : ''}layout=grid`"
             class="p-2 cursor-pointer"
             :class="layout === 'grid' ? 'bg-indigo-600 text-white' : 'bg-[#39404b] hover:bg-[#454d5a]'"
             title="Grid View"
             @click="layout = 'grid'">{% include "app/icons/four-square.svg" with classes="w-5 h-5" %}</a>
          <a :href="`{% url 'medialist' media_type %}?${search ? 'search=' + search + '&' : ''}${status !== 'all' ? 'status=' + status + '&' : ''}${sort !== 'score' ? 'sort=' + sort + '&' : ''}layout=table`"
             class="p-2 cursor-pointer"
             :class="layout === 'table' ? 'bg-indigo-600 text-white' : 'bg-[#39404b] hover:bg-[#454d5a]'"
             title="Table View"
             @click="layout = 'table'">{% include "app/icons/table.svg" with classes="w-5 h-5" %}</a>
        </div>
      </div>
    </div>

    <!-- Hidden form keeping selected IDs and CSRF token in sync for hx-include -->
    <form id="bulk-ids-form" class="hidden">
      <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
      <template x-for="id in $store.bulk.ids" :key="id">
        <input type="hidden" name="item_ids" :value="id">
      </template>
    </form>

    <!-- Bulk action bar -->
    <div x-show="$store.bulk.active"
         x-cloak
         class="sticky top-2 z-40 flex items-center gap-3 mb-4 p-3 bg-[#2a2f35] border border-gray-700 rounded-lg shadow-lg">
      <span class="text-sm text-gray-300">
        <span x-text="$store.bulk.ids.length"></span> selected
      </span>
      <button class="px-3 py-1.5 text-sm bg-[#39404b] hover:bg-[#454d5a] text-white rounded-md transition-colors cursor-pointer"
              type="button"
              @click="$store.bulk.selectAll()">Select all visible</button>
      <button class="px-3 py-1.5 text-sm bg-emerald-600 hover:bg-emerald-500 text-white rounded-md transition-colors cursor-pointer"
              type="button"
              x-show="$store.bulk.ids.length > 0"
              hx-get="{% url 'bulk_lists_modal' %}"
              hx-target="#bulk-lists-modal-content"
              hx-trigger="click"
              @click="bulkListsOpen = true">Add to list</button>
      <button class="ml-auto px-3 py-1.5 text-sm text-gray-400 hover:text-white transition-colors cursor-pointer"
              type="button"
              @click="$store.bulk.clear()">Cancel</button>
    </div>

    <!-- Bulk lists modal -->
    <div x-show="bulkListsOpen"
         x-cloak
         @keydown.escape.window="bulkListsOpen = false"
         class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div class="w-96 max-h-[90vh] px-4 md:px-0 relative z-60"
           @click.outside="bulkListsOpen = false">
        <div id="bulk-lists-modal-content"></div>
      </div>
    </div>

    {% if not media_list %}
      <div id="empty_list"
           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/edit.svg" with classes="w-8 h-8 text-gray-400" %}
          </div>
          <h3 class="text-xl font-semibold mb-2">No {{ media_type|media_type_readable_plural }} Tracked Yet</h3>
          <p class="text-gray-400 mb-6">
            Start tracking your {{ media_type_plural }} to keep a record of what you've {{ media_type|media_past_verb }}.
          </p>
          <a href="{{ media_type|sample_search }}"
             class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors">
            Browse {{ media_type|media_type_readable_plural }}
          </a>
        </div>
      </div>
    {% elif current_layout == "grid" %}
      <div class="media-grid">{% include "app/components/media_grid_items.html" %}</div>
    {% else %}
      <div class="bg-[#2a2f35] p-4 rounded-lg overflow-hidden max-w-[calc(100svw-4rem)] overflow-x-scroll">
        <table class="w-full bg-[#2a2f35]">
          <thead class="text-left text-gray-400 text-sm">
            <tr>
              <th x-show="$store.bulk.active" class="p-2 w-10"></th>
              <th class="p-2 w-15"></th>
              <th class="p-2 pe-8 w-2/5">Title</th>
              <th class="p-2 text-center">Score</th>
              {% if media_type != MediaTypes.MOVIE.value %}<th class="p-2 text-center">Progress</th>{% endif %}
              {% if media_type == MediaTypes.TV.value %}<th class="p-2 text-center">Last Watched</th>{% endif %}
              <th class="p-2 text-center">Status</th>
              <th class="p-2 text-center">Start Date</th>
              <th class="p-2 text-center">End Date</th>
            </tr>
          </thead>
          <tbody>
            {% include "app/components/media_table_items.html" %}
          </tbody>
        </table>
      </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>
  </div>
{% endblock content %}