{% load i18n %}
<c-vars label="{% trans "Filter" %}" icon="filter" />
{% if filter %}
  {% comment %}
    The applied-filter badge is a daisyUI indicator-item (#287): positioned
    outside the button's own box, half above its top edge. Under the app
    header — sticky, z-index: 10, with a backdrop filter — the badge's own
    z-index: 1 loses that comparison and the top half is drawn behind it.

    mvp/tailwind/base.css raises the badge's z-index, scoped to
    `.mvp-page-fill`: the one layout where nothing ever scrolls the badge
    toward the header, so the fix cannot reintroduce the problem it was
    scoped to avoid — a badge riding above the header as an ordinary,
    scrolling page passes underneath it.
  {% 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 }}"
              small
              @click="filterModal.showModal()" />
  </div>
  <c-modal id="filterModal"
           title="{{ label }}"
           icon="{{ icon }}"
           fade
           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
                large
                variant="primary"
                type="submit" />
    </c-slot>
  </c-modal>
{% endif %}