@if (items$ | async) {}
@if (requiredData$ | async) {}
@if (detail$ | async) {}
@if (saveResult$ | async) {}
@if (deleteResult$ | async) {}
@if (exportAction$ | async) {}
@if (loadingComplete$ | async) {}
@if (counterpartiesSelected$ | async) {}


<ng-template #tooltipGridTemplate let-anchor>
  @for (text of anchor.nativeElement.innerText.split(' • '); track text) {
  <div>
    <span>{{ text }}</span>
  </div>
  }
</ng-template>

<global-bar></global-bar>

<fast-header [title]="title$ | async">
  <div class="flex flex-row grow items-center justify-between my-1 ml-1">
    @if (hasModifyPermission) {
    <fast-button class="ml-2" (click)="add()">
      <fast-svg icon="plus" />Add New
    </fast-button>

    <fast-button [hidden]="exporting$ | async" (click)="export()" tabindex="-1">
      <fast-svg class="mr-1" icon="excelFile"></fast-svg>Export
    </fast-button>
    <fast-button [hidden]="(exporting$ |  async) === false" tabindex="-1">Exporting...<fast-spinner [position]="'relative'"></fast-spinner>
    </fast-button>

    }
  </div>
</fast-header>

<div class="flex flex-row grow overflow-auto">
  <fast-grid #grid="fast-grid" [loading]="gridLoading$ | async" [pageable]="true" [pageSize]="state.take" [skip]="state.skip" [sort]="state.sort"
    [sortable]="{mode: 'multiple'}" [filterable]="'menu, row'" [filter]="state.filter" [selectable]="selectableSettings" selectBy="Id"
    [selectedKeys]="mySelection" (dataStateChange)="dataStateChange($event)" [data]="items$ | async" (cellClick)="edit($event.dataItem)" [resizable]="true">
    <fast-grid-col type="text" field="DisplayName" [width]="200" [title]="'Display Name'"></fast-grid-col>
    <fast-grid-col type="text" field="ContactTypes" [width]="200" [title]="'Contact Types'"></fast-grid-col>
    <fast-grid-col type="text" field="ContactCounterparties" [width]="200" [title]="'Contact Counterparties'"></fast-grid-col>
    <fast-grid-col type="text" field="FullName" [width]="200" [title]="'Full Name'"></fast-grid-col>
    <fast-grid-col type="text" field="Title" [width]="200" [title]="'Title'"></fast-grid-col>
    <fast-grid-col type="text" field="City" [width]="100" [title]="'City'"></fast-grid-col>
    <fast-grid-col type="text" field="State" [width]="100" [title]="'State'"></fast-grid-col>
    <fast-grid-col type="text" field="Zip" [width]="100" [title]="'Zip'"></fast-grid-col>
    <fast-grid-col type="text" field="Country" [width]="100" [title]="'Country'"></fast-grid-col>
  </fast-grid>
</div>

@if (detailOpened$ | async) {
<fast-window title="Editor" (close)="onDetailClosing()" [width]="850" [height]="850" [minHeight]="400" [minWidth]="400">
  @if (detailLoading$ | async) {
  <fast-spinner></fast-spinner>
  }
  <form [formGroup]="detailForm" class="flex flex-col grow overflow-auto mx-2 space-y-4">
    <div class="flex flex-row mx-1">
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Display Name</fast-label>
        <fast-textbox formControlName="displayName"></fast-textbox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Full Name</fast-label>
        <fast-textbox formControlName="fullName"></fast-textbox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Title</fast-label>
        <fast-textbox formControlName="title"></fast-textbox>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Contact Type</fast-label>
        <fast-multiselect formControlName="contactTypeIds" [data]="(requiredData$ | async)?.contactTypes" [textField]="'name'" [valueField]="'id'"
          [listHeight]="300"></fast-multiselect>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Email</fast-label>
        <fast-textbox formControlName="email"></fast-textbox>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Office Phone</fast-label>
        <fast-textbox formControlName="officePhone"></fast-textbox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Cell Phone</fast-label>
        <fast-textbox formControlName="cellPhone"></fast-textbox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Alternate Phone</fast-label>
        <fast-textbox formControlName="altPhone"></fast-textbox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Fax</fast-label>
        <fast-textbox formControlName="fax"></fast-textbox>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col grow mr-3">
        <fast-label>Associated Counterparties</fast-label>
        <fast-combobox [data]="(requiredData$ | async)?.counterparties" [textField]="'name'" [valueField]="'id'" [valuePrimitive]="true"
          (selectionChange)="onCounterpartySelected($event)" [clearOnValueChange]="true"></fast-combobox>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col grow mr-3">
        <fast-label class="text-center">(drag to reorder)</fast-label>
      </div>
      <div
        fast-tip="This is the date that the contact left the counterparty.  If the contact is currently active with the counterparty then do not fill this in."
        class="flex flex-row grow mr-3">
        <fast-label>Inactive Date</fast-label>
        <fast-svg class="ml-2" size="14" icon="questionCircle"></fast-svg>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col mr-3">
        <fast-sortable [items]="localCounterpartiesSelected" (itemsChange)="localCounterpartiesSelected = $event" [itemTemplate]="counterpartyTpl"
          (orderChanged)="orderChanged()" />
        <ng-template #counterpartyTpl let-counterpartyOrderable="item">
          <div class="flex flex-row items-center gap-2 border rounded-md border-base-gray-500 p-2 mb-2 dark:border-alt-blue-250">
            <div class="grow overflow-hidden">
              <span class="truncate">{{getCounterpartyName(counterpartyOrderable.id)}}</span>
            </div>
            <div class="shrink-0">
              <fast-datepicker [class]="'flex w-30'" [value]="counterpartyOrderable.date"
                (valueChange)="inactiveDateChange(counterpartyOrderable.id, $event)"></fast-datepicker>
            </div>
            <div class="shrink-0 cursor-pointer flex items-center">
              <fast-svg [class]="'hover:text-red-500 cursor-pointer p-1'" icon="x" (click)="removeCounterparty(counterpartyOrderable.id)"></fast-svg>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col grow mr-3">
        <fast-label>Address Line 1</fast-label>
        <fast-textbox formControlName="addressLine1"></fast-textbox>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col grow mr-3">
        <fast-label>Address Line 2</fast-label>
        <fast-textbox formControlName="addressLine2"></fast-textbox>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>City</fast-label>
        <fast-textbox formControlName="city"></fast-textbox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>State</fast-label>
        <fast-combobox formControlName="stateId" [data]="(requiredData$ | async)?.states" [textField]="'name'" [valueField]="'id'"></fast-combobox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Zip</fast-label>
        <fast-textbox formControlName="zip"></fast-textbox>
      </div>
      <div class="flex flex-col flex-1 mr-3">
        <fast-label>Country</fast-label>
        <fast-combobox formControlName="countryId" [data]="(requiredData$ | async)?.countries" [textField]="'name'" [valueField]="'id'"></fast-combobox>
      </div>
    </div>
    <div class="flex flex-row mx-1">
      <div class="flex flex-col grow mr-3">
        <fast-label>Notes</fast-label>
        <fast-textarea formControlName="notes" [rows]="4" maxlength="1000"></fast-textarea>
      </div>
    </div>
    <div class="flex grow"></div>

  </form>
  <fast-hr class="mb-0"></fast-hr>

  <div class="flex flex-row my-2 mx-2 justify-between">
    @if (detailForm.value.id!== 0) {
    <fast-button tabindex="-1" [disabled]="(detailLoading$ | async) || hasModifyPermission === false" (click)="delete()" type="delete">
      <fast-svg icon="trash"></fast-svg>Delete
    </fast-button>
    }

    <div class="flex flex-row gap-2.5">
      <fast-button [disabled]="(detailLoading$ | async) || hasModifyPermission === false" (click)="save(util.SaveType.Normal)">
        <fast-svg icon="save"></fast-svg>Save
      </fast-button>
      <fast-button [disabled]="(detailLoading$ | async) || hasModifyPermission === false" (click)="save(util.SaveType.New)">
        <fast-svg icon="fileAdd"></fast-svg>Save New
      </fast-button>
      <fast-button [disabled]="detailLoading$ | async" (click)="onDetailClosing()">
        <fast-svg icon="cancel"></fast-svg>Cancel
      </fast-button>
    </div>
  </div>
</fast-window>
}