{% set filterChips = chips|default([]) %}

{% if filterChips|length > 0 %}
  <div class="border-t border-ui-border bg-secondary-50/60 px-4 py-3 sm:px-6">
    <div class="flex flex-wrap items-center gap-2">
      <span class="badge badge-info" aria-label="{{ 'filter.active'|trans }}: {{ filterChips|length }}">
        {{ 'filter.active'|trans }}: {{ filterChips|length }}
      </span>

      <div class="flex min-w-0 flex-1 flex-wrap gap-2" role="list" aria-label="{{ 'filter.active'|trans }}">
        {% for chip in filterChips %}
          <a
            href="{{ chip.url }}"
            class="inline-flex min-h-10 max-w-full items-center gap-2 rounded-full border border-ui-border bg-white px-3 py-2 text-sm text-secondary-700 transition-colors hover:border-primary-300 hover:bg-primary-50 hover:text-primary-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 motion-reduce:transition-none"
            role="listitem"
            title="{{ chip.label }}: {{ chip.value }}"
            aria-label="{{ 'filter.clear'|trans }}: {{ chip.label }} {{ chip.value }}"
          >
            <span class="min-w-0 truncate"><span class="font-semibold">{{ chip.label }}:</span> {{ chip.value }}</span>
            <svg class="h-4 w-4 flex-none" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </a>
        {% endfor %}
      </div>

      <a href="{{ clear_url }}" class="btn btn-ghost btn-sm flex-none">
        {{ 'filter.clear'|trans }}
      </a>
    </div>
  </div>
{% endif %}