{% load i18n %}
{% comment %}
  Generic table-listing widget (see utilities/listing.py). CSS/JS are inlined on purpose:
  static is served from a CloudFront backend, so separate assets need collectstatic + CDN
  invalidation. Inlining keeps the widget self-contained and reusable across the codebase.
{% endcomment %}
<style>
.listing { max-width: 100%; border: 1px solid var(--border-color, #ccc); border-radius: 6px; overflow: hidden; background: var(--body-bg, #fff); }
.listing__toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; background: var(--darkened-bg, #f8f8f8); border-bottom: 1px solid var(--border-color, #ccc); }
/* Higher specificity than the admin's `.aligned label { width:160px }`, which would otherwise
   force each filter label to a 160px block and hide its text. */
.listing__toolbar input.listing__search { flex: 0 1 240px; min-width: 150px; max-width: 280px; margin: 0; padding: 6px 10px; border: 1px solid var(--border-color, #ccc); border-radius: 4px; background: var(--body-bg, #fff); color: var(--body-fg, #333); }
.listing__toolbar label.listing__filter { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; width: auto; min-width: 0; padding: 0; float: none; white-space: nowrap; font-size: 12px; color: var(--body-quiet-color, #666); }
.listing__toolbar label.listing__filter::after { content: none; }
.listing__toolbar label.listing__filter select { min-width: 120px; padding: 5px 6px; border: 1px solid var(--border-color, #ccc); border-radius: 4px; background: var(--body-bg, #fff); color: var(--body-fg, #333); }
.listing__scroll { max-height: 360px; overflow-y: auto; }
.listing__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.listing__table thead th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 10px; background: var(--darkened-bg, #f0f0f0); color: var(--body-quiet-color, #555); border-bottom: 1px solid var(--border-color, #ccc); font-weight: 600; white-space: nowrap; }
.listing__table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--hairline-color, #eee); color: var(--body-fg, #333); vertical-align: middle; }
.listing__row:hover td { background: var(--selected-row, #fffbe6); }
.listing__row.is-selected td { background: var(--selected-bg, #e6f2ff); }
.listing__row.is-hidden { display: none; }
.listing__col-check { width: 34px; text-align: center; }
.listing__pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.listing__pill--active { background: rgba(38, 166, 91, 0.15); color: #1e7e4c; }
.listing__pill--inactive { background: rgba(200, 60, 60, 0.15); color: #b23b3b; }
.listing__pill--neutral { background: rgba(120, 120, 120, 0.15); color: #555; }
.listing__empty { padding: 20px; text-align: center; color: var(--body-quiet-color, #888); }
.listing__footer { padding: 8px 12px; background: var(--darkened-bg, #f8f8f8); border-top: 1px solid var(--border-color, #ccc); font-size: 12px; color: var(--body-quiet-color, #666); }
</style>

<div class="listing" data-listing-widget{% if widget.hide_label %} data-hide-label="1"{% endif %}>
  {% if widget.has_search or widget.filters %}
  <div class="listing__toolbar">
    {% if widget.has_search %}
      <input type="search" class="listing__search" data-cl-search placeholder="{% translate 'Search…' %}" autocomplete="off">
    {% endif %}
    {% for f in widget.filters %}
      <label class="listing__filter">
        {{ f.header }}
        <select data-cl-filter="{{ f.name }}">
          <option value="">{% translate 'All' %}</option>
          {% for value, label in f.options %}
            <option value="{{ value }}">{{ label }}</option>
          {% endfor %}
        </select>
      </label>
    {% endfor %}
  </div>
  {% endif %}

  <div class="listing__scroll">
    <table class="listing__table">
      <thead>
        <tr>
          {% if not widget.readonly %}
          <th class="listing__col-check"><input type="checkbox" data-cl-select-all title="{% translate 'Select all visible' %}"></th>
          {% endif %}
          {% for col in widget.columns %}<th>{{ col.header }}</th>{% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in widget.rows %}
          <tr class="listing__row{% if row.selected %} is-selected{% endif %}" data-cl-row
              data-search="{{ row.search }}"{% for d in row.data %} data-{{ d.name }}="{{ d.value }}"{% endfor %}>
            {% if not widget.readonly %}
            <td class="listing__col-check">
              <input type="checkbox" name="{{ widget.name }}" value="{{ row.id }}" data-cl-check {% if row.selected %}checked{% endif %}>
            </td>
            {% endif %}
            {% for cell in row.cells %}
              <td>{% if cell.badge %}<span class="listing__pill listing__pill--{{ cell.badge }}">{{ cell.display }}</span>{% else %}{{ cell.display|default:"—" }}{% endif %}</td>
            {% endfor %}
          </tr>
        {% empty %}
          <tr><td colspan="{% if widget.readonly %}{{ widget.col_count }}{% else %}{{ widget.col_count|add:1 }}{% endif %}" class="listing__empty">{{ widget.empty_label }}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="listing__footer">
    {% if not widget.readonly %}<span data-cl-selected-count>{{ widget.selected_count }}</span> {% translate 'selected' %} · {% endif %}
    <span data-cl-shown-count>{{ widget.total }}</span> {% translate 'of' %} {{ widget.total }} {% translate 'shown' %}
  </div>
</div>

<script>
(function () {
  "use strict";
  function initWidget(root) {
    if (root.dataset.clReady) { return; }
    root.dataset.clReady = "1";
    // Prefer binding to all available event systems to catch native AND jQuery-triggered events.
    function on(el, evt, handler) {
      el.addEventListener(evt, handler);
      if (window.jQuery) { window.jQuery(el).on(evt, handler); }
      if (window.django && window.django.jQuery && window.django.jQuery !== window.jQuery) {
        window.django.jQuery(el).on(evt, handler);
      }
    }
    // The field's own label sits in the admin's ~160px left column, which cramps the table.
    // If data-hide-label is set (a section/tab heading already names the field) remove it;
    // otherwise promote it to a full-width heading above the table.
    var hideLabel = root.hasAttribute("data-hide-label");
    var formRow = root.closest(".form-row");
    if (formRow) {
      formRow.querySelectorAll("label").forEach(function (l) {
        if (root.contains(l)) { return; }
        if (hideLabel) {
          l.style.display = "none";
        } else {
          l.style.display = "block";
          l.style.width = "auto";
          l.style.minWidth = "0";
          l.style.cssFloat = "none";
          l.style.marginBottom = "6px";
        }
      });
    }
    var search = root.querySelector("[data-cl-search]");
    var filters = Array.prototype.slice.call(root.querySelectorAll("[data-cl-filter]"));
    var selectAll = root.querySelector("[data-cl-select-all]");
    var rows = Array.prototype.slice.call(root.querySelectorAll("[data-cl-row]"));
    var checks = Array.prototype.slice.call(root.querySelectorAll("[data-cl-check]"));
    var shownCount = root.querySelector("[data-cl-shown-count]");
    var selectedCount = root.querySelector("[data-cl-selected-count]");
    function currentFilters() {
      var state = {};
      filters.forEach(function (sel) { state[sel.getAttribute("data-cl-filter")] = sel.value; });
      return state;
    }
    function matches(row, term, state) {
      for (var key in state) {
        if (state[key] && row.getAttribute("data-" + key) !== state[key]) { return false; }
      }
      if (term) {
        if ((row.getAttribute("data-search") || "").indexOf(term) === -1) { return false; }
      }
      return true;
    }
    function applyFilters() {
      var term = (search ? search.value : "").trim().toLowerCase();
      var state = currentFilters();
      var shown = 0;
      rows.forEach(function (row) {
        var visible = matches(row, term, state);
        row.classList.toggle("is-hidden", !visible);
        if (visible) { shown += 1; }
      });
      if (shownCount) { shownCount.textContent = shown; }
      syncSelectAll();
    }
    function updateSelectedCount() {
      var count = 0;
      checks.forEach(function (cb) { if (cb.checked) { count += 1; } });
      if (selectedCount) { selectedCount.textContent = count; }
    }
    function visibleChecks() {
      return checks.filter(function (cb) {
        var row = cb.closest("[data-cl-row]");
        return row && !row.classList.contains("is-hidden");
      });
    }
    function syncSelectAll() {
      if (!selectAll) { return; }
      var visible = visibleChecks();
      var checked = visible.filter(function (cb) { return cb.checked; });
      selectAll.checked = visible.length > 0 && checked.length === visible.length;
      selectAll.indeterminate = checked.length > 0 && checked.length < visible.length;
    }
    if (search) { on(search, "input", applyFilters); }
    filters.forEach(function (sel) { on(sel, "change", applyFilters); });
    checks.forEach(function (cb) {
      on(cb, "change", function () {
        var row = cb.closest("[data-cl-row]");
        if (row) { row.classList.toggle("is-selected", cb.checked); }
        updateSelectedCount();
        syncSelectAll();
      });
    });
    if (selectAll) {
      on(selectAll, "change", function () {
        visibleChecks().forEach(function (cb) {
          cb.checked = selectAll.checked;
          var row = cb.closest("[data-cl-row]");
          if (row) { row.classList.toggle("is-selected", cb.checked); }
        });
        updateSelectedCount();
      });
    }
    updateSelectedCount();
    applyFilters();
  }
  function initAll() {
    var widgets = Array.prototype.slice.call(document.querySelectorAll("[data-listing-widget]"));
    widgets.forEach(initWidget);
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initAll);
  } else {
    initAll();
  }
})();
</script>