@if(saveItemResult$ | async) {}
@if(deleteItemResult$ | async) {}
@if(items$ | async) {}

<global-bar></global-bar>

<div class="flex flex-col flex-grow overflow-hidden h-full">
  <fast-header [title]="title$ | async">
    <div class="flex flex-grow-0 items-stretch justify-start flex-row ml-2 mr-0">
      <fast-button (click)="addItem()"><kendo-svg-icon class="fileIconMouseOver icon-extension"
          [icon]="icons.plusIcon"></kendo-svg-icon>Add New</fast-button>
    </div>
    <div class="flex flex-row flex-grow"></div>
  </fast-header>
  <fast-grid class="h-full" (cellClick)="editClick($event)" [data]="gridData" [sort]="state.sort"
    [sortable]="{mode: 'multiple'}" [filter]="state.filter" [filterable]="'menu, row'" [loading]="loading"
    (dataStateChange)="dataStateChange($event)">
    <fast-grid-col type="text" field="name" [width]="200" [title]="'Name'" />
  </fast-grid>
</div>

@if(editorOpened){<div class="k-overlay"></div>}
@if(((itemDetail$ | async) || {})) {
<ng-container>
  @if(editorOpened){
  <fast-window title="Editor" (close)="editorOpened=false" [width]="400 | winWidth" [height]="200" [minWidth]="400"
    [minHeight]="150">
    <div [hidden]="(editorLoading$ | async) === false" class="k-i-loading-lg"></div>
    <form [formGroup]="formEditor" class="flex flex-grow flex-col overflow-auto">
      <div class="flex flex-row flex-grow-0 basis-0 mt-2.5">
        <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2">
          <fast-label>Name</fast-label>
          <div class="flex flex-col flex-grow items-stretch justify-start basis-3/10">
            <fast-textbox class="inputFocusTarget" formControlName="name" />
          </div>
        </div>
      </div>
    </form>
    <fast-hr />
    <div class="flex flex-row flex-grow-0 pt-3">
      <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0 mr-2 mb-2 ml-2">
        @if (formEditor.value.id !== 0) {
        <fast-button type="delete" [tabindex]="-1" [disabled]="editorLoading$ | async"
          (click)="deleteItem()"><kendo-svg-icon [icon]="icons.trashIcon"></kendo-svg-icon>Delete</fast-button>
        }
      </div>
      <div class="flex flex-grow-0 items-stretch justify-end flex-col mt-0 mb-2 ml-2 px-2">
        <fast-button type="primary" [disabled]="editorLoading$ | async" (click)="saveItem()"><kendo-svg-icon
            [icon]="icons.saveIcon"></kendo-svg-icon>Save</fast-button>
      </div>
      <div class="flex flex-grow-0 items-stretch justify-end flex-col mt-0 mr-2 mb-2">
        <fast-button [disabled]="editorLoading$ | async" (click)="editorOpened=false"><kendo-svg-icon
            [icon]="icons.cancelIcon"></kendo-svg-icon>Cancel</fast-button>
      </div>
    </div>

  </fast-window>
  }
</ng-container>
}
@else {
<ng-template #loadingTemplate>
  @if(editorOpened){
  <fast-window title="Editor" (close)="editorOpened=false" [width]="850 | winWidth" [minWidth]="400" [minHeight]="150">
    <div class="k-i-loading-lg"></div>
  </fast-window>
  }
</ng-template>
}

<div kendoDialogContainer></div>