@if (favorites$ | async) {<ng-container></ng-container> }
@if ((saveFavoritesResult$ | async) === null) {<ng-container></ng-container> }
@if ((addFavoriteResult$ | async) === null) {<ng-container></ng-container> }

<div class="favorites t-bg-color1" [class.isOverlay]="isOverlay">
  <button kendoTooltip class="k-button addFav" (click)="addFavorite()" [disabled]="favoritesLoading$ | async"
    title="Add this page to favorites">
    <kendo-svg-icon [icon]="icons.starIcon"></kendo-svg-icon>
  </button>
  <div [hidden]="(favoritesLoading$ | async) === false" class="k-i-loading-lg"></div>
  @if (localFavorites.length === 0) {
  <div [hidden]="favoritesLoading$ | async" class="col-g leftBuffer topBuffer">
    <span>No favorites yet.</span>
  </div>
  }
  @if(localFavorites.length > 0) {
  <kendo-sortable [hidden]="favoritesLoading$ | async" class="favoritesSortable" [kendoSortableBinding]="localFavorites"
    [navigatable]="true" [animation]="false" itemClass="favoriteOrderable" activeItemClass="favoriteOrderableActive"
    (dragStart)="favoriteDragStart()" (dragEnd)="favoriteDragEnd($event)">
    <ng-template let-favoriteOrderable="item">
      <div [hover-class]="'t-bg-hover2'" class="row-g hideOverflow">
        <div class="rowItem-g hideOverflow" (click)="favoriteClick(favoriteOrderable)" [title]="favoriteOrderable.name"
          [active-class]="'t-text-active2'">
          <span class="fakeLink">{{favoriteOrderable.name}}</span>
        </div>
        <div class="rowItem-rc removeFavorite" (click)="removeFavorite(favoriteOrderable.id)"
          [hover-class]="'t-text-hover2'">
          <kendo-svg-icon [icon]="icons.xIcon"></kendo-svg-icon>
        </div>
      </div>
    </ng-template>
  </kendo-sortable>
  }
</div>