<popup-page>
  <popup-header slot="header" [pageTitle]="'folders' | vfo1I18n: 'myFolders'" showBackButton>
    <ng-container slot="end">
      <button
        bitButton
        size="small"
        buttonType="primary"
        type="button"
        (click)="openAddEditFolderDialog()"
        startIcon="bwi-plus"
      >
        {{ "new" | i18n }}
      </button>
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  @if (folders$ | async; as folders) {
    @if (folders.length) {
      <bit-item-group>
        @for (folder of folders; track folder.id) {
          <bit-item>
            <bit-item-content>
              {{ folder.name }}
              <button
                slot="end"
                type="button"
                (click)="openAddEditFolderDialog(folder)"
                [label]="'editFolderWithName' | i18n: folder.name"
                bitIconButton="bwi-pencil-square"
                class="tw-self-end"
                data-testid="edit-folder-button"
              ></button>
            </bit-item-content>
          </bit-item>
        }
      </bit-item-group>
    } @else {
      <bit-no-items [icon]="NoFoldersIcon" class="tw-h-full tw-flex tw-items-center">
        <ng-container slot="title">{{ "noFoldersAdded" | i18n }}</ng-container>
        <ng-container slot="description">{{ "createFoldersToOrganize" | i18n }}</ng-container>
        <button
          bitButton
          buttonType="primary"
          type="button"
          slot="button"
          (click)="openAddEditFolderDialog()"
          data-testid="empty-new-folder-button"
          startIcon="bwi-plus"
        >
          {{ "newFolder" | i18n }}
        </button>
      </bit-no-items>
    }
  }
</popup-page>
