@if (requiredData$ | async) {}
@if (meterTypes$ | async) {}
@if (sourcePipes$ | async) {}
@if (sourceZones$ | async) {}
@if (deliveryPointNames$ | async) {}
@if (sourcePointNames$ | async) {}
@if (plantNames$ | async) {}
@if (refreshSourcePointsForPipe$ | async) {}
@if (refreshDeliveryPointsForPipe$ | async) {}
@if (refreshSourceZonesForPipe$ | async) {}
@if (detail$ | async) {}
@if (deliveryPipeChanged| async) {}
@if (sourcePipeChanged | async) {}
@if (saveResult$ | async) {}
@if (deleteResult$ | async) {}

<fast-window [title]="'Meter Product - ' + this.productName" [height]="600 | winHeight" [width]="925 | winWidth" [minWidth]="600" [minHeight]="400"
  (close)="onDetailClosing()" [layerLevel]="2">
  @if (productDetailLoading$ | async) {
  <fast-spinner></fast-spinner>
  }
  @if (detail$) {
  <form class="flex flex-col grow overflow-auto mx-2" [formGroup]="productDetailForm">
    <div class="flex flex-row topBuffer">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Meter Type</fast-label>
        <fast-combobox formControlName="meterTypeId" [data]="meterTypes$ | async" [textField]="'name'" [valueField]="'id'" [valuePrimitive]="true"
          (filterChange)="filterMeterTypes$.next($event)"></fast-combobox>
      </div>
      <div class="flex flex-col items-stretch justify-center mt-0.5 mx-2.5 mb-2">
        <fast-label>Upstream</fast-label>
        <fast-toggle formControlName="isUpstream" onLabel="yes" offLabel="no"></fast-toggle>
      </div>
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Effective Date</fast-label>
        <fast-datepicker class="w-30" formControlName="effectiveDate" [min]="util.minDate"></fast-datepicker>
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Meter Number</fast-label>
        <fast-textbox formControlName="number" />
      </div>
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Hub Code</fast-label>
        <fast-textbox formControlName="hubCode" />
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Source Pipe</fast-label>
        <fast-combobox formControlName="sourcePipeId" [data]="sourcePipes$ | async" [textField]="'pipeName'" [valueField]="'pipeId'" [valuePrimitive]="true"
          (filterChange)="filterSourcePipes$.next($event)"></fast-combobox>
      </div>
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Source Zone</fast-label>
        <fast-combobox formControlName="sourceZoneId" [data]="sourceZones$ | async" [textField]="'zoneName'" [valueField]="'zoneId'" [valuePrimitive]="true"
          (filterChange)="filterSourceZones$.next($event)"></fast-combobox>
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Source Points</fast-label>
        <fast-multiselect formControlName="sourcePointIds" [data]="sourcePointNames$ | async" [textField]="'pointName'" [valueField]="'pointId'"
          [valuePrimitive]="true" (filterChange)="filterSourcePoints$.next($event)"></fast-multiselect>
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Delivery Points</fast-label>
        <fast-multiselect formControlName="deliveryPointIds" [data]="deliveryPointNames$ | async" [textField]="'pointName'" [valueField]="'pointId'"
          [valuePrimitive]="true" (filterChange)="filterDeliveryPoints$.next($event)"></fast-multiselect>
      </div>
    </div>
    <div class="flex flex-row">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Plants</fast-label>
        <fast-multiselect formControlName="plantIds" [data]="plantNames$ | async" [textField]="'name'" [valueField]="'id'"
          [valuePrimitive]="true"></fast-multiselect>
      </div>
    </div>
    <div class="flex flex-row grow">
      <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2">
        <fast-label>Pipeline Meter Description</fast-label>
        <fast-textarea class="flex flex-col grow" formControlName="description" [rows]="2" [maxLength]="1000"></fast-textarea>
      </div>
    </div>
  </form>
  }

  <fast-hr />
  <div class="flex flex-row bottomSection">
    <div class="flex flex-col grow-0 items-stretch justify-start mt-1 mr-0 mb-2 ml-2.5">
      @if (productDetailForm.value.id !== 0) {
      <fast-button type="delete" [disabled]="(productDetailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission" (click)="delete()">
        <fast-svg icon="trash" />Delete
      </fast-button>
      }
    </div>
    <div class="flex flex-col grow items-stretch justify-center basis-3/10 mt-0.5 mx-2.5 mb-2"></div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      @if (productDetailForm.value.id !== 0) {
      <fast-button type="basic" [disabled]="(productDetailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission" (click)="save(util.SaveType.New)">
        <fast-svg icon="save" />Save New
      </fast-button>
      }
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <fast-button type="primary" [disabled]="(productDetailLoading$ | async) || !(requiredData$ | async)?.hasModifyPermission"
        (click)="save(util.SaveType.Normal)">
        <fast-svg icon="save" />Save
      </fast-button>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <fast-button (click)="onDetailClosing()">
        <fast-svg icon="cancel" />Cancel</fast-button>
    </div>
  </div>
</fast-window>