{# pages/list.html — model list view with type-aware filters #}
{% extends "base.html" %}

{% block title %}{{ registered.verbose_name_plural }} — {{ title | default("Admin") }}{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-left">
      <h1 class="page-header-title">{{ registered.verbose_name_plural }}</h1>
    </div>
    {% if permissions.can_create %}
    <div class="page-header-right">
      <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/create" class="btn btn-primary">
        + New {{ registered.verbose_name }}
      </a>
    </div>
    {% endif %}
  </div>

  <div class="filter-bar" x-data="filterBar()">
    <div class="filter-bar-search">
      <svg class="filter-bar-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <use href="/static/icons/heroicons.svg#magnifying-glass"/>
      </svg>
      <input type="text" name="q" value="{{ search_query | default('') }}"
             placeholder="Search {{ registered.verbose_name_plural | lower }}..."
             hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
             hx-trigger="keyup changed delay:300ms"
             hx-target="#table-wrapper"
             hx-include="[name='q']"
             class="filter-bar-search-input"
             x-ref="searchInput"
             @input="hasSearch = $refs.searchInput.value.length > 0">
      <button type="button" class="filter-bar-clear"
              x-show="hasSearch" x-transition
              @click="$refs.searchInput.value = ''; hasSearch = false; $refs.searchInput.dispatchEvent(new KeyboardEvent('keyup', {bubbles: true}))">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <use href="/static/icons/heroicons.svg#x-mark"/>
        </svg>
      </button>
    </div>

    {% if filter_fields %}
    <div class="filter-bar-chips">
      {% for field_name, field_info in filter_fields.items() %}
      <div class="relative" x-data="{ open: false }">

        {% if field_info.field_type == "date" %}
        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
          <input type="date" name="filter_{{ field_name }}"
                 value="{{ active_filters.get(field_name, '') }}"
                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                 hx-trigger="change"
                 hx-target="#table-wrapper"
                 hx-include="[name='q'], [name^='filter_']"
                 class="filter-input-date">
          {% if active_filters.get(field_name) %}
          <button type="button" class="filter-clear-btn" title="Clear"
                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                  hx-target="#table-wrapper"
                   hx-include="[name='q']">&times;</button>
          {% endif %}
        </div>

        {% elif field_info.field_type == "datetime" %}
        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
          <input type="datetime-local" name="filter_{{ field_name }}"
                 value="{{ active_filters.get(field_name, '') }}"
                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                 hx-trigger="change"
                 hx-target="#table-wrapper"
                 hx-include="[name='q'], [name^='filter_']"
                 class="filter-input-datetime">
          {% if active_filters.get(field_name) %}
          <button type="button" class="filter-clear-btn" title="Clear"
                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                  hx-target="#table-wrapper"
                   hx-include="[name='q']">&times;</button>
          {% endif %}
        </div>

        {% elif field_info.field_type == "time" %}
        <div class="filter-chip-wrap {% if active_filters.get(field_name) %}filter-chip--active{% endif %}">
          <label class="filter-chip-label">{{ field_name | replace('_', ' ') | title }}</label>
          <input type="time" name="filter_{{ field_name }}"
                 value="{{ active_filters.get(field_name, '') }}"
                 hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                 hx-trigger="change"
                 hx-target="#table-wrapper"
                 hx-include="[name='q'], [name^='filter_']"
                 class="filter-input-time">
          {% if active_filters.get(field_name) %}
          <button type="button" class="filter-clear-btn" title="Clear"
                  hx-get="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
                  hx-target="#table-wrapper"
                   hx-include="[name='q']">&times;</button>
          {% endif %}
        </div>

        {% else %}
        {# boolean, enum, relation, text — render as dropdown #}
        <button type="button" class="filter-chip"
                :class="{ 'active': activeFilters['{{ field_name }}'] }"
                @click="open = !open">
          {{ field_name | replace('_', ' ') | title }}
          <template x-if="activeFilters['{{ field_name }}']">
            <span class="filter-chip-count" x-text="activeFilters['{{ field_name }}']"></span>
          </template>
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <use href="/static/icons/heroicons.svg#chevron-right"/>
          </svg>
        </button>
        <div class="filter-dropdown" x-show="open" @click.outside="open = false" x-transition>
          <div class="filter-dropdown-header">
            <span>{{ field_name | replace('_', ' ') | title }}</span>
            <button type="button" class="filter-dropdown-clear"
                    @click="clearFilter('{{ field_name }}'); open = false">Clear</button>
          </div>
          {% for value, label in field_info.choices %}
          <div class="filter-dropdown-item">
            <input type="radio" name="filter_{{ field_name }}" value="{{ value }}"
                   :checked="activeFilters['{{ field_name }}'] === '{{ value }}'"
                   @change="setFilter('{{ field_name }}', '{{ value }}'); open = false"
                   id="filter_{{ field_name }}_{{ value }}">
            <label for="filter_{{ field_name }}_{{ value }}">{{ label }}</label>
          </div>
          {% endfor %}
        </div>
        {% endif %}

      </div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="filter-bar-right">
      {% if filter_fields %}
      <button type="button" class="filter-bar-clear-all"
              x-show="Object.keys(activeFilters).length > 0"
              x-transition
              @click="clearAllFilters()">
        Clear all filters
      </button>
      <div class="filter-bar-divider" x-show="Object.keys(activeFilters).length > 0"></div>
      {% endif %}

      <button type="button" class="filter-bar-action" title="Toggle column visibility"
              @click="showColumnPicker = !showColumnPicker">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <use href="/static/icons/heroicons.svg#eye"/>
        </svg>
      </button>
    </div>
  </div>

  <div id="table-wrapper" class="table-wrapper">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr>
            {% if permissions.can_delete %}
            <th class="px-4 py-3 text-left" style="width: 44px">
              <input type="checkbox" id="select-all"
                     hx-on:click="document.querySelectorAll('input[name=&quot;ids[]&quot;]').forEach(c => c.checked = $el.checked)">
            </th>
            {% endif %}
            {% for col in registered.columns %}
            {% if not col.primary_key or registered.columns | length > 1 %}
            <th class="px-4 py-3 text-left">
              <a href="?ordering={% if ordering == col.name %}-{% endif %}{{ col.name }}"
                 class="table-sort-btn{% if ordering == col.name or ordering == '-' ~ col.name %} active{% endif %}">
                {{ col.name | replace('_', ' ') | title }}
                {% if ordering == col.name %}
                <svg class="w-3 h-3 rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <use href="/static/icons/heroicons.svg#chevron-right"/>
                </svg>
                {% elif ordering == '-' ~ col.name %}
                <svg class="w-3 h-3 -rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <use href="/static/icons/heroicons.svg#chevron-right"/>
                </svg>
                {% endif %}
              </a>
            </th>
            {% endif %}
            {% endfor %}
            <th class="px-4 py-3 text-right" style="width: 120px">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if items %}
          {% for obj in items %}
          <tr>
            {% if permissions.can_delete %}
            <td class="px-4 py-3">
              <input type="checkbox" name="ids[]" value="{{ obj.id }}">
            </td>
            {% endif %}
            {% for col in registered.columns %}
            {% if not col.primary_key or registered.columns | length > 1 %}
            <td class="px-4 py-3">
              {{ attr(obj, col.name) | default('-') }}
            </td>
            {% endif %}
            {% endfor %}
            <td class="px-4 py-3 text-right">
              <div class="flex items-center justify-end gap-1">
                {% if permissions.can_edit %}
                <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/{{ obj.id }}"
                   class="btn btn-ghost btn-sm">
                  Edit
                </a>
                {% endif %}
                {% if permissions.can_delete %}
                <button hx-confirm="Are you sure you want to delete this {{ registered.verbose_name | lower }}?"
                        hx-delete="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/{{ obj.id }}"
                        hx-target="closest tr"
                        hx-swap="outerHTML"
                        class="btn btn-ghost btn-sm">
                  Delete
                </button>
                {% endif %}
              </div>
            </td>
          </tr>
          {% endfor %}
          {% else %}
          <tr>
            <td colspan="{{ registered.columns | length + 2 }}" class="px-4 py-16 text-center">
              <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--text-disabled)">
                <use href="/static/icons/heroicons.svg#document-text"/>
              </svg>
              <p class="mt-4" style="color: var(--text-secondary)">No {{ registered.verbose_name_plural | lower }} found</p>
              {% if permissions.can_create %}
              <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/create"
                 class="btn btn-primary" style="margin-top: 16px">
                + Create your first {{ registered.verbose_name | lower }}
              </a>
              {% endif %}
            </td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>

    {% if permissions.can_delete %}
    <div class="px-4 py-3" style="border-top: 1px solid var(--surface-border); display: flex; align-items: center; gap: 12px">
      <span style="font-size: var(--text-sm); color: var(--text-secondary)">With selected:</span>
      <button type="submit" form="bulk-form" class="btn btn-secondary btn-sm">
        Delete Selected
      </button>
    </div>
    {% endif %}

    {% from "partials/pagination.html" import render_pagination %}
    {{ render_pagination(page, total_pages, total, registered.admin.per_page) }}
  </div>
</div>

{% if permissions.can_delete %}
<form id="bulk-form" method="post" action="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/bulk" style="display: none;"></form>
{% endif %}

<script>
function filterBar() {
  return {
    hasSearch: false,
    activeFilters: {{ active_filters | tojson }},
    showColumnPicker: false,
    setFilter(field, value) {
      if (value) {
        this.activeFilters[field] = value;
      } else {
        delete this.activeFilters[field];
      }
      this.applyFilters();
    },
    clearFilter(field) {
      delete this.activeFilters[field];
      this.applyFilters();
    },
    clearAllFilters() {
      this.activeFilters = {};
      this.applyFilters();
    },
    applyFilters() {
      const params = new URLSearchParams(window.location.search);
      Object.entries(this.activeFilters).forEach(([key, val]) => {
        if (val) params.set('filter_' + key, val);
        else params.delete('filter_' + key);
      });
      const search = this.$refs.searchInput?.value;
      if (search) params.set('q', search);
      else params.delete('q');
      const url = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
      htmx.ajax('GET', url, { target: '#table-wrapper', swap: 'outerHTML' });
    }
  };
}
</script>
{% endblock %}