@if (showFilterButton) {
  <button
    class="button -small advanced-filters--toggle"
    (click)="wpFiltersService.toggleVisibility()"
    [class.-active]="visible$ | async"
    >
    <i class="button--icon icon-filter"></i>
    <span class="button--text" [textContent]="filterButtonText"></span>
  </button>
}

<div
  class="work-packages--filters-optional-container"
  [ngClass]="{ '-loaded': loaded }"
  >
  @if (visible$ | async) {
    <div
      id="query_form_content"
      class="hide-when-print"
      >
      @if (!!filters) {
        <op-query-filters [filters]="filters"
          [showCloseFilter]="true"
          (filtersChanged)="replaceIfComplete($event)"
         />
      }
    </div>
  }
</div>