<popup-page [hideOverflow]="showSkeletonsLoaders$ | async">
  <popup-header slot="header" [pageTitle]="'vault' | i18n">
    <ng-container slot="end">
      <app-new-item-dropdown
        [initialValues]="newItemItemValues$ | async"
        [canCreateCipher]="(canCreateCipher$ | async) ?? true"
      ></app-new-item-dropdown>

      <app-pop-out></app-pop-out>
      <app-current-account></app-current-account>
    </ng-container>
  </popup-header>

  @if (vaultState === VaultStateEnum.Empty) {
    <vault-fade-in-out>
      <div class="tw-flex tw-flex-col tw-h-full tw-justify-center">
        <bit-no-items [icon]="vaultIcon">
          <ng-container slot="title">{{ "yourVaultIsEmpty" | i18n }}</ng-container>
          <ng-container slot="description">
            <p bitTypography="body2" class="tw-mx-6 tw-mt-2">
              {{ "emptyVaultDescription" | i18n }}
            </p>
          </ng-container>
          <a
            slot="button"
            bitButton
            buttonType="secondary"
            [routerLink]="['/add-cipher']"
            [queryParams]="{ prefillNameAndURIFromTab: true }"
          >
            {{ "newLogin" | i18n }}
          </a>
        </bit-no-items>
      </div>
    </vault-fade-in-out>
  }

  @if (vaultState !== VaultStateEnum.Empty) {
    <blocked-injection-banner slot="full-width-notice"></blocked-injection-banner>
  }

  @if (vaultState !== VaultStateEnum.Empty) {
    <fill-assist-active-banner slot="full-width-notice"></fill-assist-active-banner>
  }

  <!-- Show search & filters outside of the scroll area of the page -->
  <ng-container slot="above-scroll-area">
    @if (showPremiumSpotlight$ | async) {
      <bit-callout
        [title]="'unlockAdvancedSecurity' | i18n"
        [icon]="null"
        (dismiss)="dismissVaultNudgeSpotlight(NudgeType.PremiumUpgrade)"
      >
        {{ "unlockAdvancedSecurityDesc" | i18n }}
        <button
          slot="end"
          bitButton
          type="button"
          buttonType="primary"
          (click)="showPremiumDialog()"
        >
          {{ "explorePremium" | i18n }}
        </button>
      </bit-callout>
    }
    @if (vaultState === VaultStateEnum.Empty && showEmptyVaultSpotlight$ | async) {
      <bit-callout
        [title]="'emptyVaultNudgeTitle' | i18n"
        [icon]="null"
        (dismiss)="dismissVaultNudgeSpotlight(NudgeType.EmptyVaultNudge)"
      >
        {{ "emptyVaultNudgeBody" | i18n }}
        <button
          slot="end"
          bitButton
          type="button"
          buttonType="primary"
          (click)="navigateToImport()"
        >
          {{ "emptyVaultNudgeButton" | i18n }}
        </button>
      </bit-callout>
    }
    @if (vaultState === VaultStateEnum.Empty) {
      <vault-organization-user-notifications
        class="-tw-mx-5 -tw-mt-3 tw-flex tw-flex-col tw-px-2 tw-mb-3"
      ></vault-organization-user-notifications>
    } @else {
      <!-- At-Risk callout displays as a banner and should always remain visually above all other callouts -->
      <vault-at-risk-password-callout></vault-at-risk-password-callout>
      <vault-organization-user-notifications
        class="-tw-mx-5 -tw-mt-3 tw-flex tw-flex-col tw-px-2 tw-mb-3"
      ></vault-organization-user-notifications>

      @if (showHasItemsVaultSpotlight$ | async) {
        <div class="tw-mb-4">
          <bit-callout
            [title]="'hasItemsVaultNudgeTitle' | i18n"
            [icon]="null"
            (dismiss)="dismissVaultNudgeSpotlight(NudgeType.HasVaultItems)"
          >
            <ul class="tw-pl-4 tw-text-main tw-mb-0" bitTypography="body2">
              <li>{{ "hasItemsVaultNudgeBodyOne" | i18n }}</li>
              <li>{{ "hasItemsVaultNudgeBodyTwo" | i18n }}</li>
              <li>{{ "hasItemsVaultNudgeBodyThree" | i18n }}</li>
            </ul>
          </bit-callout>
        </div>
      }
      <app-vault-header></app-vault-header>
    }
  </ng-container>

  @if (vaultState !== VaultStateEnum.Empty) {
    @if (vaultState === VaultStateEnum.NoResults) {
      <div class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12">
        <bit-no-items [icon]="noResultsIcon">
          <ng-container slot="title">{{ "noItemsMatchSearch" | i18n }}</ng-container>
          <ng-container slot="description">{{ "clearFiltersOrTryAnother" | i18n }}</ng-container>
        </bit-no-items>
      </div>
    }

    <!-- For better consistency with screen readers, the role/aria needs to be on an element that isn't dynamic by @if -->
    <div role="status" aria-live="polite">
      @if (vaultState === VaultStateEnum.DeactivatedOrg) {
        <div class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12">
          <bit-no-items [icon]="deactivatedIcon">
            <ng-container slot="title">
              {{ "organizationIsDeactivated" | i18n }}
            </ng-container>
            <ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
          </bit-no-items>
        </div>
      }
    </div>

    @if (vaultState === null) {
      <vault-fade-in-out>
        @if (!(loading$ | async)) {
          <!--If there is search text fold all the filtered ciphers into one container-->
          @if (hasSearchText$ | async) {
            <app-vault-list-items-container
              [title]="'searchResults' | i18n"
              [ciphers]="(filteredCiphers$ | async) || []"
              id="allItems"
              disableSectionMargin
              collapsibleKey="allItems"
            ></app-vault-list-items-container>
          } @else {
            <app-autofill-vault-list-items></app-autofill-vault-list-items>
            <app-vault-list-items-container
              [title]="'favorites' | i18n"
              [ciphers]="(favoriteCiphers$ | async) || []"
              id="favorites"
              collapsibleKey="favorites"
            ></app-vault-list-items-container>
            <!--Change the title header when a filter is applied-->
            <app-vault-list-items-container
              [title]="((numberOfAppliedFilters$ | async) === 0 ? 'allItems' : 'items') | i18n"
              [ciphers]="(filteredCiphers$ | async) || []"
              id="allItems"
              disableSectionMargin
              collapsibleKey="allItems"
            ></app-vault-list-items-container>
          }
        }
      </vault-fade-in-out>
    }
  }

  @if (showSkeletonsLoaders$ | async) {
    <vault-fade-in-out-skeleton>
      <vault-loading-skeleton></vault-loading-skeleton>
    </vault-fade-in-out-skeleton>
  }
</popup-page>
