@if (favorites$ | async) {}
@if ((saveFavoritesResult$ | async) === null) {}
@if ((addFavoriteResult$ | async) === null) {}

<div class="favorites flex flex-col grow overflow-auto border-l border-l-solid h-full
  bg-base-white-250
  dark:bg-alt-gray-1000
  text-base-black-1000
  dark:text-base-white-250">
  <fast-button class="my-1 mx-2 w-auto" fast-tip="Add this page to favorites" tipPosition="bottom" tabindex="-1" (click)="addFavorite()"
    [disabled]="favoritesLoading$ | async">
    <fast-svg icon="star" fillColor="currentColor" />
  </fast-button>
  <div [hidden]="(favoritesLoading$ | async) === false" class="relative flex grow">
    <fast-spinner [hasOverlay]="false" [size]="80" position="absolute" />
  </div>
  @if (localFavorites.length === 0) {
  <div [hidden]="favoritesLoading$ | async" class="flex flex-col grow ml-2 mt-2">
    <span>No favorites yet.</span>
  </div>
  }
  @if(localFavorites.length > 0) {
  <kendo-sortable class="flex flex-col z-auto" [hidden]="favoritesLoading$ | async" class="w-full" [kendoSortableBinding]="localFavorites"
    activeItemClass="favoriteOrderableActive" [navigable]="true" [animation]="false" (dragStart)="favoriteDragStart()" (dragEnd)="favoriteDragEnd($event)">
    <ng-template let-favoriteOrderable="item">
      <div [hover-class]="'t-bg-hover2'" class="
      flex flex-row grow overflow-hidden h-10 right-0 cursor-pointer
      hover:bg-base-white-1000
      dark:hover:bg-alt-blue-250">
        <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-1 mr-2 mb-2 ml-2 overflow-hidden" (click)="favoriteClick(favoriteOrderable)"
          [title]="favoriteOrderable.name" [active-class]="'t-text-active2'">
          <span class="pl-2.5 underline cursor-pointer">{{favoriteOrderable.name}}</span>
        </div>
        <div class="flex flex-col grow-0 items-end justify-center mt-1 mr-2 mb-2 ml-0" (click)="removeFavorite(favoriteOrderable.id)"
          [hover-class]="'t-text-hover2'">
          <fast-svg class="text-lg cursor-pointer
          hover:text-red-500
          active:text-red-800
          active:hover:text-red-800" icon="x" />
        </div>
      </div>
    </ng-template>
  </kendo-sortable>
  }
</div>