{# Filter-form shell: collapsible <details> wrapper, active-count
   badge, inline "Clear filters" link in the summary, auto-submit-on-
   change script, and the 4-column responsive grid every filter form
   in the audit uses.

   Pair with ``_filter_select.html`` and ``_filter_text.html`` for the
   individual controls inside the form body.

   Parameters:
     - action        (str) form action URL
     - clear_href    (str) URL for the "Clear filters" link (typically
                     the action URL with no query string)
     - signals       (list) iterable of active-signal values - any
                     non-empty / non-None entry counts toward the
                     "+N active" badge
     - hidden        (dict, optional) name -> value hidden fields
                     (eg. sort / direction so they round-trip)

   Call style: use Jinja's ``{% call ... %}`` block to pass the
   controls as the macro body. See opportunities/_filter_controls.html
   for an end-to-end example.
#}
{%- macro filter_form(action, clear_href, signals, hidden=None) -%}
  {%- set _active_count = (signals | reject('equalto', '') | reject('equalto', None) | list | length) -%}
  <details class="audit-filter-details"{% if _active_count > 0 %} open{% endif %}>
    <summary class="audit-filter-summary flex items-center justify-between cursor-pointer select-none gap-2">
      <span class="flex items-center gap-2 text-sm font-medium text-slate-700 dark:text-slate-200">
        <svg class="w-4 h-4 audit-filter-chevron transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
        <span>Filters</span>
        {%- if _active_count > 0 %}
        <span class="ui-pill ui-pill-info text-sm">{{ _active_count }} active</span>
        {%- endif %}
      </span>
      {%- if _active_count > 0 %}
      <a href="{{ clear_href }}" class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-300 whitespace-nowrap" aria-label="Clear all filters">Clear filters</a>
      {%- endif %}
    </summary>

    <form method="get" action="{{ action }}" class="mt-4 grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
      {{ caller() }}
      {%- if hidden %}
        {%- for name, value in hidden.items() %}
      <input type="hidden" name="{{ name }}" value="{{ value or '' }}" />
        {%- endfor %}
      {%- endif %}
    </form>
  </details>

  <style>
    .audit-filter-details > summary { list-style: none; }
    .audit-filter-details > summary::-webkit-details-marker { display: none; }
    .audit-filter-details[open] .audit-filter-chevron { transform: rotate(90deg); }
  </style>

  <script>
    (function() {
      var form = document.currentScript.previousElementSibling.previousElementSibling.querySelector('form');
      if (!form || form.dataset.auditAutosubmit === 'true') return;
      form.dataset.auditAutosubmit = 'true';
      form.querySelectorAll('select').forEach(function(select) {
        select.addEventListener('change', function() { form.requestSubmit(); });
      });
    })();
  </script>
{%- endmacro %}