{% from "button/macro.njk" import govukButton %}

<div class="hmcts-filter">

  <div class="hmcts-filter__header">

    <div class="hmcts-filter__header-title">
      <h2 class="govuk-heading-m">{{ params.heading.html | safe if params.heading.html else params.heading.text }}</h2>
    </div>

    <div class="hmcts-filter__header-action">
      {# <button class="hmcts-filter__close" type="button">Close</button> #}
    </div>

  </div>

  <div class="hmcts-filter__content">

    {% if params.selectedFilters %}

      <div class="hmcts-filter__selected">

        <div class="hmcts-filter__selected-heading">

          <div class="hmcts-filter__heading-title">
            <h2 class="govuk-heading-m">{{ params.selectedFilters.heading.html | safe if params.selectedFilters.heading.html else params.selectedFilters.heading.text }}</h2>
          </div>

          <div class="hmcts-filter__heading-action">
            <p><a class="govuk-link govuk-link--no-visited-state" href="{{params.selectedFilters.clearLink.href}}">{{params.selectedFilters.clearLink.text}}</a></p>
          </div>

        </div>

        {% for category in params.selectedFilters.categories %}
          <h3 class="govuk-heading-s govuk-!-margin-bottom-0">{{ category.heading.html | safe if category.heading.html else category.heading.text }}</h3>

          <ul class="hmcts-filter-tags">
            {% for item in category.items %}
              <li><a class="hmcts-filter__tag" href="{{item.href}}"><span class="govuk-visually-hidden">Remove this filter</span> {{item.text}}</a></li>
            {% endfor %}
          </ul>
        {% endfor %}

      </div>
    {% endif %}

    <div class="hmcts-filter__options">

      {{ govukButton({
        text: 'Apply filters'
      }) }}

      {{params.optionsHtml | safe}}

    </div>

  </div>

</div>