<app-organization-free-trial-warning
  [organization]="organization"
  (clicked)="navigateToPaymentMethod()"
>
</app-organization-free-trial-warning>
<app-header [title]="organizationName">
  <sm-new-menu></sm-new-menu>
</app-header>

<div *ngIf="!loading && view$ | async as view; else spinner">
  <app-onboarding
    *ngIf="showOnboarding"
    [title]="'getStartedWithSecretsManager' | i18n"
    [subtitle]="'smOnboardingChecklistSubtitle' | i18n"
    startIcon="bwi-cli"
    (dismiss)="hideOnboarding()"
  >
    <app-onboarding-task
      [title]="'createMachineAccount' | i18n"
      [ctaText]="'smOnboardingCreateMachineAccountCta' | i18n"
      ctaIcon="bwi-cli"
      (ctaClick)="openServiceAccountDialog()"
      [completed]="view.tasks.createServiceAccount"
    >
      {{ "downloadThe" | i18n }}
      <a
        bitLink
        href="https://bitwarden.com/help/secrets-manager-cli/"
        target="_blank"
        rel="noreferrer"
        >{{ "smCLI" | i18n }}</a
      >
    </app-onboarding-task>
    <app-onboarding-task
      *ngIf="userIsAdmin"
      [title]="'createProject' | i18n"
      [subtitle]="'smOnboardingCreateProjectSubtitle' | i18n"
      [ctaText]="'smOnboardingCreateProjectCta' | i18n"
      ctaIcon="bwi-collection"
      (ctaClick)="openNewProjectDialog()"
      [completed]="view.tasks.createProject"
    ></app-onboarding-task>
    <app-onboarding-task
      *ngIf="userIsAdmin"
      [title]="'importSecrets' | i18n"
      [subtitle]="'smOnboardingImportSecretsSubtitle' | i18n"
      [ctaText]="'importSecrets' | i18n"
      ctaIcon="bwi-download"
      [route]="['settings', 'import']"
      [completed]="view.tasks.importSecrets"
    ></app-onboarding-task>
    <app-onboarding-task
      *ngIf="view.tasks.createProject"
      [title]="'createSecret' | i18n"
      [subtitle]="'smOnboardingCreateSecretSubtitle' | i18n"
      [ctaText]="'smOnboardingCreateSecretCta' | i18n"
      ctaIcon="bwi-key"
      (ctaClick)="openSecretDialog()"
      [completed]="view.tasks.createSecret"
    ></app-onboarding-task>
  </app-onboarding>

  <div class="tw-mt-6 tw-flex tw-flex-col tw-gap-6">
    <sm-section>
      <div *ngIf="view.allProjects.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
        {{ "showingPortionOfTotal" | i18n: view.latestProjects.length : view.counts.projects }}
        <a bitLink routerLink="projects" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
      </div>
      <h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "projects" | i18n }}</h2>
      <sm-projects-list
        (newProjectEvent)="openNewProjectDialog()"
        (editProjectEvent)="openEditProject($event)"
        (deleteProjectEvent)="openDeleteProjectDialog($event)"
        [projects]="view.latestProjects"
      ></sm-projects-list>
    </sm-section>
    <sm-section>
      <div *ngIf="view.allSecrets.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
        {{ "showingPortionOfTotal" | i18n: view.latestSecrets.length : view.counts.secrets }}
        <a bitLink routerLink="secrets" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
      </div>
      <h2 slot="summary" class="tw-mb-0" bitTypography="h2" noMargin>{{ "secrets" | i18n }}</h2>
      <sm-secrets-list
        baseRoute="secrets"
        (deleteSecretsEvent)="openDeleteSecret($event)"
        (newSecretEvent)="openNewSecretDialog()"
        (editSecretEvent)="openEditSecret($event)"
        (viewSecretEvent)="openViewSecret($event)"
        (copySecretNameEvent)="copySecretName($event)"
        (copySecretValueEvent)="copySecretValue($event)"
        (copySecretUuidEvent)="copySecretUuid($event)"
        [secrets]="view.latestSecrets"
      ></sm-secrets-list>
    </sm-section>
  </div>
</div>

<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>
