@if (!pointKey()) {
  <facebook-content-loader class="absolute w-full h-full p-4" [animate]="true" />
}

<div
  class="pac-story-bar py-2 shrink-0 flex-grow-0 flex flex-col justify-start items-center gap-2 z-20 overflow-hidden hover:overflow-auto transition-all duration-200"
  [class.opened]="sideMenuOpened()"
  >
  <button
    z-button
    zType="ghost"
    zSize="icon"
    zShape="circle"
    displayDensity="cosy"
    zTooltip="{{ 'PAC.Story.AutoRefresh' | translate: { Default: 'Auto Refresh' } }}"
    zPosition="right"
    z-menu
    [zMenuTriggerFor]="timerMenu"
    >
    <z-icon zType="update"></z-icon>
  </button>

  <button z-button zType="ghost" zSize="icon" zShape="circle" displayDensity="cosy" (click)="toggleFullscreen()">
    @if (fullscreen) {
      <z-icon
        zTooltip="{{ 'PAC.Story.ExitFullscreen' | translate: { Default: 'Exit Fullscreen' } }}"
        zPosition="right"
        zType="fullscreen_exit"
      ></z-icon>
    } @else {
      <z-icon
        zTooltip="{{ 'PAC.Story.Fullscreen' | translate: { Default: 'Fullscreen' } }}"
        zPosition="right"
        zType="fullscreen"
      ></z-icon>
    }
  </button>

  <button
    z-button
    zType="ghost"
    zSize="icon"
    zShape="circle"
    displayDensity="cosy"
    [class]="isPanMode() ? 'text-text-accent hover:text-text-accent' : ''"
    [zTooltip]="'Story.Toolbar.PanMode' | translate: { Default: 'Pan mode (Space)' }"
    zPosition="right"
    (click)="togglePanTool()"
    >
    <z-icon zType="pan_tool"></z-icon>
  </button>

  <button
    z-button
    zType="ghost"
    zSize="icon"
    zShape="circle"
    displayDensity="cosy"
    [zTooltip]="'Story.Toolbar.ZoomIn' | translate: { Default: 'Zoom In (+)' }"
    zPosition="right"
    (click)="zoomIn()"
    >
    <z-icon zType="zoom_in"></z-icon>
  </button>
  <button
    z-button
    zType="ghost"
    zSize="icon"
    zShape="circle"
    displayDensity="cosy"
    [cdkMenuTriggerFor]="scaleMenu"
    [cdkMenuPosition]="[{ originX: 'end', originY: 'center', overlayX: 'start', overlayY: 'center' }]"
    [zTooltip]="scale() ?? ('Story.Toolbar.Scale' | translate: { Default: 'Scale' })"
    zPosition="right"
    >
    <span class="text-xs"> {{ scale() }}% </span>
  </button>
  <button
    z-button
    zType="ghost"
    zSize="icon"
    zShape="circle"
    displayDensity="cosy"
    [zTooltip]="'Story.Toolbar.ZoomOut' | translate: { Default: 'Zoom Out (-)' }"
    zPosition="right"
    (click)="zoomOut()"
    >
    <z-icon zType="zoom_out"></z-icon>
  </button>
</div>

<div #sps class="relative flex-1 overflow-hidden">
  <pac-single-page-story tabindex="0" class="block w-full h-full" [story]="story$ | async" [pointKey]="pointKey()" />
  <ngm-drawer-trigger
    class="absolute -left-2 top-1/3 -translate-y-1/2 z-40"
    [(opened)]="sideMenuOpened"
    [zTooltip]="'PAC.Story.StoryToolbar' | translate: { Default: 'Story Toolbar' }"
    zPosition="right"
    />
</div>

<ng-template #timerMenu>
  <div z-menu-content class="ngm-density__compact ngm-menu-accent">
    <div class="px-4 py-2 text-xs uppercase">
      {{ 'PAC.KEY_WORDS.AutoRefresh' | translate: { Default: 'Auto Refresh' } }}
    </div>
    <button type="button" z-menu-item [class.selected]="!timer" (click)="timerUpdate(null)">
      @if (!timer) {
        <z-icon zSize="sm" zType="done"></z-icon>
      }
      {{ 'PAC.KEY_WORDS.Off' | translate: { Default: 'Off' } }}
    </button>
    @for (t of Schedulers; track t) {
      <button
        type="button"
        z-menu-item
        [class.selected]="timer === t"
        (click)="timerUpdate(t)"
        >
        @if (timer === t) {
          <z-icon zSize="sm" zType="done"></z-icon>
          }{{ t }}
          {{ 'PAC.KEY_WORDS.Minute' | translate: { Default: 'Minutes' } }}
        </button>
      }
    </div>
  </ng-template>

  <ng-template #scaleMenu>
    <div cdkMenu displayDensity="cosy">
      <button cdkMenuItem (click)="resetScalePan()">
        <z-icon zType="center_focus_strong"></z-icon>
        <span class="flex-1">
          {{ 'Story.Toolbar.Scale_Unset' | translate: { Default: 'Unset' } }}
        </span>

        <span class="text-sm font-bold ml-4"> Alt + Esc </span>
      </button>
      @for (item of StoryScales; track item.value) {
        <button
          cdkMenuItem
          class="pac-story-bar__scale-item group"
          [class.active]="scale() === item.value"
          (click)="setScale(item.value)"
          >
          <span
            class="pac-story-bar__scale-point inline-flex items-center justify-center w-2 h-2 ml-2 mr-4 text-xs font-semibold bg-components-list-option-active-bg rounded-full group-hover:bg-yellow-500"
            >
          </span>

          <span>{{ item.name }}</span>
        </button>
      }
    </div>
  </ng-template>