@if (unfetched$ | async) {
  <facebook-content-loader class="absolute w-full h-full dark:opacity-20"
    [animate]="true">
  </facebook-content-loader>
}

@switch (point.type) {
  @case(STORY_POINT_TYPE.Responsive) {
    @if (responsive$ | async; as responsive) {
        <ngm-flex-layout class="ngm-story-point__responsive" 
            [editable]="editable()"
            [flexLayout]="responsive">
        </ngm-flex-layout>
    }
  }
  @default {
    <div class="ngm-story-point__page"
        [ngStyle]="scaleStyles$ | async"
        [ngClass]="{
            'ngm-story-point__size-continuous-height': point.styling?.pageSize?.type === 'fixed' && point.styling?.pageSize?.continuousHeight,
            'ngm-story-point__size-a4': point.styling?.pageSize?.type === 'fixed' && point.styling?.pageSize?.size === 'A4',
            'ngm-story-point__size-a3': point.styling?.pageSize?.type === 'fixed' && point.styling?.pageSize?.size === 'A3'
        }"
        resizeObserver [resizeDebounceTime]="100" (sizeChange)="onResize($event)"
        [cdkContextMenuTriggerFor]="context_menu"
    >
      @if (gridOptions$ | async; as options) {
        <gridster class="ngm-story__layout" [options]="options" (contextmenu)="onGridContextmenu($event)" >
          @for (widget of widgets$ | async; track widget.key) {
            <gridster-item class="ngm-story__widget group"
                [item]="widget.position"
                [ngStyle]="{'z-index': widget.key === currentWidgetKey() ? maxLayerIndex : widget.position.layerIndex}"
                [class.editable]="editable()"
                [class.active]="widget.key === currentWidgetKey()"
                [class.ngm-fullscreen]="widget.fullscreen"
                [class.ngm-story__focus]="focus === widget.key"
                (itemChange)="onGridsterItemChange($event, widget)"
                (click)="onWidgetItemClick($event, widget, widgetComponent)"
            >
                <ngm-story-widget #widgetComponent
                    [selected]="widget.key === currentWidgetKey()"
                    [editable]="editable()"
                    [key]="widget.key"
                    (fullscreenChange)="onFullscreenChange($event, widget);"
                    (focusChange)="onFocus(widget.key)"
                    (selectedChange)="onWidgetSelected(widget, widgetComponent)"
                />
                <!-- <div *ngIf="editable" class="ngm-drag-handler"></div> -->
                <div *ngIf="editable() && (resizingWidgetKey === widget.key || !resizingWidgetKey)" class="ngm-story__layout-widget-size absolute -top-6 right-0 text-xs font-semibold py-1 px-2 rounded text-gray-600 bg-orange-200 last:mr-0 mr-1 hidden group-hover:inline-block"
                    [class.ngm-story__layout-widget-size-show]="resizingWidgetKey === widget.key"
                >
                    {{widget.position.cols}}x{{widget.position.rows}}
                </div>
            </gridster-item>
          }
        </gridster>
      }

    </div>
  }
}

@if (quickStart$ | async;) {
    <div class="ngm-story-point__quick-start absolute top-0 left-0 w-full h-full flex justify-center items-center z-10">
        <div class="container relative p-12 mx-8 rounded-xl flex flex-col justify-center items-center">
            <button mat-icon-button style="position: absolute;" class="absolute right-1 top-1" (click)="closeQuickStart()">
                <mat-icon>close</mat-icon>
            </button>
            
            <span class="text-6xl font-notoColorEmoji">🛒</span>
            <div class="text-lg my-2">
                {{ 'Story.StoryPoint.LookingEmpty' | translate: {Default: 'This story point is looking empty'} }}.
            </div>
            <div class="text-sm">
                {{ 'Story.StoryPoint.LookingEmptyAddWidget' | translate: {Default: 'Add a widget to start'} }}!
            </div>
        
            <div class="flex flex-wrap justify-between gap-4 mt-4">
                <div class="ngm-story__quick-start-widget" (click)="createWidget(ComponentType.AnalyticalCard)">
                    {{ 'Story.Widget.AnalyticalCard' | translate: {Default: 'Chart'} }}
                </div>
                <div class="ngm-story__quick-start-widget" (click)="createWidget(ComponentType.AnalyticalGrid)">
                    {{ 'Story.Widget.AnalyticalGrid' | translate: {Default: 'Table'} }}
                </div>
                <div class="ngm-story__quick-start-widget" (click)="createWidget(ComponentType.InputControl)">
                    {{ 'Story.Widget.InputControl' | translate: {Default: 'Input Control'} }}
                </div>
                <div class="ngm-story__quick-start-widget" (click)="createWidget(ComponentType.KpiCard)">
                    {{ 'Story.Widget.KpiCard' | translate: {Default: 'KPI'} }}
                </div>
            </div>
        </div>
    </div>
}

<ng-template #defaultTemplate let-widget let-laneKey="laneKey" let-editable="editable" let-selected="selected">
    <ngm-story-widget [key]="widget.key" [laneKey]="laneKey" [editable]="editable" [selected]="selected" style="width: 100%;height: 100%;"/>
</ng-template>

<ng-template #context_menu>
    <div cdkMenu>
        <button cdkMenuItem *ngIf="!point.hidden" (click)="hidePage()">
            <mat-icon>flip_to_back</mat-icon>
            {{ 'Story.Story.Hidden' | translate: {Default: "Hidden"} }}
        </button>
        <button cdkMenuItem *ngIf="point.hidden" (click)="showPage()">
            <mat-icon>flip_to_front</mat-icon>
            {{ 'Story.Story.Visiable' | translate: {Default: "Visiable"} }}
        </button>
        <button cdkMenuItem (click)="openShare()">
            <mat-icon fontSet="material-icons-outlined">share</mat-icon>
            {{ 'Story.Story.Share' | translate: {Default: "Share"} }}
        </button>
        <ng-container *ngIf="editable()">
            <mat-divider></mat-divider>

            <button cdkMenuItem (click)="openEditAttributes()">
                <mat-icon fontSet="material-icons-outlined">edit_attributes</mat-icon>
                {{ 'Story.Widget.EditAttributes' | translate: {Default: "Edit Attributes"} }}
            </button>

            <button cdkMenuItem [disabled]="isFirst" (click)="move('left')">
                <mat-icon>chevron_left</mat-icon>
                {{ 'Story.Story.MOVE_LEFT' | translate: {Default: "Move Left"} }}
            </button>
            <button cdkMenuItem [disabled]="isLast" (click)="move('right')">
                <mat-icon>chevron_right</mat-icon>
                {{ 'Story.Story.MOVE_RIGHT' | translate: {Default: "Move Right"} }}
            </button>
            <button cdkMenuItem [disabled]="isFirst" (click)="move('first')">
                <mat-icon>first_page</mat-icon>
                {{ 'Story.Story.MOVE_FIRST' | translate: {Default: "Move First"} }}
            </button>
            <button cdkMenuItem [disabled]="isLast" (click)="move('last')">
                <mat-icon>last_page</mat-icon>
                {{ 'Story.Story.MOVE_LAST' | translate: {Default: "Move Last"} }}
            </button>
            <button cdkMenuItem (click)="rename()">
                <mat-icon fontSet="material-icons-outlined">drive_file_rename_outline</mat-icon>
                {{ 'Story.Story.Rename' | translate: {Default: "Rename"} }}
            </button>
            <button cdkMenuItem (click)="duplicate()">
                <mat-icon>content_copy</mat-icon>
                {{ 'Story.Story.Duplicate' | translate: {Default: "Duplicate"} }}
            </button>

            <button cdkMenuItem *ngIf="isCopyWidgetSelected$ | async as isCopyWidgetSelected"
                (click)="isCopyWidgetSelected?pasteWidget():''">
                <mat-icon fontSet="material-icons-outlined">content_paste</mat-icon>
                {{ 'Story.Story.Paste' | translate: {Default: "Paste"} }}
            </button>
            
            <button cdkMenuItem (click)="fileUpload.click()">
                <mat-icon fontSet="material-icons-outlined">file_upload</mat-icon>
                {{ 'Story.Story.Upload' | translate: {Default: "Upload"} }}
            </button>

            <mat-divider></mat-divider>
            <button cdkMenuItem class="ngm-cdk-menu__danger" (click)="remove()">
                <mat-icon>delete_forever</mat-icon>
                {{ 'Story.Story.Delete' | translate: {Default: "Delete"} }}
            </button>
        </ng-container>
    </div>
</ng-template>

<input #fileUpload type="file" hidden multiple (change)="onUploadChange($event)"
    (click)="fileUpload.value=null;">