@if (detail$ | async) {}
@if (saveResult$ | async) {}
@if (downloadDocResult$ | async) {}

<fast-window [layerLevel]="2" [height]="600 | winHeight" [width]="1400 | winWidth" [minWidth]="600" [minHeight]="200"
  (close)="closedClicked()" title="Approval Documents">
  @if (detail$ | async) {
  <form class="flex flex-col flex-grow overflow-hidden mx-2" [formGroup]="detailForm">
    @if (detailLoading$ | async) { <fast-spinner />}
    <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="documents" />
        <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['documents'].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>
  <fast-hr />
  <div class="flex flex-row bottomSection">
    <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">
      <fast-button type="primary" [disabled]="detailLoading$ | async" (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 [disabled]="detailLoading$ | async" (click)="onDetailClosing()"><kendo-svg-icon
          [icon]="icons.cancelIcon"></kendo-svg-icon>Cancel</fast-button>
    </div>
  </div>

  }
</fast-window>