<header>
  <div class="left">
    <button type="button" routerLink="/tabs/settings">
      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "folders" | i18n }}</span>
  </h1>
  <div class="right">
    <button type="button" (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
    </button>
  </div>
</header>
<main tabindex="-1">
  <ng-container *ngIf="folders$ | async as folders">
    <div class="box list full-list" *ngIf="folders.length; else noFoldersTemplate">
      <div class="box-content">
        <button
          type="button"
          appStopClick
          (click)="folderSelected(f)"
          class="box-content-row padded"
          *ngFor="let f of folders"
        >
          {{ f.name }}
        </button>
      </div>
    </div>
  </ng-container>
  <ng-template #noFoldersTemplate>
    <div class="no-items">
      <p>{{ "noFolders" | i18n }}</p>
    </div>
  </ng-template>
</main>
