<popup-page [hideOverflow]="showSkeletonsLoaders$ | async">
  <popup-header slot="header" [pageTitle]="'send' | i18n">
    <ng-container slot="end">
      <tools-new-send-dropdown *ngIf="!sendsDisabled"></tools-new-send-dropdown>
      <app-pop-out></app-pop-out>
      <app-current-account></app-current-account>
    </ng-container>
  </popup-header>
  <ng-container slot="above-scroll-area">
    <bit-callout *ngIf="sendsDisabled" [title]="'sendDisabled' | i18n">
      {{ "sendDisabledWarning" | i18n }}
    </bit-callout>
    <ng-container *ngIf="listState !== sendState.Empty">
      <tools-send-search></tools-send-search>
      <app-send-list-filters></app-send-list-filters>
    </ng-container>
  </ng-container>

  <div
    *ngIf="listState === sendState.Empty"
    class="tw-flex tw-flex-col tw-h-full tw-justify-center"
  >
    <bit-no-items [icon]="noItemIcon" class="tw-text-main">
      <ng-container slot="title">{{ "sendsTitleNoItems" | i18n }}</ng-container>
      <ng-container slot="description">
        <p bitTypography="body2" class="tw-mx-6 tw-mt-2">{{ "sendsBodyNoItems" | i18n }}</p>
      </ng-container>
      <tools-new-send-dropdown
        [hideIcon]="true"
        *ngIf="!sendsDisabled"
        slot="button"
        [buttonType]="'secondary'"
      ></tools-new-send-dropdown>
    </bit-no-items>
  </div>

  <ng-container *ngIf="listState !== sendState.Empty && !(showSkeletonsLoaders$ | async)">
    <div
      *ngIf="listState === sendState.NoResults"
      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>
    <app-send-list-items-container [headerText]="title | i18n" [sends]="sends$ | async" />
  </ng-container>
  @if (showSkeletonsLoaders$ | async) {
    <vault-fade-in-out-skeleton>
      <vault-loading-skeleton></vault-loading-skeleton>
    </vault-fade-in-out-skeleton>
  }
</popup-page>
