<ng-container *ngIf="!hide">
  <div class="filter-heading">
    <h2>
      <button
        type="button"
        class="toggle-button"
        [attr.aria-expanded]="!isCollapsed(foldersGrouping)"
        aria-controls="folder-filters"
        (click)="toggleCollapse(foldersGrouping)"
      >
        <i
          class="bwi bwi-fw"
          aria-hidden="true"
          [ngClass]="{
            'bwi-angle-right': isCollapsed(foldersGrouping),
            'bwi-angle-down': !isCollapsed(foldersGrouping),
          }"
        ></i>
        &nbsp;{{ foldersGrouping.name | i18n }}
      </button>
    </h2>
    <button
      type="button"
      class="add-button"
      (click)="addFolder()"
      appA11yTitle="{{ 'addFolder' | i18n }}"
    >
      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
    </button>
  </div>
  <ul id="folder-filters" class="filter-options" *ngIf="!isCollapsed(foldersGrouping)">
    <ng-template #recursiveFolders let-folders>
      <li
        *ngFor="let f of folders"
        [ngClass]="{
          active: f.node.id === activeFilter.selectedFolderId && activeFilter.selectedFolder,
        }"
        class="filter-option"
      >
        <span class="filter-buttons">
          <button
            type="button"
            class="toggle-button"
            *ngIf="f.children.length"
            (click)="toggleCollapse(f.node)"
            appA11yTitle="{{ 'toggleCollapse' | i18n }} {{ f.node.name }}"
            [attr.aria-expanded]="!isCollapsed(f.node)"
            [attr.aria-controls]="f.node.name + '_children'"
          >
            <i
              class="bwi bwi-fw"
              aria-hidden="true"
              [ngClass]="{
                'bwi-angle-right': isCollapsed(f.node),
                'bwi-angle-down': !isCollapsed(f.node),
              }"
            ></i>
          </button>
          <button
            type="button"
            class="filter-button"
            (click)="applyFilter(f.node)"
            [attr.aria-pressed]="
              activeFilter.selectedFolder && f.node.id === activeFilter.selectedFolderId
            "
          >
            <i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
            &nbsp;{{ f.node.name }}
          </button>
          <button
            type="button"
            class="edit-button"
            *ngIf="f.node.id"
            (click)="editFolder(f.node)"
            appA11yTitle="{{ 'editFolder' | i18n }}: {{ f.node.name }}"
          >
            <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
          </button>
        </span>
        <ul
          [id]="f.node.name + '_children'"
          class="nested-filter-options"
          *ngIf="f.children.length && !isCollapsed(f.node)"
        >
          <ng-container *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }">
          </ng-container>
        </ul>
      </li>
    </ng-template>
    <ng-container
      *ngTemplateOutlet="recursiveFolders; context: { $implicit: nestedFolders }"
    ></ng-container>
  </ul>
</ng-container>
