@if (requiredData$ | async) {}
@if (invoice$ | async) {}
@if (saveResult$ | async) {}
@if (deleteResult$ | async) {}
@if (taxRate$ | async) {}
@if (pipelines$ | async) {}
@if (dealNums$ | async) {}
@if (downloadInvoiceResult$ | async) {}
@if (matchingInvoiceResult$ | async) {}
@if (regenerateHeadersResult$ | async) {}
@if (regenerateLinesResult$ | async) {}
@if (reviseResult$ | async) {}

<fast-window #windowElem [width]="1400 | winWidth" [height]="800 | winHeight" (widthChange)="setDynamicColumnWidth()" (stateChange)="setDynamicColumnWidth()"
  [minWidth]="1100" [state]="'maximized'" (close)="closed.emit()" [titlebarContent]="windowTitlebar" (resize)="setDynamicColumnWidth()">
  <ng-template #windowTitlebar>
    <div class="overflow-hidden flex grow basis-1/2 items-center ml-2">
      @if (mainInvoice.fileNameOriginal !==null) {
      <a href="javascript:void(0);" class="truncate min-w-0 underline cursor-pointer" (click)="downloadInvoice()" [fast-tip]="mainInvoice.fileNameOriginal"
        tipPosition="bottom">{{mainInvoice.fileNameOriginal}}</a>
      }
      @else {
      <span>{{'Pending File'}}</span>
      }
    </div>
    <div class="flex items-center">
      <fast-button class="w-max z-10" type="basic" (click)="regenOrRefresh(mainInvoice.counterparty)" [disabled]="(detailLoading$ | async)
            || !(requiredData$ | async)?.hasModifyPermission
            || mainInvoice.invoiceNum?.includes('INVC')">
        {{ mainInvoice.counterparty }}
      </fast-button>
    </div>
    <div class="flex grow basis-1/2"></div>
  </ng-template>
  @if (detailLoading$ | async) {
  <fast-spinner />
  }
  <div class="flex flex-row">
    <fast-panelbar>
      <fast-panelbar-item panelId="internalEntityPanelbar" [expanded]="isInternalEntityExpanded()" [title]="internalEntityPanelBarTitle()"
        (expand)="onPanelExpand($event)" (collapse)="onPanelCollapse($event)" (select)="onPanelBarSelect($event)">
        <div class="flex flex-row">
          <fast-label class="font-bold"> {{ mainInvoice.internalEntity}} </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Address - Line 1:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityAddressLine1 }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Address - Line 2:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityAddressLine2 }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Country:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityCountry }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> City:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityCity }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> State/Province/Region:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityState }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Postal Code:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityZip }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Telephone #:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityTelephoneNum }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Fax #:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityFaxNum }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Email Address:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityEmailAddress }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Contact Name:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.internalEntityAttn }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Contact Phone:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.contactTelephoneNum }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Contact Email:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.contactEmail }}
          </fast-label>
        </div>
      </fast-panelbar-item>
      <hr>
      <fast-panelbar-item panelId="payInstructionsPanelBar" [expanded]="isPayInstructionsExpanded()" title="Payment Instructions"
        (expand)="onPanelExpand($event)" (collapse)="onPanelCollapse($event)" (select)="onPanelBarSelect($event)">
        <div class="flex flex-row">
          <fast-label class="font-bold">Bank Name:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentBankName }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">City,State/Province/Region:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentCityState }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">ABA Number - Wire:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentAbaNumWire }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">ABA Number - ACH:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentAbaNumAch }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Account Name:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentAccountName }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">For Further Credit To:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentForFurtherCreditTo }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Credit Name:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentCreditName }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Account Number:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.paymentAccountNum }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Account Name:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.accountingContactName }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Account Phone:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.accountingContactPhone }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Account Email:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.accountingContactEmail }}
          </fast-label>
        </div>
      </fast-panelbar-item>
    </fast-panelbar>
    <fast-panelbar>
      <fast-panelbar-item panelId="counterpartyPanelbar" [expanded]="isCounterpartyExpanded()" [title]="counterpartyPanelBarTitle()"
        (expand)="onPanelExpand($event)" (collapse)="onPanelCollapse($event)" (select)="onPanelBarSelect($event)">
        <div class="flex flex-row">
          <fast-label class="font-bold"> {{ mainInvoice.counterparty}} </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Address - Line 1:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyAddressLine1 }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Address - Line 2:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyAddressLine2 }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Country:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyCountry }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> City:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyCity }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> State/Province/Region:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyState }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Postal Code:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyZip }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Attn:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyAttn }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Telephone #:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyTelephoneNum }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Fax #:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyFaxNum }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Email Address:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.counterpartyEmailAddresses }}
          </fast-label>
        </div>
      </fast-panelbar-item>
      <fast-panelbar-item #formPanel panelId="invoiceDetailsPanelbar" [expanded]="isInvoiceDetailsExpanded()" [title]="invoiceDetailsPanelBarTitle()"
        (expand)="onPanelExpand($event)" (collapse)="onPanelCollapse($event)" (select)="onPanelBarSelect($event)">
        <div class="flex flex-row">
          <fast-label>
            {{ mainInvoice.invoiceNum }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Version:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.invoiceType }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold" for="invoiceDatePicker">Invoice Date:</fast-label>
          &nbsp;
          @if(formPanel.expanded){
          <form [formGroup]="invoiceDateForm">
            <fast-datepicker type="date-short" id="invoiceDatePicker" class="w-30" formControlName="invoiceDate"></fast-datepicker>
          </form>
          }
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Due Date:</fast-label>
          &nbsp;
          @if(formPanel.expanded){
          <form [formGroup]="invoiceDueDateForm">
            <fast-datepicker type="date-short" id="invoiceDueDatePicker" class="w-30" formControlName="invoiceDueDate" [min]="minDate"></fast-datepicker>
          </form>
          }
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Payment Method:</fast-label>
          &nbsp;
          <fast-label>
            {{ mainInvoice.contractPaymentType }}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold">Customer #:</fast-label>
          &nbsp;
          <fast-label>
            {{mainInvoice.customerNum}}
          </fast-label>
        </div>
        <div class="flex flex-row">
          <fast-label class="font-bold"> Production Month:</fast-label>
          &nbsp;
          <fast-label>
            {{ dayjs(mainInvoice.month).format('MMMM YYYY') }}
          </fast-label>
        </div>
      </fast-panelbar-item>
    </fast-panelbar>
  </div>
  <div class="flex flex-col grow h-full overflow-auto">
    <fast-grid class="flex flex-row grow overflow-auto!" #grid [scrollable]="'virtual'" [rowHeight]="38" [data]="gridView" [rowClass]="getRowClass"
      [selectBy]="selectByLineNumber" [selectable]="selectableSettings" [selectedKeys]="lineSelection" [pageSize]="pageSize" [skip]="skip"
      (pageChange)="pageChange($event)" [navigable]="true">
      <fast-grid-col [headerClass]="'columnSpacer'" field="_" title="" type="text" />
      <fast-grid-col field="_" type="checkbox" [width]="colWidths.checkbox" [headerTemplate]="checkboxHeader" [cellTemplate]="checkboxCell">
        <ng-template #checkboxHeader>
          <div class="checkboxHeaderContainer t-bg-color4 flex h-full w-full items-center justify-center" (click)="selectAllToggled($event)">
            <input kendoCheckBox type="checkbox" size="large" />
          </div>
        </ng-template>
        <ng-template #checkboxCell let-dataItem="dataItem" let-rowIndex="rowIndex">
          <div class="checkboxContainer flex h-full items-center justify-center" (click)="toggleSelection($event, dataItem?.value?.lineNum, rowIndex)">
            <input kendoCheckBox type="checkbox" size="large" [checked]="lineSelection.includes(dataItem?.value?.lineNum)" />
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col field="_" type="text" [width]="colWidths.approved" [filterable]="false" [headerTemplate]="approvedHeader" [cellTemplate]="approvedCell">
        <ng-template #approvedHeader>
          <div fast-tip="Is Approved" class="flex align-center justify-center w-full h-9">
            <fast-svg class="flex self-center" icon="check" />
          </div>
        </ng-template>
        <ng-template #approvedCell let-dataItem="dataItem">
          <div class="flex align-center justify-center h-full">
            @if (dataItem?.value?.isApproved) {
            <fast-svg class="flex self-center text-green-500" icon="check" />
            }
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.dealNum" field="dealId" [title]="'Deal #'" [cellTemplate]="idCell">
        <ng-template #idCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-combobox class="flex grow" [showDropdownOnHover]="true" [formControlName]="'dealId'" [data]="dealNums$ | async" [textField]="'name'"
              [valueField]="'id'" [valuePrimitive]="true" [dropdownWidth]="300"></fast-combobox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.trader" field="trader" [title]="'Trader'" [cellTemplate]="traderCell">
        <ng-template #traderCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{dataItem?.value?.dealId | dealTrader: localRequiredData?.dealNums}}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.description" field="description" [title]="'Description'" [cellTemplate]="descCell">
        <ng-template #descCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-textbox [formControlName]="'description'"></fast-textbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="dynamicColumnWidth$ | async" field="receiptPipelineId" [cellTemplate]="receiptPipelineCell"
        [title]="'Receipt Pipeline'">
        <ng-template #receiptPipelineCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-combobox class="w-full" [formControlName]="'receiptPipelineId'" [data]="pipelines$ | async" [textField]="'pipeName'" [valueField]="'pipeId'"
              [valuePrimitive]="true" [showDropdownOnHover]="true" [dropdownWidth]="450"></fast-combobox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="dynamicColumnWidth$ | async" field="receiptMeterId" [title]="'Receipt Meter'" [cellTemplate]="receiptMeterCell">
        <ng-template #receiptMeterCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-combobox class="w-full" [formControlName]="'receiptMeterId'"
              [data]="dataItem?.controls.receiptPipelineId?.value | pipelineMeters: localRequiredData?.meters" [textField]="'meterName'"
              [valueField]="'meterId'" [valuePrimitive]="true" [showDropdownOnHover]="true" [dropdownWidth]="450"></fast-combobox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="dynamicColumnWidth$ | async" field="deliveryPipelineId" [cellTemplate]="deliveryPipelineCell"
        [title]="'Delivery Pipeline'">
        <ng-template #deliveryPipelineCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-combobox class="w-full" [formControlName]="'deliveryPipelineId'" [data]="pipelines$ | async" [textField]="'pipeName'" [valueField]="'pipeId'"
              [valuePrimitive]="true" [showDropdownOnHover]="true" [dropdownWidth]="450" [allowCustom]="true"
              (blurOut)="clearPipelineCheck(dataItem)"></fast-combobox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="dynamicColumnWidth$ | async" field="deliveryMeterId" [title]="'Delivery Meter'" [cellTemplate]="deliveryMeterCell">
        <ng-template #deliveryMeterCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-combobox class="w-full" [formControlName]="'deliveryMeterId'"
              [data]="dataItem?.controls.deliveryPipelineId?.value | pipelineMeters: localRequiredData?.meters" [textField]="'meterName'"
              [valueField]="'meterId'" [valuePrimitive]="true" [showDropdownOnHover]="true" [dropdownWidth]="450" [allowCustom]="true"
              (blurOut)="clearPipelineCheck(dataItem)"></fast-combobox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.internalContractNum" field="internalContractNum" [cellTemplate]="internalContractCell"
        [title]="'Internal Ctr.'">
        <ng-template #internalContractCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{dataItem?.controls.internalContractNum?.value}}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.counterpartyContractNum" field="counterpartyContractNum" [cellTemplate]="counterpartyContractCell"
        [title]="'Cpty Ctr'">
        <ng-template #counterpartyContractCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{dataItem?.controls.counterpartyContractNum?.value}}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.basePrice" field="basePrice" [title]="'Base Price'" [cellTemplate]="basePriceCell">
        <ng-template #basePriceCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'basePrice'" format="n5" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.rollPrice" field="rollPrice" [title]="'Roll Price'" [cellTemplate]="rollPriceCell">
        <ng-template #rollPriceCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'rollPrice'" format="n5" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.priceAdj1" field="priceAdj1" [title]="'Argus Adj. 1'" [cellTemplate]="argus1Cell">
        <ng-template #argus1Cell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'priceAdj1'" format="n5" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.priceAdj2" field="priceAdj2" [title]="'Argus Adj. 2'" [cellTemplate]="argus2Cell">
        <ng-template #argus2Cell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'priceAdj2'" format="n5" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.pipePercent" field="pipelinePercentage" [title]="'PLA %'" [cellTemplate]="plaCell">
        <ng-template #plaCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'pipelinePercentage'" [format]="'#,##0.#####%'" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.pipeRate" field="pipelineRate" [title]="'PLA Rate'" [cellTemplate]="plaRateCell">
        <ng-template #plaRateCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'pipelineRate'" format="n5" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.pipeDeduct" field="pipelineDeduct" [title]="'Deduct'" [cellTemplate]="deductCell">
        <ng-template #deductCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'pipelineDeduct'" format="n5" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.netPrice" field="NetPrice" [title]="'Net Price'" [cellTemplate]="netPriceCell">
        <ng-template #netPriceCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{ dataItem?.controls.netPrice?.value | number:'1.5-5' }}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.quantity" field="quantity" [title]="'Quantity'" [cellTemplate]="quantityCell">
        <ng-template #quantityCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'quantity'" format="n2" [decimals]="2" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.grossAmt" field="grossAmount" [title]="'Gr. Amount'" [cellTemplate]="grAmountCell">
        <ng-template #grAmountCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{ dataItem?.controls.grossAmount?.value | number:'1.2-2' }}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.qbRate" field="qbRate" [title]="'QB Rate'" [cellTemplate]="qbRateCell">
        <ng-template #qbRateCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <fast-numerictextbox [formControlName]="'qbRate'" format="n5" [spinners]="false" [step]="0"></fast-numerictextbox>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.qbAmount" field="qbAmount" [title]="'QB Amount'" [cellTemplate]="qbAmountCell">
        <ng-template #qbAmountCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{ dataItem?.controls.qbAmount?.value | number:'1.2-2' }}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.fees" field="actualFee" [title]="'Fees'" [cellTemplate]="feesCell">
        <ng-template #feesCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{ dataItem?.controls.actualFee?.value | number:'1.2-2' }}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.adjustment" field="adjustment" [title]="'Adj.'" [cellTemplate]="adjCell">
        <ng-template #adjCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <div [formGroup]="dataItem">
              <span>{{ dataItem?.controls.adjustment?.value | number:'1.2-2' }}</span>
            </div>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col type="text" [width]="colWidths.invoiceAmt" field="invoiceAmount" [title]="'Inv. Amount'" [cellTemplate]="invAmountCell">
        <ng-template #invAmountCell let-dataItem="dataItem">
          <div [formGroup]="dataItem">
            <span>{{ dataItem?.controls.invoiceAmount?.value | number:'1.2-2' }}</span>
          </div>
        </ng-template>
      </fast-grid-col>
      <fast-grid-col [headerClass]="'columnSpacer'" field="_" title="" type="text" />
    </fast-grid>
  </div>
  <fast-hr />
  <div class="flex flex-col bottomSection h-25 mt-2.5 mr-5 items-center">
    <div class="flex flex-row grow-0" [style.width.px]="notesAndTotalWidth()">
      <div class="flex flex-col grow items-stretch justify-center mt-0.5 mx-2.5 mb-2">
        <fast-textarea [(ngModel)]="mainInvoice.notes" [placeholder]="'Invoice Notes..'" [rows]="3" [resizable]="false"></fast-textarea>
      </div>
      <div class="flex flex-col grow-0" fast-tip #invoiceTooltip="fast-tip" tipPosition="top" [tipContent]="invoiceTooltipTemplate">
        <div class="flex flex-row">
          <div class="flex flex-row grow justify-end w-37 whitespace-nowrap">
            <fast-label class="font-bold whitespace-nowrap">Total Invoice Quantity</fast-label>
          </div>
          <div class="flex grow justify-end pl-2.5 w-17.5 whitespace-nowrap">
            @if (differenceLoading()) {
            <fast-spinner [position]="'relative'" [size]="20"></fast-spinner>
            } @else {
            <fast-label class="font-bold"> {{linesTotalQuantity() |number: '1.2-2'}}</fast-label>
            }
          </div>
        </div>
        <div class="flex flex-row">
          <div class="flex flex-row grow justify-end w-39 whitespace-nowrap">
            <fast-label class="font-bold whitespace-nowrap">Nom/Actual Volume</fast-label>
          </div>
          <div class="flex grow justify-end pl-2.5 w-17.5 whitespace-nowrap">
            @if (differenceLoading()) {
            <fast-spinner [position]="'relative'" [size]="20"></fast-spinner>
            } @else {
            <fast-label class="font-bold"> {{mainInvoice.actualVolume | number: '1.2-2'}}</fast-label>
            }
          </div>
        </div>
        <div class="flex flex-row">
          <div class="flex flex-row grow justify-end w-39 whitespace-nowrap">
            <fast-label class="font-bold whitespace-nowrap">Difference</fast-label>
          </div>
          <div class="flex grow justify-end pl-2.5 w-17.5 whitespace-nowrap">
            @if (differenceLoading()) {
            <fast-spinner [position]="'relative'" [size]="20"></fast-spinner>
            } @else {
            <fast-label class="font-bold"> {{linesDifference() | number: '1.2-2'}}</fast-label>
            }
          </div>
        </div>
      </div>
      <div class="flex flex-col grow-0 w-10 h-15 items-center justify-center" fast-tip #infoTooltip="fast-tip" tipPosition="top"
        [tipContent]="invoiceTooltipTemplate">
        <div class="flex flex-row">
          <fast-svg icon="info" />
        </div>
      </div>
      <ng-template #invoiceTooltipTemplate>
        <strong>Quantity:</strong>
        <table class="w-full">
          <tr>
            <td class="pr-5">{{this.mainInvoice.invoiceNum}}:</td>
            <td class="pl-5 justify-end flex">{{(linesTotalQuantity()) | number: '1.2-2'}}</td>
          </tr>
          @for (item of this.matchingInvoices; track item) {
          @if(item.invoiceNum !== this.mainInvoice.invoiceNum){
          <tr>
            <td class="pr-5">{{item.invoiceNum}}:</td>
            <td class="pl-5 justify-end flex">{{item.totalQuantity | number: '1.2-2'}}</td>
          </tr>
          }
          }
          <tr>
            <td class="pr-5">Total Invoiced:</td>
            <td class="pl-5 justify-end flex">{{(linesTotalQuantity() + matchingInvoicesTotalQuantity()) | number: '1.2-2'}}</td>
          </tr>
          <tr>
            <td class="pr-5">Total Nom/Actual:</td>
            <td class="pl-5 justify-end flex">{{mainInvoice.actualVolume | number: '1.2-2'}}</td>
          </tr>
          <tr>
            <td class="pr-5">Difference:</td>
            <td class="pl-5 justify-end flex">{{mainInvoice.actualVolume - (linesTotalQuantity() + matchingInvoicesTotalQuantity()) | number: '1.2-2'}}</td>
          </tr>
        </table>
        <br />
        <strong>Amount:</strong>
        <table class="w-full">
          <tr>
            <td class="pr-5">{{this.mainInvoice.invoiceNum}}:</td>
            <td class="pl-5 justify-end flex">{{linesSubTotal() | accountingCurrency}}</td>
          </tr>
          @for (item of this.matchingInvoices; track item) {
          @if(item.invoiceNum !== this.mainInvoice.invoiceNum){
          <tr>
            <td class="pr-5">{{item.invoiceNum}}:</td>
            <td class="pl-5 justify-end flex">{{item.totalAmount | accountingCurrency}}</td>
          </tr>
          }
          }
          <tr>
            <td class="pr-5">Total Invoiced:</td>
            <td class="pl-5 justify-end flex">{{(linesSubTotal() + matchingInvoicesTotalAmount()) | accountingCurrency}}</td>
          </tr>
          <tr>
            <td class="pr-5">Total Nom/Actual:</td>
            <td class="pl-5 justify-end flex">{{totalNomAmount() | accountingCurrency}}</td>
          </tr>
          <tr>
            <td class="pr-5">Difference:</td>
            <td class="pl-5 justify-end flex">{{totalNomAmount() - (linesSubTotal() + matchingInvoicesTotalAmount()) | accountingCurrency}}</td>
          </tr>
        </table>
      </ng-template>
      <div class="flex flex-col grow-0">
        <div class="flex flex-row">
          <div class="flex grow justify-end w-54 whitespace-nowrap">
            <fast-label class="font-bold">Subtotal</fast-label>
          </div>
          <div class="flex grow justify-end pl-5 w-27.5 whitespace-nowrap">
            <fast-label class="font-bold">{{linesSubTotal() | currency}}</fast-label>
          </div>
        </div>
        <div class="flex flex-row">
          <div class="flex grow justify-end w-54 whitespace-nowrap">
            <fast-label class="font-bold">Sales Tax</fast-label>
          </div>
          <div class="flex grow justify-end pl-5 w-27.5 whitespace-nowrap">
            <fast-label class="font-bold"> {{linesSalesTaxAmount() | currency}}</fast-label>
          </div>
        </div>
        <div class="flex flex-row">
          <div class="flex grow justify-end w-54 whitespace-nowrap">
            <fast-label class="font-bold">Grand Total</fast-label>
          </div>
          <div class="flex grow justify-end pl-5 w-27.5 whitespace-nowrap">
            <fast-label class="font-bold"> {{linesGrandTotal() | currency}}</fast-label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-row">
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-0 mb-2 ml-2.5">
      <fast-button type="delete" tabindex="-1" [disabled]="
            (detailLoading$ | async)
            || !(requiredData$ | async)?.hasModifyPermission
            || mainInvoice.invoiceNum?.includes('INVC')" (click)="delete()">
        <fast-svg icon="trash" /> Delete
      </fast-button>
    </div>
    <div class="flex flex-col grow items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0"></div>
    <div class="flex flex-col grow-0 items-center justify-center mt-1 mr-2.5 mb-2 ml-0 lineControlsLabel">
      <fast-label>Line Controls</fast-label>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <div fast-tip="Move selected lines up" #moveUpTip="fast-tip" tipPosition="top">
        <fast-button class="w-9" type="basic" [disabled]="
              (detailLoading$ | async)
              || !(requiredData$ | async)?.hasModifyPermission || lineSelection.length === 0" (click)="onMoveLineUpClicked()">
          <fast-svg icon="arrowUp" />
        </fast-button>
      </div>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <div fast-tip="Move selected lines down" #moveDownTip="fast-tip" tipPosition="top">
        <fast-button type="basic" class="w-9" [disabled]="
              (detailLoading$ | async)
              || !(requiredData$ | async)?.hasModifyPermission || lineSelection.length === 0" (click)="onMoveLineDownClicked()">
          <fast-svg icon="arrowDown" />
        </fast-button>
      </div>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <div fast-tip="Add Line" #addLineTip="fast-tip" tipPosition="top">
        <fast-button type="basic" class="w-9" [disabled]="
              (detailLoading$ | async)
              || !(requiredData$ | async)?.hasModifyPermission" (click)="onAddLinesClicked()"><fast-svg icon="plus" />
        </fast-button>
      </div>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <div #removeLineTip="fast-tip" fast-tip="Remove selected lines" tipPosition="top">
        <fast-button type="basic" class="w-9" [disabled]="
              (detailLoading$ | async)
              || !(requiredData$ | async)?.hasModifyPermission || lineSelection.length === 0" (click)="onRemoveLinesClicked()"><fast-svg icon="minus" />
        </fast-button>
      </div>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <div #duplicateTip="fast-tip" fast-tip="Duplicate selected lines" tipPosition="top">
        <fast-button type="basic" class="w-9" [disabled]="
              (detailLoading$ | async)
              || !(requiredData$ | async)?.hasModifyPermission || lineSelection.length === 0" (click)="onDuplicateLinesClicked()"><fast-svg icon="copy" />
        </fast-button>
      </div>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <div #toggleApproveTip="fast-tip" fast-tip="Toggle selected lines approval" tipPosition="top">
        <fast-button type="basic" class="w-9" [disabled]="
              (detailLoading$ | async)
              || !(requiredData$ | async)?.hasModifyPermission
              || !(requiredData$ | async)?.hasApprovalPermission
              || mainInvoice.invoiceNum?.includes('INVC')
              || lineSelection.length === 0" (click)="onToggleApprovalClicked()"><fast-svg icon="check" />
        </fast-button>
      </div>
    </div>
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <div #reverseTip="fast-tip" tipPosition="top"
        fast-tip="Reverse volumes and amounts. Typically used to create a credit memo or reversal that will reverse an existing invoice.">
        <fast-button type="basic" class="w-9" [disabled]="
              (detailLoading$ | async)
              || !(requiredData$ | async)?.hasModifyPermission || lineSelection.length === 0" (click)="onReverseLinesClicked()">
          <fast-svg icon="circleDollar" />
        </fast-button>
      </div>
    </div>
    <div class="flex flex-col grow items-center justify-center mt-1 mr-2.5 mb-2 ml-0"></div>
    @if (mainInvoice.invoiceNum?.includes('INVC')) {
    <div class="flex flex-col grow-0 items-stretch justify-end mt-1 mr-2.5 mb-2 ml-0">
      <fast-button type="basic" [disabled]="
            (detailLoading$ | async)
            || !(requiredData$ | async)?.hasModifyPermission" (click)="revise()">
        <fast-svg icon="fileAdd" />Revise
      </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="basic" [disabled]="
            (detailLoading$ | async)
            || !(requiredData$ | async)?.hasModifyPermission
            || mainInvoice.invoiceNum === ''" (click)="saveNew()">
        <fast-svg icon="fileAdd" />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]="
            (detailLoading$ | async)
            || !(requiredData$ | async)?.hasModifyPermission
            || mainInvoice.invoiceNum?.includes('INVC')" (click)="saveDraft()">
        <fast-svg icon="save" />Save Draft
      </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]="
            (detailLoading$ | async)
            || !(requiredData$ | async)?.hasModifyPermission
            || !(requiredData$ | async)?.hasApprovalPermission
            || mainInvoice.invoiceNum?.includes('INVC')" (click)="onApproveAllClicked()">
        <fast-svg icon="check" />Approve All
      </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="basic" [disabled]="detailLoading$ | async" (click)="closedClicked()">
        <fast-svg icon="cancel" />Close
      </fast-button>
    </div>
  </div>
</fast-window>