<ng-container *ngIf="{ project: project$ | async, secrets: secrets$ | async } as projectSecrets">
  <ng-container *ngIf="projectSecrets?.secrets && projectSecrets?.project; else spinner">
    <div
      *ngIf="projectSecrets.secrets?.length > 0 && projectSecrets.project?.write"
      class="float-right tw-mt-3 tw-items-center"
    >
      <button type="button" bitButton buttonType="secondary" (click)="openNewSecretDialog()">
        <i class="bwi bwi-plus" aria-hidden="true"></i>
        {{ "newSecret" | i18n }}
      </button>
    </div>
    <sm-secrets-list
      *ngIf="projectSecrets.secrets?.length > 0 || projectSecrets.project?.write; else contactAdmin"
      (deleteSecretsEvent)="openDeleteSecret($event)"
      (newSecretEvent)="openNewSecretDialog()"
      (editSecretEvent)="openEditSecret($event)"
      (copySecretNameEvent)="copySecretName($event)"
      (copySecretValueEvent)="copySecretValue($event)"
      [secrets]="projectSecrets.secrets"
    ></sm-secrets-list>
  </ng-container>
</ng-container>

<ng-template #spinner>
  <div 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-template>

<ng-template #contactAdmin>
  <bit-no-items>
    <ng-container slot="title">{{ "secretsNoItemsTitle" | i18n }}</ng-container>
    <ng-container slot="description">{{ "smProjectSecretsNoItemsNoAccess" | i18n }}</ng-container>
  </bit-no-items>
</ng-template>
