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

<ng-container *ngIf="secrets?.length == 0">
  <bit-no-items *ngIf="trash">
    <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
    <ng-container slot="description">{{ "secretsTrashNoItemsMessage" | i18n }}</ng-container>
  </bit-no-items>
  <bit-no-items *ngIf="!trash">
    <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
    <ng-container slot="description">{{ "secretsNoItemsMessage" | i18n }}</ng-container>
    <button
      type="button"
      slot="button"
      bitButton
      buttonType="secondary"
      (click)="newSecretEvent.emit()"
      [startIcon]="btnTextAddCreateFeatureFlag() ? null : 'bwi-plus'"
    >
      {{ (btnTextAddCreateFeatureFlag() ? "addSecret" : "newSecret") | i18n }}
    </button>
  </bit-no-items>
</ng-container>

<bit-table-scroll *ngIf="secrets?.length >= 1" [dataSource]="dataSource" [rowSize]="66">
  <ng-container header>
    <th bitCell class="tw-w-0">
      <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="projects" [fn]="sortProjects">{{ "project" | i18n }}</th>
    <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
    <th bitCell class="tw-w-0">
      <button
        type="button"
        bitIconButton="bwi-ellipsis-v"
        buttonType="primaryGhost"
        [label]="'options' | i18n"
        [bitMenuTriggerFor]="tableMenu"
      ></button>
    </th>
  </ng-container>
  <ng-template bitRowDef let-row>
    <td bitCell>
      <input
        type="checkbox"
        (change)="$event ? selection.toggle(row.id) : null"
        [checked]="selection.isSelected(row.id)"
      />
    </td>
    <td bitCell>
      <div class="tw-flex tw-items-center tw-gap-4 tw-break-all">
        <i class="bwi bwi-key tw-text-muted" aria-hidden="true"></i>
        <div>
          @if (!trash) {
            @if (row.decryptionError) {
              <span
                class="tw-cursor-pointer tw-text-warning tw-underline"
                role="button"
                tabindex="0"
                [title]="'clickToRenameSecret' | i18n"
                [attr.aria-label]="'clickToRenameSecret' | i18n"
                (click)="editSecret(row); $event.stopPropagation()"
                (keydown.enter)="editSecret(row); $event.stopPropagation()"
                (keydown.space)="editSecret(row); $event.stopPropagation(); $event.preventDefault()"
              >
                {{ row.name }}
                <i class="bwi bwi-pencil-square tw-ml-1" aria-hidden="true"></i>
              </span>
            }
            @if (!row.decryptionError) {
              <button type="button" bitLink (click)="editSecret(row)">
                {{ row.name }}
              </button>
            }
          }
          @if (trash) {
            {{ row.name }}
          }
          <div class="tw-text-sm tw-text-muted">
            {{ row.id }}
            <button
              type="button"
              bitIconButton="bwi-clone"
              buttonType="primaryGhost"
              size="small"
              [label]="'copyUuid' | i18n"
              (click)="copySecretUuidEvent.emit(row.id)"
            ></button>
          </div>
        </div>
      </div>
    </td>
    <td bitCell>
      <span
        *ngFor="let project of row.projects"
        bitBadge
        [variant]="project.decryptionError ? 'warning' : 'secondary'"
        class="tw-ms-1"
        [title]="project.decryptionError ? ('cannotDecryptProjectName' | i18n) : project.name"
        maxWidthClass="tw-max-w-60"
        [startIcon]="project.decryptionError ? 'bwi-exclamation-triangle' : null"
      >
        {{ project.name }}
      </span>

      <span *ngIf="row.projects.length === 0" bitBadge variant="warning" class="tw-ml-1">{{
        "unassigned" | i18n
      }}</span>
    </td>
    <td bitCell class="tw-whitespace-nowrap">{{ row.revisionDate | date: "medium" }}</td>
    <td bitCell>
      <button
        type="button"
        bitIconButton="bwi-ellipsis-v"
        buttonType="primaryGhost"
        [label]="'options' | i18n"
        [bitMenuTriggerFor]="secretMenu"
      ></button>
    </td>

    <bit-menu #secretMenu>
      <button type="button" bitMenuItem (click)="editSecret(row)" *ngIf="row.write && !trash">
        <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
        {{ "editSecret" | i18n }}
      </button>
      <button type="button" bitMenuItem (click)="copySecretNameEvent.emit(row.name)" *ngIf="!trash">
        <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
        {{ "copySecretName" | i18n }}
      </button>
      <button type="button" bitMenuItem (click)="copySecretValueEvent.emit(row.id)" *ngIf="!trash">
        <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
        {{ "copySecretValue" | i18n }}
      </button>
      <button type="button" bitMenuItem (click)="restoreSecretsEvent.emit([row.id])" *ngIf="trash">
        <i class="bwi bwi-fw bwi-refresh" aria-hidden="true"></i>
        {{ "restoreSecret" | i18n }}
      </button>
      <button
        type="button"
        bitMenuItem
        *ngIf="viewEventsAllowed$ | async as allowed"
        (click)="openEventsDialog(row)"
      >
        <i class="bwi bwi-fw bwi-billing" aria-hidden="true"></i>
        <span> {{ "viewEvents" | i18n }} </span>
      </button>
      <button
        type="button"
        bitMenuItem
        variant="danger"
        (click)="deleteSecretsEvent.emit([row])"
        *ngIf="row.write"
      >
        <bit-icon fixedWidth name="bwi-trash" slot="start" />
        {{ (trash ? "permanentlyDelete" : "deleteSecret") | i18n }}
      </button>
    </bit-menu>
  </ng-template>
</bit-table-scroll>

<bit-menu #tableMenu>
  <button type="button" bitMenuItem (click)="bulkRestoreSecrets()" *ngIf="trash">
    <bit-icon fixedWidth name="bwi-refresh" slot="start" />
    {{ "restoreSelected" | i18n }}
  </button>
  <button type="button" bitMenuItem variant="danger" (click)="bulkDeleteSecrets()">
    <bit-icon fixedWidth name="bwi-trash" slot="start" />
    {{ "deleteSecrets" | i18n }}
  </button>
</bit-menu>
