{# SPDX-License-Identifier: Apache-2.0 #}
{# Copyright (C) 2025 Marcin Zieba <marcinpsk@gmail.com> #}
{# Reusable state-pill + name filter for a category table, mirroring the Interfaces tab. #}
{# Rows carry the server's projected kind and bucket. #}
<div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
  {% if not text_only %}<div class="btn-group btn-group-sm" role="group" aria-label="State filter">
    <button type="button" class="btn btn-outline-secondary active" data-kind-filter="{{ fid }}" data-kind="all">All <span class="badge text-bg-light ms-1" data-kind-count>0</span></button>
    <button type="button" class="btn btn-outline-warning" data-kind-filter="{{ fid }}" data-kind="drift">Drift <span class="badge text-bg-warning text-dark ms-1" data-kind-count>0</span></button>
    <button type="button" class="btn btn-outline-info" data-kind-filter="{{ fid }}" data-kind="pending">Pending apply <span class="badge text-bg-info ms-1" data-kind-count>0</span></button>
    <button type="button" class="btn btn-outline-success" data-kind-filter="{{ fid }}" data-kind="in_sync">In sync <span class="badge text-bg-success ms-1" data-kind-count>0</span></button>
  </div>{% endif %}
  <div class="input-group input-group-sm" style="max-width: 280px;">
    <span class="input-group-text"><span class="mdi mdi-magnify"></span></span>
    <input type="text" class="form-control" placeholder="{{ placeholder|default:'Filter…' }}" data-text-filter="{{ fid }}" autocomplete="off">
  </div>
  <span class="text-muted small ms-auto" data-list-filter-count="{{ fid }}"></span>
</div>
<script>
(function () {
  var root = document.getElementById('{{ fid }}');
  if (!root) return;
  var rows = Array.prototype.slice.call(root.querySelectorAll('table > tbody > tr'));
  var pills = Array.prototype.slice.call(document.querySelectorAll('[data-kind-filter="{{ fid }}"]'));
  var search = document.querySelector('[data-text-filter="{{ fid }}"]');
  var counter = document.querySelector('[data-list-filter-count="{{ fid }}"]');
  var activeKind = 'all';
  var counts = { all: rows.length, drift: 0, pending: 0, in_sync: 0 };
  rows.forEach(function (tr) {
    var bucket = tr.getAttribute('data-bucket');
    if (Object.prototype.hasOwnProperty.call(counts, bucket)) counts[bucket]++;
  });
  pills.forEach(function (p) {
    var badge = p.querySelector('[data-kind-count]');
    if (badge) badge.textContent = counts[p.getAttribute('data-kind')] != null ? counts[p.getAttribute('data-kind')] : 0;
  });
  function apply() {
    var q = (search && search.value || '').trim().toLowerCase();
    var shown = 0;
    rows.forEach(function (tr) {
      var ok = (activeKind === 'all' || tr.getAttribute('data-bucket') === activeKind) && (!q || tr.textContent.toLowerCase().indexOf(q) !== -1);
      tr.style.display = ok ? '' : 'none';
      if (ok) shown++;
    });
    if (counter) counter.textContent = shown + ' of ' + rows.length;
  }
  pills.forEach(function (p) {
    p.addEventListener('click', function () {
      activeKind = p.getAttribute('data-kind');
      pills.forEach(function (x) { x.classList.toggle('active', x === p); });
      apply();
    });
  });
  if (search) search.addEventListener('input', apply);
  apply();
})();
</script>