<ng-container *ngIf="show">
  <div class="filter-heading">
    <h2>
      <button
        type="button"
        class="no-btn"
        [attr.aria-expanded]="!isCollapsed(collectionsGrouping)"
        aria-controls="collection-filters"
        (click)="toggleCollapse(collectionsGrouping)"
      >
        <i
          class="bwi bwi-fw"
          aria-hidden="true"
          [ngClass]="{
            'bwi-angle-right': isCollapsed(collectionsGrouping),
            'bwi-angle-down': !isCollapsed(collectionsGrouping)
          }"
        ></i>
        &nbsp;{{ collectionsGrouping.name | i18n }}
      </button>
    </h2>
  </div>
  <ul id="collection-filters" *ngIf="!isCollapsed(collectionsGrouping)" class="filter-options">
    <ng-template #recursiveCollections let-collections>
      <li
        class="filter-option"
        *ngFor="let c of collections"
        [ngClass]="{ active: c.node.id === activeFilter.selectedCollectionId }"
      >
        <span class="filter-buttons">
          <button
            type="button"
            *ngIf="c.children.length"
            class="toggle-button"
            [attr.aria-expanded]="!isCollapsed(c.node)"
            [attr.aria-controls]="c.node.name + '_children'"
            (click)="toggleCollapse(c.node)"
            appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ c.node.name }}"
          >
            <i
              class="bwi bwi-fw"
              aria-hidden="true"
              [ngClass]="{
                'bwi-angle-right': isCollapsed(c.node),
                'bwi-angle-down': !isCollapsed(c.node)
              }"
            ></i>
          </button>
          <button
            type="button"
            class="filter-button"
            (click)="applyFilter(c.node)"
            [attr.aria-pressed]="c.node.id === activeFilter.selectedCollectionId"
            [title]="c.node.name"
          >
            <i
              *ngIf="c.children.length === 0"
              class="bwi bwi-fw bwi-collection"
              aria-hidden="true"
            ></i>
            &nbsp;{{ c.node.name }}
          </button>
        </span>
        <ul
          [id]="c.node.name + '_children'"
          class="nested-filter-options"
          *ngIf="c.children.length && !isCollapsed(c.node)"
        >
          <ng-container
            *ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
          >
          </ng-container>
        </ul>
      </li>
    </ng-template>
    <ng-container
      *ngTemplateOutlet="recursiveCollections; context: { $implicit: nestedCollections }"
    >
    </ng-container>
  </ul>
</ng-container>
