{# @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 %}
  <div class="indicator">
    {% if applied_filters %}
      <span class="indicator-item badge badge-secondary badge-xs">{{ applied_filter_count }}</span>
    {% endif %}
    <c-button text="{{ label }}"
              icon="{{ icon }}"
              size="sm"
              @click="filterModal.showModal()" />
  </div>
  <c-modal id="filterModal"
           title="{{ label }}"
           icon="{{ icon }}"
           only>
    <c-form id="filterForm"
            method="get"
            action="{{ action|default:"." }}"
            :form-obj="filter.form"
            only>
    </c-form>
    {% if clear_filters_url %}
      <c-slot name="footer">
        <c-button text="{% trans "Clear filters" %}"
                  href="{{ clear_filters_url }}"
                  icon="x"
                  ghost />
      </c-slot>
    {% endif %}
    <c-slot name="footer_end">
      <c-button text="{% trans "Apply filters" %}"
                form="filterForm"
                icon="arrow-right"
                reverse
                size="lg"
                variant="primary"
                type="submit" />
    </c-slot>
  </c-modal>
{% endif %}