{% extends "admin/change_list.html" %}
{% load admin_list %}
{% comment %}
  Default change_list.html for django-api-factory.
  Extends Django's stock template and:
    1. appends the ActionFormMixin modal at the end of the content block
    2. injects a per-page selector in the pagination block (override of stock)
  Subclasses can override `change_list_template` to a different file if they
  don't want either piece.
{% endcomment %}

{% block pagination %}
  {{ block.super }}
  {% comment %}Per-page selector. NOT a `<form>` because we're inside the
     changelist-form (a POST form) and nested forms are invalid HTML —
     the browser would submit the OUTER form when the user clicks any
     button inside the inner form, losing `per_page` from the URL.
     Instead, we use pure JS to navigate: onchange + a visible "Apply"
     button both call `applyPerPage()`.{% endcomment %}
  <p class="paginator per-page-selector">
    <label for="per-page-select" style="font-weight:normal; margin-right:6px;">Rows per page</label>
    <select id="per-page-select" name="per_page"
            onchange="applyPerPage();"
            style="display:inline-block; width:auto; margin:0 6px; padding:2px 6px; height:auto;">
      {% for n in cl.per_page_choices %}
        <option value="{{ n }}"{% if cl.effective_per_page == n %} selected{% endif %}>{{ n }}</option>
      {% endfor %}
    </select>
    <span style="color:#666;">rows</span>
  </p>
  <script>
    // Pure-JS navigation. We can't use a <form> here because we're
    // nested inside the changelist-form (a POST form) and the browser
    // would submit the outer form on any button click.
    function applyPerPage() {
      var select = document.getElementById('per-page-select');
      if (!select || !select.value) return;
      var u = new URL(window.location.href);
      u.searchParams.set('per_page', select.value);
      // Cut to page 1 when per_page changes (matches the documented
      // behavior: reset to page 1 when per_page changes.
      u.searchParams.delete('p');
      window.location.href = u.toString();
    }
  </script>
{% endblock %}

{% block extrastyle %}
  {{ block.super }}
  {% if api_factory_load_elementui_assets %}
    <link rel="stylesheet" href="{{ api_factory_elementui_css_url }}">
  {% endif %}
  <style>
    .per-page-selector { padding: 4px 12px; }
    .per-page-selector select { cursor: pointer; }
    .per-page-selector button { cursor: pointer; }

    .api-elementui-filter-toolbar {
      background: #fff;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,.04);
      margin-bottom: 12px;
      padding: 10px 12px 2px;
    }
    .api-elementui-filter-form {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .api-elementui-filter-toolbar .api-elementui-filter-select {
      min-width: 190px;
    }
    .api-elementui-filter-toolbar .api-elementui-filter-select .el-input,
    .api-elementui-filter-toolbar .api-elementui-filter-select .el-input__inner {
      width: 100% !important;
    }
    .api-elementui-filter-toolbar .api-elementui-filter-select .el-select__tags {
      left: 6px !important;
      max-width: calc(100% - 36px) !important;
      right: 30px !important;
      width: auto !important;
    }
    .api-elementui-filter-toolbar .api-elementui-filter-select .el-select__input {
      display: none !important;
    }
    .api-elementui-filter-toolbar .api-elementui-filter-select .el-tag {
      max-width: 92px;
    }
    .api-elementui-filter-toolbar .api-elementui-filter-select .el-select__tags-text {
      display: inline-block;
      max-width: 68px;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: bottom;
    }

    /* Top horizontal filter bar for the non-ElementUI fallback. The filters
       are rendered inline (each <details> is a pill that drops
       down options when expanded). */
    .filter-bar-top {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 6px;
      padding: 10px 12px 2px;
      background: #fff;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,.04);
      margin-bottom: 12px;
    }
    /* Hide the right-side filter nav (we moved filters to the top). */
    #changelist-filter { display: none !important; }
  </style>
{% endblock %}

{% block search %}
  {% if api_factory_use_elementui_filters %}
    <div id="toolbar" class="api-elementui-filter-toolbar">
      <div class="simpleui-form api-elementui-filter-form">
        {% if cl.has_filters %}
          {% for spec in cl.filter_specs %}
            <el-select
              size="small"
              class="simpleui-form-item api-elementui-filter-select"
              :class="{ 'api-elementui-filter-has-value': filters['{{ spec.lookup_kwarg|escapejs }}'].length }"
              multiple
              collapse-tags
              clearable
              v-model="filters['{{ spec.lookup_kwarg|escapejs }}']"
              placeholder="{{ spec.title }}"
            >
              <el-option
                v-for="option in options['{{ spec.lookup_kwarg|escapejs }}']"
                :key="'{{ spec.lookup_kwarg|escapejs }}-' + option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          {% endfor %}
        {% endif %}
        <el-button size="small" type="primary" icon="el-icon-search" @click="applyFilters">Apply</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="clearFilters">Clear</el-button>
      </div>
    </div>
    <script>
      (function () {
        var filterFields = [
          {% for spec in cl.filter_specs %}
            "{{ spec.lookup_kwarg|escapejs }}"{% if not forloop.last %},{% endif %}
          {% endfor %}
        ];
        var filters = {};
        var options = {};
        var currentUrl = new URL(window.location.href);

        function splitValues(raw) {
          if (!raw) return [];
          return raw.split(',').filter(function (value) { return value !== ''; });
        }

        filterFields.forEach(function (field) {
          filters[field] = splitValues(currentUrl.searchParams.get(field));
          options[field] = [];
        });

        {% for spec in cl.filter_specs %}
          options["{{ spec.lookup_kwarg|escapejs }}"] = [
            {% for option in spec.lookup_choices %}
              { value: "{{ option.0|escapejs }}", label: "{{ option.1|escapejs }}" }{% if not forloop.last %},{% endif %}
            {% endfor %}
          ];
        {% endfor %}

        Object.keys(filters).forEach(function (field) {
          var seen = {};
          options[field].forEach(function (option) {
            seen[option.value] = true;
          });
          filters[field].forEach(function (value) {
            if (!seen[value]) {
              options[field].push({ value: value, label: value });
              seen[value] = true;
            }
          });
        });

        new Vue({
          el: '#toolbar',
          data: {
            filters: filters,
            options: options
          },
          methods: {
            buildUrl: function () {
              var url = new URL(window.location.href);
              filterFields.forEach(function (field) {
                url.searchParams.delete(field);
              });
              Object.keys(this.filters).forEach(function (field) {
                var values = this.filters[field] || [];
                if (values.length) {
                  url.searchParams.set(field, values.join(','));
                }
              }, this);
              url.searchParams.delete('p');
              return url.toString();
            },
            applyFilters: function () {
              window.location.href = this.buildUrl();
            },
            clearFilters: function () {
              filterFields.forEach(function (field) {
                this.filters[field] = [];
              }, this);
              window.location.href = this.buildUrl();
            }
          }
        });
      })();
    </script>
  {% else %}
    {% comment %}
    Do not render Django's stock search block here. API-backed rows have
    dynamic fields, so the stock placeholder search input is not useful.
    {% endcomment %}
    {% if cl.has_filters %}
      <div class="filter-bar-top">
        {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
      </div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block filters %}
  {% comment %}
  Hide the right-side filter nav — filters moved to the top.
  {% endcomment %}
{% endblock %}

{% block content %}
  {{ block.super }}
  {% include "admin/django_api_factory/action_form_modal.html" %}
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  {% if api_factory_load_elementui_assets %}
    <script src="{{ api_factory_vue_js_url }}"></script>
    <script src="{{ api_factory_elementui_js_url }}"></script>
  {% endif %}
  <script>
  // Multi-select commit (modeled after ElementUI's batch-apply
  // filter bar: pick many, click Apply, then navigate with the
  // comma-list URL `?field=v1,v2,v3`). The in-memory filter in
  // APIAdmin.get_api_data already handles that URL via
  // `search_pars[field_name].split(',')` (OR semantics) — no
  // extra queryset plumbing needed here.
  (function () {
    function buildUrl(field, values) {
      var u = new URL(window.location.href);
      u.searchParams.delete(field);
      if (values.length) {
        u.searchParams.set(field, values.join(','));
      }
      u.searchParams.delete('p');
      return u.toString();
    }
    function splitValues(raw) {
      if (!raw) return [];
      return raw.split(',').filter(function (v) { return v !== ''; });
    }
    function getSelection(pill) {
      if (!pill.__filterSelection) {
        var field = pill.getAttribute('data-filter-field');
        var selected = new Set(splitValues(new URL(window.location.href).searchParams.get(field)));
        pill.querySelectorAll('.filter-inline-check:checked').forEach(function (check) {
          selected.add(check.getAttribute('data-value'));
        });
        pill.__filterSelection = selected;
      }
      return pill.__filterSelection;
    }
    function syncRenderedChecks(pill) {
      var selected = getSelection(pill);
      pill.querySelectorAll('.filter-inline-check').forEach(function (check) {
        var isChecked = selected.has(check.getAttribute('data-value'));
        check.checked = isChecked;
        var li = check.closest('li');
        if (li) li.classList.toggle('selected', isChecked);
      });
      renderTriggerTags(pill);
    }
    function renderTriggerTags(pill) {
      var tags = pill.querySelector('.filter-trigger-tags');
      if (!tags) return;
      var values = Array.from(getSelection(pill));
      var label = pill.querySelector('.filter-trigger-label');
      if (label) {
        var baseLabel = pill.getAttribute('data-filter-label') || pill.getAttribute('data-filter-title') || '';
        var total = parseInt(pill.getAttribute('data-filter-total') || '0', 10);
        label.textContent = values.length || !total ? baseLabel : baseLabel + ' (' + total + ')';
      }
      var maxTags = parseInt(tags.getAttribute('data-max-tags') || '2', 10);
      if (!maxTags || maxTags < 1) maxTags = 2;
      while (tags.firstChild) tags.removeChild(tags.firstChild);
      values.slice(0, maxTags).forEach(function (value) {
        var tag = document.createElement('span');
        tag.className = 'filter-trigger-tag';
        tag.textContent = value;
        tag.title = value;
        tags.appendChild(tag);
      });
      var overflow = values.length - maxTags;
      if (overflow > 0) {
        var more = document.createElement('span');
        more.className = 'filter-trigger-tag filter-trigger-more';
        more.textContent = '+' + overflow;
        more.title = values.length + ' selected';
        tags.appendChild(more);
      }
      pill.classList.toggle('filter-inline-active', values.length > 0);
    }
    document.addEventListener('click', function (e) {
      var btn = e.target.closest('.filter-inline-apply, .filter-inline-clear');
      if (!btn) return;
      e.preventDefault();
      var pill = btn.closest('.filter-inline-multi');
      if (!pill) return;
      var field = pill.getAttribute('data-filter-field');
      var selected = getSelection(pill);
      if (btn.classList.contains('filter-inline-clear')) {
        selected.clear();
        syncRenderedChecks(pill);
        window.location.href = buildUrl(field, []);
        return;
      }
      window.location.href = buildUrl(field, Array.from(selected));
    });
    document.addEventListener('change', function (e) {
      var check = e.target;
      if (!check.classList || !check.classList.contains('filter-inline-check')) return;
      var pill = check.closest('.filter-inline-multi');
      if (!pill) return;
      var selected = getSelection(pill);
      var value = check.getAttribute('data-value');
      if (check.checked) selected.add(value); else selected.delete(value);
      var li = check.closest('li');
      if (li) li.classList.toggle('selected', check.checked);
      renderTriggerTags(pill);
    });
    document.addEventListener('input', function (e) {
      var input = e.target;
      if (!input.classList || !input.classList.contains('filter-inline-search')) return;
      // Debounced server-side search: when the user types,
      // wait 250ms then AJAX `/admin/.../?ajax_distinct=1&field=X&q=...`
      // to get values that match the search term across the WHOLE
      // dataset, not just the initial 200 rendered. Replaces the
      // dropdown contents (the client-side hide/show fallback is
      // preserved as instant feedback for the 200 already loaded).
      clearTimeout(window.__filterSearchDebounce);
      var q = input.value.trim();
      var ul = input.parentElement.querySelector('.filter-inline-list');
      if (!ul) return;
      // Instant client-side filter on the 200 already loaded
      var ql = q.toLowerCase();
      Array.prototype.forEach.call(ul.children, function (li) {
        li.style.display = (!ql || li.textContent.toLowerCase().indexOf(ql) !== -1) ? '' : 'none';
      });
      // Reset offset and debounce-fetch
      ul.setAttribute('data-offset', '0');
      window.__filterSearchDebounce = setTimeout(function () {
        fetchDistinct(input, q, 0, /*replace*/ true);
      }, 250);
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && e.target.classList && e.target.classList.contains('filter-inline-search')) {
        e.target.value = '';
        e.target.dispatchEvent(new Event('input'));
      }
    });
    // Load-more button: click to fetch the next page of distinct
    // values (or the next page of search results if the search box
    // is non-empty). Appends <li> items to the existing <ul>.
    document.addEventListener('click', function (e) {
      var btn = e.target.closest('.filter-inline-load-more');
      if (!btn) return;
      if (btn.getAttribute('data-loading') === 'true') return;
      var popup = btn.closest('.filter-popup');
      var input = popup.querySelector('.filter-inline-search');
      var q = input ? input.value.trim() : '';
      var ul = popup.querySelector('.filter-inline-list');
      var offset = parseInt(ul.getAttribute('data-offset') || '0', 10);
      fetchDistinct(input, q, offset, /*replace*/ false, btn);
    });

    function fetchDistinct(input, q, offset, replace, btn) {
      if (!input) return;
      var popup = input.closest('.filter-popup');
      var details = popup.closest('details');
      var fieldName = details ? details.getAttribute('data-filter-field') : null;
      if (!fieldName) return;
      var ul = popup.querySelector('.filter-inline-list');
      var loadMoreBtn = popup.querySelector('.filter-inline-load-more');
      var statusSpan = popup.querySelector('.filter-inline-status');
      if (btn) btn.setAttribute('data-loading', 'true');
      if (loadMoreBtn) { loadMoreBtn.setAttribute('data-loading', 'true'); loadMoreBtn.textContent = 'Loading...'; }
      if (statusSpan) { statusSpan.style.display = ''; statusSpan.textContent = 'Searching...'; }
      var url = new URL(window.location.href);
      url.searchParams.set('ajax_distinct', '1');
      url.searchParams.set('field', fieldName);
      url.searchParams.set('offset', String(offset));
      if (q) url.searchParams.set('q', q); else url.searchParams.delete('q');
      fetch(url.toString(), { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function (r) { return r.json(); })
        .then(function (data) {
          if (replace) {
            // Clear existing <li>
            while (ul.firstChild) ul.removeChild(ul.firstChild);
            ul.setAttribute('data-total', String(data.count || 0));
          }
          // Append the new <li> items
          var frag = document.createDocumentFragment();
          (data.values || []).forEach(function (v) {
            var li = document.createElement('li');
            // Mirror the choice rendering in the template: single-select
            // = <a>, multi-select = <label><input type=checkbox></label>.
            // We read the spec from a data-attr on the <details>.
            var isMulti = details.getAttribute('data-multi') === 'true';
            if (isMulti) {
              var label = document.createElement('label');
              label.className = 'filter-inline-option';
              var cb = document.createElement('input');
              var valueString = String(v);
              cb.type = 'checkbox';
              cb.className = 'filter-inline-check';
              cb.setAttribute('data-value', valueString);
              cb.checked = getSelection(details).has(valueString);
              if (cb.checked) li.classList.add('selected');
              var span = document.createElement('span');
              span.className = 'filter-inline-text';
              span.textContent = valueString;
              var checkmark = document.createElement('span');
              checkmark.className = 'filter-inline-checkmark';
              checkmark.setAttribute('aria-hidden', 'true');
              checkmark.textContent = '✓';
              label.appendChild(cb);
              label.appendChild(span);
              label.appendChild(checkmark);
              li.appendChild(label);
            } else {
              var a = document.createElement('a');
              // href mirrors the existing single-select pattern: the
              // current URL with this field set to v.
              var href = new URL(window.location.href);
              href.searchParams.set(fieldName, String(v));
              href.searchParams.delete('p');
              a.href = href.toString();
              a.textContent = String(v);
              li.appendChild(a);
            }
            frag.appendChild(li);
          });
          ul.appendChild(frag);
          // Update offset and load-more visibility
          var newOffset = offset + (data.values || []).length;
          ul.setAttribute('data-offset', String(newOffset));
          if (loadMoreBtn) {
            if (data.truncated) {
              loadMoreBtn.style.display = '';
              loadMoreBtn.textContent = 'Load more...';
              loadMoreBtn.setAttribute('data-loading', 'false');
            } else {
              loadMoreBtn.style.display = 'none';
            }
          }
          if (statusSpan) {
            if (q) {
              statusSpan.textContent = (data.count || 0) + ' matches (' + newOffset + ' shown)';
            } else {
              statusSpan.textContent = (data.count || 0) + ' total';
            }
          }
        })
        .catch(function (err) {
          if (statusSpan) statusSpan.textContent = 'Load failed: ' + err;
          if (loadMoreBtn) { loadMoreBtn.textContent = 'Load failed, retry'; loadMoreBtn.setAttribute('data-loading', 'false'); }
        });
    }

    // Show the load-more button on render if the initial render was
    // truncated. We know this from the data-total attribute (which the
    // template sets to the spec's total_count) compared to the
    // rendered child count.
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.filter-inline-multi').forEach(function (pill) {
        syncRenderedChecks(pill);
      });
      document.querySelectorAll('.filter-inline-list').forEach(function (ul) {
        var total = parseInt(ul.getAttribute('data-total') || '0', 10);
        var shown = ul.children.length;
        // The "All" <li> is the first child (single-select only),
        // subtract it from shown when comparing.
        var firstLi = ul.children[0];
        if (firstLi && firstLi.textContent && firstLi.textContent.trim() === 'All') shown -= 1;
        var btn = ul.parentElement.querySelector('.filter-inline-load-more');
        var status = ul.parentElement.querySelector('.filter-inline-status');
        if (total > shown) {
          if (btn) btn.style.display = '';
          if (status) { status.style.display = ''; status.textContent = total + ' total'; }
        } else if (total > 0) {
          if (status) { status.style.display = ''; status.textContent = total + ' total'; }
        }
      });
    });
  })();
  </script>
{% endblock %}