{% extends "base.html" %}

{% load render_table from django_tables2 %}
{% load crispy_forms_tags %}

{% block content %}
  {% block htmx_table_ribbon %}{% endblock %}

  {% if htmx_table_header_template %}
    {% include htmx_table_header_template %}
  {% endif %}

  {% comment %} When a header template is present it includes the Filters dropdown inline with its own buttons. Otherwise render it standalone here. {% endcomment %}
  {% if possible_filters and not htmx_table_header_template %}
    <div class="d-flex flex-wrap gap-2 align-items-center mt-2 mb-2">
      {% include "auctions/partials/htmx_table_filters.html" %}
    </div>
  {% endif %}

  {% block htmx_table_filter_form %}
    <form class="col-sm-12 mt-2">
      {% crispy filter.form %}
    </form>
  {% endblock %}

  {% block htmx_table %}
    {% if no_results %}
      <div class="table-container mt-2 mb-2">{{ no_results|safe }}</div>
    {% else %}
      {% render_table table %}
    {% endif %}
  {% endblock %}

  <div id="modals-here"></div>
{% endblock %}

{% block extra_js %}
  {{ block.super }}
  <script>
    (function () {
      const queryInput = document.getElementById('id_query');
      if (!queryInput) {
        return;
      }

      function escapeRegex(value) {
        return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      }

      function normalizeKeyword(value) {
        return (value || '').replaceAll('_', ' ').trim();
      }

      function syncQueryUrlAndLinks() {
        const query = queryInput.value.trim();
        const newUrl = new URL(window.location);
        if (query) {
          newUrl.searchParams.set('query', query);
        } else {
          newUrl.searchParams.delete('query');
        }
        history.replaceState({}, '', newUrl);

        document.querySelectorAll('[data-query-sync-url]').forEach(function (link) {
          const href = link.getAttribute('href');
          const normalizedHref = href && href.trim() ? href.split('?')[0] : '';
          const baseUrl = link.dataset.querySyncUrl || normalizedHref;
          if (baseUrl) {
            link.setAttribute('href', query ? baseUrl + '?query=' + encodeURIComponent(query) : baseUrl);
          }
        });

        document.querySelectorAll('[data-query-sync-hx-vals]').forEach(function (element) {
          const paramName = element.dataset.querySyncHxVals || 'query';
          let hxVals = {};
          try {
            hxVals = JSON.parse(element.getAttribute('hx-vals') || '{}');
          } catch (error) {
            hxVals = {};
          }
          if (query) {
            hxVals[paramName] = query;
          } else {
            delete hxVals[paramName];
          }
          element.setAttribute('hx-vals', JSON.stringify(hxVals));
        });
      }

      function syncFilterCheckboxes() {
        const queryValue = queryInput.value;
        document.querySelectorAll('.htmx-table-filter').forEach(function (checkbox) {
          const keyword = normalizeKeyword(checkbox.dataset.filterKey);
          const regex = new RegExp('(^|\\s)' + escapeRegex(keyword) + '(?=\\s|$)', 'g');
          checkbox.checked = regex.test(queryValue);
        });
      }

      function dispatchQueryEvents() {
        queryInput.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, cancelable: true }));
        queryInput.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
      }

      function updateKeyword(keyword, includeKeyword) {
        const normalizedKeyword = normalizeKeyword(keyword);
        const regex = new RegExp('(^|\\s)' + escapeRegex(normalizedKeyword) + '(?=\\s|$)', 'g');
        let queryValue = queryInput.value.replace(regex, ' ').replace(/\s+/g, ' ').trim();
        if (includeKeyword) {
          queryValue = (queryValue + ' ' + normalizedKeyword).trim();
        }
        queryInput.value = queryValue;
        dispatchQueryEvents();
      }

      document.querySelectorAll('.htmx-table-filter').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
          updateKeyword(checkbox.dataset.filterKey, checkbox.checked);
        });
      });

      queryInput.addEventListener('input', function () {
        syncFilterCheckboxes();
        syncQueryUrlAndLinks();
      });
      queryInput.addEventListener('blur', syncFilterCheckboxes);

      if (window.bootstrap) {
        document.querySelectorAll('[data-bs-title]').forEach(function (element) {
          new bootstrap.Tooltip(element);
        });
      }

      syncFilterCheckboxes();
      syncQueryUrlAndLinks();
    })();
  </script>
{% endblock %}