{# @description The list-view "filter" action: a button, with an applied-filter count badge, that opens a filter modal. #}
{# @prop label:text | default:"Filter" | description:"The button's text." #}
{# @prop icon:text | default:"filter" | description:"The button's icon." #}
{% load i18n %}
<c-vars label="{% trans "Filter" %}" icon="filter" />
{% if filter %}
  {% comment %}
    The badge's own z-index loses to the sticky app header's (#287).
    mvp/tailwind/base.css raises it, scoped to `.mvp-page-fill` — the one
    layout where nothing ever scrolls the badge toward the header.
  {% endcomment %}
  <c-indicator only>
    <c-slot name="items">
      {% if applied_filters %}
        <c-indicator.item class="badge badge-secondary badge-xs" only>{{ applied_filter_count }}</c-indicator.item>
      {% endif %}
    </c-slot>
    <c-button text="{{ label }}"
              icon="{{ icon }}"
              size="sm"
              @click="filterModal.showModal()" only />
  </c-indicator>
  <c-mvp.modal id="filterModal"
           title="{{ label }}"
           icon="{{ icon }}"
           only>
    <c-mvp.form id="filterForm"
            method="get"
            action="{{ action|default:"." }}"
            :form-obj="filter.form"
            only>
    </c-mvp.form>
    {% if clear_filters_url %}
      <c-slot name="footer">
        <c-button text="{% trans "Clear filters" %}"
                  href="{{ clear_filters_url }}"
                  icon="x"
                  ghost only />
      </c-slot>
    {% endif %}
    <c-slot name="footer_end">
      <c-button text="{% trans "Apply filters" %}"
                form="filterForm"
                size="lg"
                variant="primary"
                type="submit" only>
        <c-icon name="arrow-right" />
      </c-button>
    </c-slot>
  </c-mvp.modal>
{% endif %}