@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 mat-icon-button displayDensity="cosy" matTooltip="{{ 'PAC.Story.AutoRefresh' | translate: {Default: 'Auto Refresh'} }}" matTooltipPosition="right"
        [matMenuTriggerFor]="timerMenu">
        <mat-icon fontSet="material-icons-outlined">update</mat-icon>
    </button>

    <button mat-icon-button displayDensity="cosy" (click)="toggleFullscreen()">
      @if (fullscreen) {
        <mat-icon fontSet="material-icons-outlined"
            matTooltip="{{ 'PAC.Story.ExitFullscreen' | translate: {Default: 'Exit Fullscreen'} }}"
            matTooltipPosition="right">fullscreen_exit</mat-icon>
      } @else {
        <mat-icon fontSet="material-icons-outlined"
            matTooltip="{{ 'PAC.Story.Fullscreen' | translate: {Default: 'Fullscreen'} }}"
            matTooltipPosition="right">fullscreen</mat-icon>
      }
    </button>

    <button mat-icon-button displayDensity="cosy"
        [color]="isPanMode() ? 'accent' : ''"
        [matTooltip]="'Story.Toolbar.PanMode' | translate: {Default: 'Pan mode (Space)'}"
        matTooltipPosition="after"
        (click)="togglePanTool()">
        <mat-icon fontSet="material-icons-outlined">pan_tool</mat-icon>
    </button>

    <button mat-icon-button displayDensity="cosy"
        [matTooltip]="'Story.Toolbar.ZoomIn' | translate: {Default: 'Zoom In (+)'}"
        matTooltipPosition="after"
        (click)="zoomIn()">
        <mat-icon fontSet="material-icons-outlined">zoom_in</mat-icon>
    </button>
    <button mat-icon-button displayDensity="cosy"
        [cdkMenuTriggerFor]="scaleMenu"
        [cdkMenuPosition]="[{
            originX: 'end',
            originY: 'center',
            overlayX: 'start',
            overlayY: 'center'
        }]"
        [matTooltip]="scale() ?? ('Story.Toolbar.Scale' | translate: {Default: 'Scale'})"
        matTooltipPosition="after"
    >
        <span class="text-xs">
            {{ scale() }}%
        </span>
    </button>
    <button mat-icon-button displayDensity="cosy"
        [matTooltip]="'Story.Toolbar.ZoomOut' | translate: {Default: 'Zoom Out (-)'}"
        matTooltipPosition="after"
        (click)="zoomOut()">
        <mat-icon fontSet="material-icons-outlined">zoom_out</mat-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"
        [matTooltip]="'PAC.Story.StoryToolbar' | translate: {Default: 'Story Toolbar'}"
        matTooltipPosition="after" />
</div>


<mat-menu #timerMenu="matMenu" class="ngm-density__compact mat-color-accent">
    <div class="text-xs uppercase px-4 py-2">
        {{ 'PAC.KEY_WORDS.AutoRefresh' | translate: {Default: 'Auto Refresh'} }}
    </div>
    <button mat-menu-item (click)="timerUpdate(null)">
        <mat-icon *ngIf="!timer" class="ngm-density__compact">done</mat-icon> {{ 'PAC.KEY_WORDS.Off' | translate: {Default: 'Off'} }}
    </button>
    <button mat-menu-item *ngFor="let t of Schedulers" (click)="timerUpdate(t)">
        <mat-icon *ngIf="timer===t" class="ngm-density__compact">done</mat-icon>{{t}} {{ 'PAC.KEY_WORDS.Minute' | translate: {Default: 'Minutes'} }}
    </button>
</mat-menu>

<ng-template #scaleMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem (click)="resetScalePan()">
            <mat-icon>center_focus_strong</mat-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-gray-200 rounded-full group-hover:bg-yellow-500">
            </span>
            
            <span>{{item.name}}</span>
        </button>
      }
    </div>
</ng-template>