{% load i18n %}
<tr class="nsm-rules-head-row nsm-rules-head-row--filter">
  {% if show_selection_column %}
  <th scope="col" class="nsm-rules-th nsm-rules-th--filter w-1"></th>
  {% endif %}
  {% for col in filter_columns %}
    <th scope="col" class="nsm-rules-th nsm-rules-th--filter">
      {% if forloop.last and show_filter_actions %}
      <div class="nsm-sync-filter-cell d-flex gap-1 align-items-center">
        <div class="nsm-rules-filter-field flex-grow-1{% if col.filter_value %} nsm-rules-filter-field--has-value{% endif %}">
          <input type="search"
                 class="form-control form-control-sm nsm-rules-filter-input"
                 form="{{ quicksearch_form_id }}"
                 name="{{ col.param }}"
                 value="{{ col.filter_value }}"
                 placeholder="{% trans 'Search: a OR b … a AND b' %}"
                 title="{% trans 'Search: a OR b … a AND b' %}"
                 autocomplete="off"
                 aria-label="{{ col.label }}">
          <button type="button"
                  class="nsm-rules-filter-clear"
                  tabindex="-1"
                  title="{% trans 'Clear filter' %}"
                  aria-label="{% trans 'Clear filter' %}">
            <i class="mdi mdi-close" aria-hidden="true"></i>
          </button>
        </div>
        <div class="nsm-rules-filter-actions d-flex gap-1 flex-shrink-0">
          <button type="button"
                  class="btn btn-sm btn-primary nsm-sync-filter-apply"
                  title="{% trans 'Apply filters' %}">
            <i class="mdi mdi-magnify" aria-hidden="true"></i>
          </button>
          {% if filter_active %}
          <a href="{{ clear_filters_url }}"
             class="btn btn-sm btn-outline-secondary"
             title="{% trans 'Clear filters' %}">
            <i class="mdi mdi-filter-off-outline" aria-hidden="true"></i>
          </a>
          {% endif %}
        </div>
      </div>
      {% else %}
      <div class="nsm-rules-filter-field{% if col.filter_value %} nsm-rules-filter-field--has-value{% endif %}">
        <input type="search"
               class="form-control form-control-sm nsm-rules-filter-input"
               form="{{ quicksearch_form_id }}"
               name="{{ col.param }}"
               value="{{ col.filter_value }}"
               placeholder="{% trans 'Search: a OR b … a AND b' %}"
               title="{% trans 'Search: a OR b … a AND b' %}"
               autocomplete="off"
               aria-label="{{ col.label }}">
        <button type="button"
                class="nsm-rules-filter-clear"
                tabindex="-1"
                title="{% trans 'Clear filter' %}"
                aria-label="{% trans 'Clear filter' %}">
          <i class="mdi mdi-close" aria-hidden="true"></i>
        </button>
      </div>
      {% endif %}
    </th>
  {% endfor %}
  {% if show_fix_column %}
  <th scope="col" class="nsm-rules-th nsm-rules-th--filter w-1"></th>
  {% endif %}
</tr>