@if (items$ | async) {}
@if (requiredData$ | async) {}
@if (detail$ | async) {}
@if (saveResult$ | async) {}
@if (deleteResult$ | async) {}
@if (expirationNoticeChange$ | async) {}
@if (providers$ | async) {}
@if (beneficiaries$ | async) {}
@if (downloadDocResult$ | async) {}

<fast-window [layerLevel]="2" [height]="800 | winHeight" [width]="1600 | winWidth" [minWidth]="600" [minHeight]="200"
  (close)="closedClicked()" title="Collaterals">
  <fast-header [title]="(requiredData$ | async)?.productGroupName + ': ' + (requiredData$ | async)?.counterpartyName">
    <div class="flex flex-grow"></div>
    <fast-button class="flex flex-grow-0 flex-row mr-2" (click)="add()">
      <kendo-svg-icon [icon]="icons.plusIcon"></kendo-svg-icon>Add New
    </fast-button>
  </fast-header>
  <div class="flex flex-row flex-grow overflow-auto">
    <fast-grid [loading]="gridLoading$ | async" [data]="items$ | async" [pageable]="false"
      [sort]="[{ field: 'effectiveDate', dir: 'desc' }]" [sortable]="{mode: 'multiple'}" [filterable]="'menu, row'"
      [selectable]="selectableSettings" [selectedKeys]="mySelection" [gridBinding]="items$ | async"
      (cellClick)="edit($event.dataItem)" selectBy="creditLimitId">
      <fast-grid-col type="num-c0" field="collateralAmount" [width]="100" [title]="'Collateral Amount'" />
      <fast-grid-col type="text" field="collateralType" [width]="100" [title]="'Collateral Type'" />
      <fast-grid-col type="text" field="providers" [width]="300" [title]="'Providers'" />
      <fast-grid-col type="text" field="beneficiaries" [width]="300" [title]="'Beneficiaries'" />
      <fast-grid-col type="date-short" field="effectiveDate" [width]="100" [title]="'Effective Date'" />
      <fast-grid-col type="date-short" field="expirationDate" [width]="150" [title]="'Expiration Date'" />
      <fast-grid-col type="text" field="expirationNotice" [width]="150" [title]="'Expiration Notice'" />
      <fast-grid-col type="text" field="attachments" [width]="150" [title]="'Attachments'" />
      <fast-grid-col type="text" field="isAmendment" [width]="150" [title]="'Amendment'" />
    </fast-grid>
  </div>
</fast-window>
@if (detailOpened$ | async) {
<div>
  @if (detailOpened$ | async) {
  <fast-window title="Editor" [layerLevel]="3" (close)="onDetailClosing()" [height]="600 | winHeight"
    [width]="1000 | winWidth" [minWidth]="600" [minHeight]="300">
    @if (detail$ | async) {
    <form class="flex flex-col flex-grow overflow-hidden" [formGroup]="detailForm">
      @if (detailLoading$ | async) {
      <fast-spinner />
      }
      <form class="flex flex-col flex-grow overflow-hidden mx-2">
        <div class="flex flex-row">
          <div class="flex flex-col justify-start items-stretch flex-grow-0 mt-1 mx-2.5 mb-2">
            <fast-label class="mt-1.5">Amendment</fast-label>
            <fast-toggle class="w-16" formControlName="isAmendment" onLabel="yes" offLabel="no">
            </fast-toggle>
          </div>
          <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
            <fast-label class="mt-1.5">Collateral Amount</fast-label>
            <fast-numerictextbox class="inputFocusTarget" formControlName="collateralAmount" [format]="'c0'"
              [decimals]="0" [spinners]="false" [step]="1" />
          </div>
          <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
            <fast-label class="mt-1.5">Collateral Type</fast-label>
            <fast-combobox formControlName="collateralTypeId" [data]="collaterals$ | async" [valuePrimitive]="true"
              [textField]="'name'" [valueField]="'id'" (filterChange)="filterCollaterals$.next($event)"></fast-combobox>
          </div>
          <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
            <fast-label class="mt-1.5">Effective Date</fast-label>
            <fast-datepicker formControlName="effectiveDate" />
          </div>
          <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
            <div class="flex flex-grow justify-start basis-0">
              <fast-label class="mt-2.5">Expiration</fast-label>
              <fast-toggle class="w-16" formControlName="isExpirationNotice" onLabel="text" offLabel="date">
              </fast-toggle>
            </div>
            @if (!detailForm.get('isExpirationNotice').value) {
            <div class="flex flex-col flex-grow items-stretch justify-start basis-3/10">
              <fast-datepicker formControlName="expirationDate" />
            </div>
            }
            @if (detailForm.get('isExpirationNotice').value) {
            <div class="flex flex-col flex-grow items-stretch justify-start basis-3/10">
              <fast-textbox formControlName="expirationNotice" />
            </div>
            }
          </div>
        </div>
        <div class="flex flex-row">
          <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
            <fast-label>Providers</fast-label>
            <fast-multiselect formControlName="providerIds" [data]="providers$ | async" [textField]="'fullName'"
              [valueField]="'entityId'" [valuePrimitive]="true"
              (filterChange)="filterProviders$.next($event)"></fast-multiselect>
          </div>
          <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
            <fast-label>Beneficaries</fast-label>
            <fast-multiselect formControlName="beneficiaryIds" [data]="beneficiaries$ | async" [textField]="'fullName'"
              [valueField]="'entityId'" [valuePrimitive]="true"
              (filterChange)="filterBeneficiaries$.next($event)"></fast-multiselect>
          </div>
        </div>
        <div class="flex flex-row flex-grow overflow-hidden uploadSection">
          <div
            class="flex flex-col flex-grow items-stretch justify-start basis-3/10 mt-0.5 mx-2.5 mb-2 overflow-hidden fileDrop">
            <fast-label>Upload</fast-label>
            <fast-textbox class="invisible h-0" formControlName="attachments" />
            <fast-upload class="flex flex-col flex-grow" #docDiscountUploadTarget [chunkable]="{size: 10485760 }"
              [restrictions]="{ minFileSize: 1 }" [disabled]="(detailLoading$ | async)" [saveUrl]="docRateSaveUrl"
              [saveField]="'files'" (complete)="docComplete()" (success)="docFileUploadSuccess($event)"
              (errorEvent)="docUploadError($event)" select="Select Files..." dropFilesHere="Drop files here to upload">
            </fast-upload>
          </div>
          <div class="flex flex-col flex-grow items-stretch justify-start basis-3/10 mt-0.5 mx-2.5 mb-2 overflow-auto">
            <fast-label>Files</fast-label>
            <div class="flex flex-col flex-grow docFiles overflow-auto
            bg-white border-base-black-1000
            dark:bg-alt-gray-1000 dark:border-base-white-1000">
              @for (doc of (detailForm.controls['attachments'].value); track doc) {
              <div class="flex flex-row items-center">
                <div class="border-4 border-transparent hover:border-global-bar-light hover:rounded-md">
                  <div [fast-tip]="doc.fileNameOriginal" tipPosition="top"
                    class="flex flex-col flex-grow justify-start m-1 docName" (click)=" downloadFileDoc(doc)">
                    <div class="flex flex-col flex-grow overflow-hidden h-5.5">
                      <span class="flex flex-grow">{{doc.fileNameOriginal}}</span>
                    </div>
                  </div>
                </div>
                <div class="flex flex-col flex-grow-0 px-1 w-12 justify-center items-center mb-2">
                  <div class="p-1.5 hover:cursor-pointer hover:text-base-red-1000 active:text-alt-red-750 items-center"
                    (click)="removeFileDoc(doc)">
                    <kendo-svg-icon [icon]="icons.xIcon"></kendo-svg-icon>
                  </div>
                </div>
              </div>
              }
            </div>
          </div>
          <div class="flex flex-col flex-grow items-stretch justify-start basis-3/10 mt-0.5 mx-2.5 mb-2">
            <fast-label>Notes</fast-label>
            <fast-textarea class="flex flex-col flex-grow" formControlName="notes" [rows]="4"
              [maxLength]="1000"></fast-textarea>
          </div>
        </div>
      </form>
    </form>
    <fast-hr />
    <div class="flex flex-row bottomSection">
      <div class="flex flex-col flex-grow-0 items-stretch justify-start mt-1 mr-0 mb-2 ml-2.5">
        @if (detailForm.value.id !== 0) {
        <fast-button type="delete"
          [disabled]="(detailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission" (click)="delete()">
          <kendo-svg-icon [icon]="icons.trashIcon"></kendo-svg-icon>Delete
        </fast-button>
        }
      </div>
      <div class="flex flex-col flex-grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2"></div>
      <div class="flex flex-col flex-grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
        @if (detailForm.value.id !== 0) {
        <fast-button type="basic" [disabled]="(detailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission"
          (click)="save(util.SaveType.New)">
          <kendo-svg-icon [icon]="icons.saveIcon"></kendo-svg-icon>Save New
        </fast-button>
        }
      </div>
      <div class="flex flex-col flex-grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
        <fast-button type="primary"
          [disabled]="(detailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission"
          (click)="save(util.SaveType.Normal)">
          <kendo-svg-icon [icon]="icons.saveIcon"></kendo-svg-icon>Save
        </fast-button>
      </div>
      <div class="flex flex-col flex-grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
        <fast-button (click)="onDetailClosing()"><kendo-svg-icon
            [icon]="icons.cancelIcon"></kendo-svg-icon>Cancel</fast-button>
      </div>
    </div>

    }
  </fast-window>
  }
</div>
}