<div *ngIf="!projects" class="tw-items-center tw-justify-center tw-pt-64 tw-text-center">
  <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
</div>

<bit-no-items *ngIf="projects?.length == 0">
  <ng-container slot="title">{{ "projectsNoItemsTitle" | i18n }}</ng-container>
  <ng-container slot="description">{{ "projectsNoItemsMessage" | i18n }}</ng-container>
  <button
    type="button"
    slot="button"
    bitButton
    buttonType="secondary"
    (click)="newProjectEvent.emit()"
    [startIcon]="btnTextAddCreateFeatureFlag() ? null : 'bwi-plus'"
  >
    {{ (btnTextAddCreateFeatureFlag() ? "addProject" : "newProject") | i18n }}
  </button>
</bit-no-items>

<bit-table *ngIf="projects?.length >= 1" [dataSource]="dataSource">
  <ng-container header>
    <tr>
      <th bitCell class="tw-w-0" *ngIf="showMenus">
        <input
          type="checkbox"
          (change)="$event ? toggleAll() : null"
          [checked]="selection.hasValue() && isAllSelected()"
          [indeterminate]="selection.hasValue() && !isAllSelected()"
          [attr.aria-label]="'selectAll' | i18n"
        />
      </th>
      <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
      <th bitCell bitSortable="revisionDate" *ngIf="showMenus">{{ "lastEdited" | i18n }}</th>
      <th
        bitCell
        class="tw-w-0"
        [ngClass]="{ 'tw-invisible': !(hasWriteAccessOnSelected$ | async) }"
      >
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="primaryGhost"
          [bitMenuTriggerFor]="tableMenu"
          [label]="'options' | i18n"
          *ngIf="showMenus"
        ></button>
      </th>
    </tr>
  </ng-container>
  <ng-template body let-rows$>
    <tr bitRow *ngFor="let project of rows$ | async">
      <td bitCell *ngIf="showMenus">
        <input
          type="checkbox"
          (change)="$event ? selection.toggle(project.id) : null"
          [checked]="selection.isSelected(project.id)"
        />
      </td>
      <td bitCell>
        <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
          <i class="bwi bwi-collection tw-text-muted" aria-hidden="true"></i>
          <div>
            <span
              *ngIf="project.decryptionError"
              class="tw-cursor-pointer tw-text-warning tw-underline"
              role="button"
              tabindex="0"
              [title]="'clickToRenameProject' | i18n"
              [attr.aria-label]="'clickToRenameProject' | i18n"
              (click)="editProjectEvent.emit(project.id); $event.stopPropagation()"
              (keydown.enter)="editProjectEvent.emit(project.id); $event.stopPropagation()"
              (keydown.space)="
                editProjectEvent.emit(project.id); $event.stopPropagation(); $event.preventDefault()
              "
            >
              {{ project.name }}
              <i class="bwi bwi-pencil-square tw-ml-1" aria-hidden="true"></i>
            </span>
            <a
              *ngIf="!project.decryptionError && project.linkable"
              bitLink
              [routerLink]="['/sm', project.organizationId, 'projects', project.id]"
            >
              {{ project.name }}
            </a>
            <span *ngIf="!project.decryptionError && !project.linkable">{{ project.name }}</span>
            <div class="tw-text-sm tw-text-muted tw-block">
              {{ project.id }}
              <button
                type="button"
                bitIconButton="bwi-clone"
                buttonType="primaryGhost"
                size="small"
                [label]="'copyUuid' | i18n"
                (click)="copyProjectUuidToClipboard(project.id)"
              ></button>
            </div>
          </div>
        </div>
      </td>
      <td bitCell class="tw-whitespace-nowrap" *ngIf="showMenus">
        {{ project.revisionDate | date: "medium" }}
      </td>
      <td bitCell>
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="primaryGhost"
          [bitMenuTriggerFor]="projectMenu"
          [label]="'options' | i18n"
          *ngIf="showMenus"
        ></button>
      </td>
      <bit-menu #projectMenu>
        <a bitMenuItem [routerLink]="['/sm', project.organizationId, 'projects', project.id]">
          <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
          {{ "viewProject" | i18n }}
        </a>
        <button
          *ngIf="project.write"
          type="button"
          bitMenuItem
          (click)="editProjectEvent.emit(project.id)"
        >
          <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
          {{ "editProject" | i18n }}
        </button>
        <button
          type="button"
          bitMenuItem
          *ngIf="viewEventsAllowed$ | async as allowed"
          (click)="openEventsDialog(project)"
        >
          <i class="bwi bwi-fw bwi-billing" aria-hidden="true"></i>
          <span> {{ "viewEvents" | i18n }} </span>
        </button>
        <button
          *ngIf="project.write"
          type="button"
          bitMenuItem
          variant="danger"
          (click)="deleteProject(project.id)"
        >
          <bit-icon fixedWidth name="bwi-trash" slot="start" />
          {{ "deleteProject" | i18n }}
        </button>
      </bit-menu>
    </tr>
  </ng-template>
</bit-table>

<bit-menu #tableMenu>
  <button type="button" bitMenuItem variant="danger" (click)="bulkDeleteProjects()">
    <bit-icon fixedWidth name="bwi-trash" slot="start" />
    {{ "deleteProjects" | i18n }}
  </button>
</bit-menu>
