<global-bar (click)="setSelectedItem(null)"></global-bar>
<ng-container *ngIf="result$ | async"></ng-container>
<ng-container *ngIf="requiredData$ | async"></ng-container>
<ng-container *ngIf="meters$ | async"></ng-container>
<ng-container *ngIf="saveSelectedPipeResult$ | async"></ng-container>
<ng-container *ngIf="nomDateChanged$ | async"></ng-container>
<ng-container *ngIf="pipelineChanged$ | async"></ng-container>
<ng-container *ngIf="screenPathsResult$ | async"></ng-container>
<ng-container *ngIf="hoveredItemResult$ | async"></ng-container>
<ng-container *ngIf="sortObserver$ | async"></ng-container>
<ng-container *ngIf="saveSortResult$ | async"></ng-container>
<ng-container *ngIf="getItemDynamicValuesResult$ | async"></ng-container>
<ng-container *ngIf="cloneSupplyResult$ | async"></ng-container>
<ng-container *ngIf="deleteTransfersResult$ | async"></ng-container>

<div class="overlayLight" *ngIf="loading$ | async"></div>
<div *ngIf="(loading$ | async) === true || (gridLoading$ | async) === true" class="k-i-loading-lg"></div>

<div class="pageContent">
  <div id="header" class="row">
    <form class="row overflow" [formGroup]="loadForm">
      <div kendoTooltip [tooltipClass]="sosTipClass" title="Open New Tab" class="headerItem-l" [hover-class]="'newTab t-bg-hover1'" (click)="openNewTab()">
        <h1>{{title$ | async}}<kendo-svg-icon [icon]="icons.plusIcon" /></h1>
      </div>
      <div class="headerItem-l">
        <button kendoTooltip [tooltipClass]="sosTipClass" title="Refresh Grid" class="k-button button-tiny" [disabled]="!loadForm.value.pipeId"
          (click)="refreshSelected()">
          <kendo-svg-icon [icon]="icons.arrowRotateCwIcon" />
        </button>
      </div>
      <div class="headerItem-g">
        <kendo-combobox #pipeCombo="kendoComboBox" class="smallCombo inputFocusTarget" formControlName="pipeId" [data]="pipelines$ | async"
          [textField]="'pipeName'" [valueField]="'pipeId'" [valuePrimitive]="true" [virtual]="util.virtual" [listHeight]="300"
          (filterChange)="filterPipelines$.next($event)" [filterable]="true" [popupSettings]="{ popupClass: 'app-sos list-wide' }"
          (keydown)="onPipePointKeydown($event)" placeholder="Pipeline">
        </kendo-combobox>
      </div>
      <div class="headerItem-l arrow" style="margin-left:10px">
        <button class="rowItem-g k-button button-tiny" (click)="prevDate()">
          <kendo-svg-icon [icon]="icons.caretAltLeftIcon" />
        </button>
      </div>
      <div class="headerItem-l date">
        <kendo-datepicker #nomDate [min]="util.minDate" [max]="util.maxDate" class="monthPicker-width-md boldFont" [format]="'M/d/yyyy'"
          formControlName="nomDate" (close)="onNomDatePickerClose()">
        </kendo-datepicker>
      </div>
      <div class="headerItem-l arrow">
        <button class="rowItem-g k-button button-tiny" (click)="nextDate()">
          <kendo-svg-icon [icon]="icons.caretAltRightIcon" />
        </button>
      </div>
      <div class="headerItem-l save">
        <button class="k-button button-md" type="submit" (click)="openSaveNoms()">
          <kendo-svg-icon [icon]="icons.saveIcon" />Save
        </button>
      </div>
      <div class="headerItem-l add">
        <button class="k-button button-md" type="submit" (click)="openAddDeal(null)">
          <kendo-svg-icon [icon]="icons.plusIcon" />Add Deal
        </button>
      </div>
      <div class="headerItem-g2"></div>
      <div class="headerItem-r noMargin">
        <button kendoTooltip [tooltipClass]="sosTipClass" title="Snapshot History" class="rowItem-gc k-button button-tiny question"
          (click)="openSnapshotHistory()">
          <kendo-svg-icon [icon]="icons.calendarDateIcon" />
        </button>
      </div>
      <div class="headerItem-r noMargin">
        <button kendoTooltip [tooltipClass]="sosTipClass" title="Legend" class="rowItem-gc k-button button-tiny question" (click)="toggleLegend()">
          <kendo-svg-icon [icon]="icons.questionCircleIcon" />
        </button>
      </div>
      <div class="headerItem-r noMargin">
        <button kendoTooltip [tooltipClass]="sosTipClass" title="SOS Settings" class="rowItem-gc k-button button-tiny noMargin"
          [disabled]="!loadForm.value.pipeId" (click)="openSosSettings()">
          <kendo-svg-icon [icon]="icons.gearIcon" />
        </button>
      </div>
    </form>
  </div>

  <ng-template #tooltipMainTemplate let-anchor>
    <div *ngFor="let text of (anchor.nativeElement?.attributes['anchorText']?.value.split(' • '))">
      <span>{{ text }}</span>
    </div>
  </ng-template>

  <form [formGroup]="dataSetForm" class="mainSection overflow" [style.font-size]="fontSizeStr" kendoTooltip #gridTip="kendoTooltip" showOn="none"
    [tooltipTemplate]="tooltipMainTemplate" (mouseover)="showMainTooltip($event, gridTip)" position="right">

    <div class="overlayContained" *ngIf="gridLoading$ | async"></div>

    <ng-container *ngIf="result$ | async">
      <ng-template #supplyValuesTemplate let-frozen="frozen" let-item="item" let-itemIdx="itemIdx">
        <div #supplyRowTarget>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'supplyCounterparty'" [sosItem]="item" [display]="displays['supplyCounterparty']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'sourceMeter'" [sosItem]="item" [display]="displays['sourceMeter']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'receiptMeter'" [sosItem]="item" [display]="displays['receiptMeter']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'receiptPoint'" [sosItem]="item" [display]="displays['receiptPoint']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'supplyTicket'" [sosItem]="item" [display]="displays['supplyTicket']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr"
            (click)="openSupplyDealOrTransfer(item?.supplyTicket, item)" [isPathEnd]="false" [hasContextMenu]="areCustomContextMenusEnabled"
            (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'sourceTicket'" [sosItem]="item" [display]="displays['sourceTicket']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr"
            (click)="openSupplyDealOrTransfer(item?.sourceTicket, item)" [isPathEnd]="false" [hasContextMenu]="areCustomContextMenusEnabled"
            (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text>
          <app-sos-crude-elem-text-input [frozen]="frozen" [propName]="'activityNum'" [sosItem]="item" [display]="displays['activityNum']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text-input>
          <app-sos-crude-elem-text-input [frozen]="frozen" [propName]="'notes'" [sosItem]="item" [display]="displays['notes']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text-input>
          <app-sos-crude-elem-text-input [frozen]="frozen" [propName]="'sourceNotes'" [sosItem]="item" [display]="displays['sourceNotes']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text-input>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'dealVolume'" [numFormat]="'#,#'" [sosItem]="item" [display]="displays['dealVolume']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-text>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'nomReceiptVol'" [numFormat]="'#,#'" [sosItem]="item" [display]="displays['nomReceiptVol']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"
            [isLoading]="item?.isDynamicValueLoading"></app-sos-crude-elem-text>
          <app-sos-crude-elem-combo [frozen]="frozen" [propName]="'pipeContractId'" [sosItem]="item" [display]="displays['pipeContractId']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr"
            [data]="pipeContracts$ | async | sosSupplyPipelineContracts: item" (filterChange)="filterPipeContracts$.next($event)" [textField]="'contractName'"
            [valueField]="'contractId'" [isPathEnd]="false" [hasContextMenu]="areCustomContextMenusEnabled"
            (contextSelect)="onContextMenuSelect($event, item, null)"></app-sos-crude-elem-combo>
          <app-sos-crude-elem-text [frozen]="frozen" [propName]="'deliveryPoint'" [sosItem]="item" [display]="displays['deliveryPoint']"
            [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [fontSizeStr]="fontSizeStr" [isPathEnd]="false"
            [hasContextMenu]="areCustomContextMenusEnabled" (contextSelect)="onContextMenuSelect($event, item, null)"
            [isLoading]="item?.isDynamicValueLoading"></app-sos-crude-elem-text>
        </div>
      </ng-template>

      <ng-template #supplyHeadersTemplate let-frozen="frozen">
        <ng-container *ngFor="let col of mainDisplayInfos; let colIdx = index;">
          <div #supplyHeader *ngIf="(frozen && colIdx < mainFrozenColCount) || (!frozen && colIdx >= mainFrozenColCount)" class="rowItem-g supplyHeader"
            [class.last]="col.order === mainFrozenColCount" [style.min-width]="col.width + 'px'" [style.max-width]="col.width + 'px'" [style.order]="col.order"
            (click)="columnSort($event, col.propName)">
            <span class="supplyHeaderName">{{col.displayName}}</span>
            <div *ngIf="col.propName === 'deliveryVol'" class="deliveryVol">
              <div></div>
              <div class="t-bg-color1-imp"><span>{{grandTotalDeliveryVol| kFormatNum: '#,#'}}</span></div>
            </div>
            <div *ngIf="col.sortDir" class="sortWrapper t-text-color5">
              @if(col.sortDir === 'asc'){<kendo-svg-icon [icon]="icons.sortAscSmallIcon"></kendo-svg-icon>}
              @if(col.sortDir === 'desc'){<kendo-svg-icon [icon]="icons.sortDescSmallIcon"></kendo-svg-icon>}
              <span *ngIf="col.sortNum" class="k-sort-order">{{col.sortNum}}</span>
            </div>
            <kendo-contextmenu [target]="supplyHeader" [items]="[ {text: 'Clear Sort' }]" (select)="clearSort()"></kendo-contextmenu>
          </div>
        </ng-container>
      </ng-template>

      <div class="frozenCols" *ngIf="mainFrozenColCount > 0">
        <div class="row groupHeaders t-text-color1">
          <!-- spacers above frozen supply headers -->
          <ng-container *ngFor="let col of mainDisplayInfos; let colIdx = index;">
            <div *ngIf="colIdx < mainFrozenColCount" class="rowItem-n" [class.last] [style.min-width]="col.width + 'px'" [style.max-width]="col.width + 'px'">
              &nbsp;</div>
          </ng-container>
        </div>

        <div class="row headers t-text-color1 t-bg-color4 t-border3" [style.min-height]="fontSizeStr | sosMarketHeightCrude">
          <!-- frozen supply headers -->
          <ng-container *ngTemplateOutlet="supplyHeadersTemplate; context: { frozen: true }"></ng-container>
        </div>

        <div class="values" #frozenColValues>
          <!-- frozen supply values -->
          <ng-container formArrayName="items">
            <ng-container *ngFor="let itemForm of itemForms;" [formGroupName]="itemIndexesByGuid[itemForm.value.guid]">
              <ng-container *ngIf="mainShowHiddenRows || !itemForm.controls['isHidden'].value">
                <div *ngVar="itemIndexesByGuid[itemForm.value.guid]; let itemIdx"
                  [class]="'linesSection t-text-color1 fastKeyRow' | sosRowMainColorsCrude: itemForm.value" (click)="setSelectedItem(itemForm)"
                  (contextmenu)="setSelectedItem(itemForm)" (mouseenter)="setHoveredItem$.next(itemForm)" (mouseleave)="setHoveredItem$.next(null)">

                  <ng-container *ngTemplateOutlet="supplyValuesTemplate; context: { frozen: true, item: itemForm.value, itemIdx: itemIdx }"></ng-container>
                </div>
              </ng-container>
            </ng-container>
          </ng-container>

          <div class="bottomFiller linesSection t-bg-color1" (click)="setSelectedItem(null)">
            <ng-container *ngTemplateOutlet="supplyValuesTemplate; context: { frozen: true, item: null, itemIdx: 0 }"></ng-container>
          </div>
        </div>
      </div>

      <div class="normalCols">
        <div class="normalColsTopSection" #normalColsTopSection>
          <div class="normalColsTopSectionInner">
            <div class="row groupHeaders t-text-color1" (click)="setSelectedItem(null)">
              <!-- spacers above normal supply headers -->
              <ng-container *ngFor="let col of mainDisplayInfos; let colIdx = index; let last = last">
                <div *ngIf="colIdx >= mainFrozenColCount" [class]="last ? 'rowItem-nr' : 'rowItem-n'" [style.min-width]="col.width + 'px'"
                  [style.max-width]="col.width + 'px'"></div>
              </ng-container>
              <!--  section above swing group headers -->
              <ng-container *ngFor="let market of (swingMarkets$ | async); let first = first; let last = last">
                <div *ngIf="first" class="swingHeader t-bg-alt-1 t-text-color3" [class.rowItem-g]="first && !last" [class.rowItem-nr]="first && last"
                  [style.min-width]="marketColWidth + 'px'" [style.max-width]="marketColWidth + 'px'">
                  &nbsp;
                  <span [style.left]="models.MarketDealType.Swing | sosMarketPositionCrude: swingColCount: baseloadColCount: fontSizeStr">Swing
                    Markets</span>
                </div>
                <div *ngIf="!first && !last" class="swingHeader rowItem-g t-bg-alt-1" [style.min-width]="marketColWidth + 'px'"
                  [style.max-width]="marketColWidth + 'px'"></div>
                <div *ngIf="last && !first" class="swingHeader rowItem-nr t-bg-alt-1" [style.min-width]="marketColWidth + 'px'"
                  [style.max-width]="marketColWidth + 'px'"></div>
              </ng-container>
              <!-- section above headers divider -->
              <div class="marketTypeDivider t-bg-color1-imp">
                <div class="t-bg-alt-1-imp"></div>
              </div>
              <!-- section above baseload group headers -->
              <ng-container *ngFor="let market of (baseloadMarkets$ | async); let first = first; let last = last">
                <div *ngIf="first" class="baseloadHeader t-bg-alt-1 t-text-color3" [class.rowItem-g]="first && !last" [class.rowItem-nr]="first && last"
                  [style.min-width]="marketColWidth + 'px'" [style.max-width]="marketColWidth + 'px'">
                  &nbsp;
                  <span [style.left]="models.MarketDealType.Baseload | sosMarketPositionCrude: swingColCount: baseloadColCount: fontSizeStr">Baseload
                    Markets</span>
                </div>
                <div *ngIf="!first && !last" class="baseloadHeader rowItem-g t-bg-alt-1" [style.min-width]="marketColWidth + 'px'"
                  [style.max-width]="marketColWidth + 'px'"></div>
                <div *ngIf="last && !first" class="baseloadHeader rowItem-nr t-bg-alt-1" [style.min-width]="marketColWidth + 'px'"
                  [style.max-width]="marketColWidth + 'px'"></div>
              </ng-container>
              <!-- section above transfer group header -->
              <div class="rowItem-nr transferHeader t-bg-alt-1 t-text-color3" [style.min-width]="transferColWidth + 'px'"
                [style.max-width]="transferColWidth + 'px'">&nbsp;
                <span [style.left]="models.MarketDealType.Transfer | sosMarketPositionCrude: swingColCount: baseloadColCount: fontSizeStr">Transfers</span>
              </div>
            </div>

            <div class="row headers t-text-color1 t-bg-color4 t-border3" [style.min-height]="fontSizeStr | sosMarketHeightCrude">
              <!-- normal supply headers -->
              <ng-container *ngTemplateOutlet="supplyHeadersTemplate; context: { frozen: false }"></ng-container>

              <!-- market headers template -->
              <ng-template #marketHeadersTemplate let-marketTypeName="marketTypeName">
                <ng-container formArrayName="markets">
                  <ng-container *ngFor="let marketForm of marketForms" [formGroupName]="marketIndexesByGuid[marketForm.value.guid]">
                    <div *ngIf="marketForm.controls['marketDealType'].value === marketTypeName" class="rowItem-g marketCol t-bg-color4"
                      [style.min-width]="marketColWidth + 'px'" [style.max-width]="marketColWidth + 'px'">
                      <div class="marketColInnerContainer">
                        <div class="dealNum"><span class="fakeLink"
                            (click)="openDeal(marketForm.controls['marketTicket'].value)">{{marketForm.controls['marketTicket'].value}}</span>
                        </div>
                        <div class="delMtr">
                          <div><span>Del Mtr</span></div>
                          <div class="t-bg-color1"><kendo-dropdownlist class="smallCombo t-bg-color1 t-border3-imp"
                              [data]="metersForPipeline$ | async | sosMarketMetersForPoint: marketForm.controls['pointId'].value" [valueField]="'meterId'"
                              [textField]="'meterName'" formControlName="marketDeliveryMeterId" [valuePrimitive]="true"
                              [popupSettings]="{ popupClass: 'app-sos list-medium' }"></kendo-dropdownlist></div>
                        </div>
                        <div class="contract">
                          <!-- display an empty line when there is no contractNumber -->
                          <span>{{ marketForm.controls['contractNumber'].value ?
                            marketForm.controls['contractNumber'].value : '\u00A0' }}</span>
                        </div>
                        <div class="point">
                          <!-- display an empty line when there is no pointName -->
                          <span>{{ marketForm.controls['pointName'].value ?
                            marketForm.controls['pointName'].value : '\u00A0' }}</span>
                        </div>
                        <div class="counterparty">
                          <span>{{marketForm.controls['marketCounterparty'].value}}</span>
                        </div>
                        <div class="dealVol">
                          <div><span>Deal Vol</span></div>
                          <div class="t-bg-color1">
                            <span>{{marketForm.controls['marketDealVolume'].value | kFormatNum: '#,#'}}</span>
                          </div>
                        </div>
                        <div class="nomVol">
                          <div><span>Nom/Act Vol</span></div>
                          <div
                            [class]="'' | sosMarketVolColorCrude:  marketForm.controls['totalMarketNomVol'].value : marketForm.controls['marketDealVolume'].value">
                            <span>{{marketForm.controls['totalMarketNomVol'].value | kFormatNum: '#,#'}}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </ng-container>
                </ng-container>
              </ng-template>

              <!-- swing market headers -->
              <ng-container *ngTemplateOutlet="marketHeadersTemplate; context: { marketTypeName: 'Swing' }"></ng-container>

              <div class="marketTypeDivider t-bg-color1-imp">
                <div class="t-bg-alt-1-imp"></div>
              </div>

              <!-- baseload market headers -->
              <ng-container *ngTemplateOutlet="marketHeadersTemplate; context: { marketTypeName: 'Baseload' }"></ng-container>

              <!-- transfer market header -->
              <div class="rowItem-g marketCol t-bg-color4" [style.min-width]="transferColWidth + 'px'" [style.max-width]="transferColWidth + 'px'">
                <div class="marketColInnerContainer">
                  <div class="totalTransferSumVol">
                    <div><span>Nom/Act Vol</span></div>
                    <div class="t-bg-color1-imp">
                      <span class="t-bg-color1-imp">{{totalTransferSumVol| kFormatNum: '#,#'}}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="t-bg-color1-imp farRightColumnFillerCell"></div>
        </div>
        <div class="values" #normalColValues (scroll)="syncScroll()">
          <ng-container formArrayName="items">
            <ng-container *ngFor="let itemForm of itemForms;" [formGroupName]="itemIndexesByGuid[itemForm.value.guid]">
              <ng-container *ngIf="mainShowHiddenRows || !itemForm.controls['isHidden'].value">
                <div *ngVar="itemIndexesByGuid[itemForm.value.guid]; let itemIdx"
                  [class]="'linesSection t-text-color1 fastKeyRow' | sosRowMainColorsCrude: itemForm.value" (click)="setSelectedItem(itemForm)"
                  (contextmenu)="setSelectedItem(itemForm)" (mouseenter)="setHoveredItem$.next(itemForm)" (mouseleave)="setHoveredItem$.next(null)">

                  <!-- normal supply values -->
                  <ng-container *ngTemplateOutlet="supplyValuesTemplate; context: { frozen: false, item: itemForm.value, itemIdx: itemIdx }"></ng-container>

                  <!-- swing nom values -->
                  <ng-container formArrayName="noms">
                    <ng-container *ngFor="let nomForm of (itemForm.controls['noms'] | formGroupArray); let swingNomIdx = index;" [formGroupName]="swingNomIdx">
                      <app-sos-crude-elem-numeric-input *ngIf="nomForm.controls['marketDealType'].value === 'Swing'" [frozen]="false" [propName]="'volume'"
                        [sosItem]="itemForm.value" [sosNom]="nomForm.value" [display]="marketColDisplay" [frozenColCount]="mainFrozenColCount"
                        [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [nomRowIdx]="swingNomIdx" [numFormat]="'#,#'" [decimals]="0"
                        [fontSizeStr]="fontSizeStr" [isPathEnd]="false" [hasContextMenu]="areCustomContextMenusEnabled"
                        (contextSelect)="onContextMenuSelect($event, itemForm.value, nomForm)"></app-sos-crude-elem-numeric-input>
                    </ng-container>
                    <!-- group value divider -->
                    <div class="marketTypeDivider t-bg-color1-imp">
                      <div class="t-bg-alt-1-imp"></div>
                    </div>
                    <!-- baseload nom values -->
                    <ng-container *ngFor="let nomForm of (itemForm.controls['noms'] | formGroupArray); let baseNomIdx = index;" [formGroupName]="baseNomIdx">
                      <app-sos-crude-elem-numeric-input *ngIf="nomForm.controls['marketDealType'].value === 'Baseload'" [frozen]="false" [propName]="'volume'"
                        [sosItem]="itemForm.value" [sosNom]="nomForm.value" [display]="marketColDisplay" [frozenColCount]="mainFrozenColCount"
                        [activeElement]="doc.activeElement" [itemIdx]="itemIdx" [nomRowIdx]="baseNomIdx" [numFormat]="'#,#'" [decimals]="0"
                        [fontSizeStr]="fontSizeStr" [isPathEnd]="false" [hasContextMenu]="areCustomContextMenusEnabled"
                        (contextSelect)="onContextMenuSelect($event, itemForm.value, nomForm)"></app-sos-crude-elem-numeric-input>
                    </ng-container>
                  </ng-container>

                  <!-- transfer nom values -->
                  <app-sos-crude-elem-text [frozen]="false" [propName]="'transferSumVol'" [numFormat]="'#,#'" [sosItem]="itemForm.value"
                    [display]="transferColDisplay" [frozenColCount]="mainFrozenColCount" [activeElement]="doc.activeElement" [itemIdx]="itemIdx"
                    [fontSizeStr]="fontSizeStr" [isPathEnd]="false" [hasContextMenu]="areCustomContextMenusEnabled" (click)="openTransfer(itemForm.value)"
                    (contextSelect)="onContextMenuSelect($event, itemForm.value, null)"></app-sos-crude-elem-text>

                  <div class="t-bg-color1-imp farRightColumnFillerCell"></div>
                </div>
              </ng-container>
            </ng-container>
          </ng-container>

          <div class="bottomFiller linesSection t-bg-color1" (click)="setSelectedItem(null)">
            <div class="row t-bg-color1">
              <ng-container *ngTemplateOutlet="supplyValuesTemplate; context: { frozen: false, item: null, itemIdx: 0 }"></ng-container>

              <!-- baseload nom fillers -->
              <ng-container *ngFor="let i of (baseloadMarkets$ | async)">
                <div [class]="'rowItem-g cellMain transferSumVol'" [style.min-width]="marketColWidth + 3 + 'px'" [style.max-width]="marketColWidth + 3 + 'px'">
                </div>
              </ng-container>

              <!-- group divider filler -->
              <!-- bottom filler divider is for width purposes only, no color -->
              <div class="marketTypeDivider"></div>

              <!-- swing nom fillers -->
              <ng-container *ngFor="let i of (swingMarkets$ | async)">
                <div [class]="'rowItem-g cellMain transferSumVol'" [style.min-width]="marketColWidth + 3 + 'px'" [style.max-width]="marketColWidth + 3 + 'px'">
                </div>
              </ng-container>

              <!-- transfer nom filler -->
              <div [class]="'rowItem-g cellMain transferSumVol'" [style.min-width]="transferColWidth + 3 + 'px'"
                [style.max-width]="transferColWidth + 3 + 'px'">
              </div>
            </div>
          </div>
        </div>
      </div>

    </ng-container>
  </form>
</div>

@if (snapshotHistoryOpened$ | async) {
<div class="k-overlay"></div>
<app-sos-snapshot-history [pipeId]="this.pipeId" (closeSnapshotHistory)="closeSnapshotHistory()" [nomDate]="this.nomDate"></app-sos-snapshot-history>
}

<app-sos-crude-save *ngIf="saveNomsOpened$ | async" (closed)="saveNomsClosed($event)" [nomDate]="loadedNomDate" [pipeId]="loadedPipeId"
  [sosItemForms]="itemForms" [isTransferPaths]="false"></app-sos-crude-save>

<fast-frame *ngIf="dealsOpened$ | async" title="Deals" [src]="dealUrl" [externalParams]="externalParams" (closed)="dealsOpened$.next(false)"></fast-frame>

<app-sos-crude-settings *ngIf="(sosSettingsOpened$ | async)" [pipeId]="loadForm.value.pipeId" [pipeName]="pipeName"
  (closed)="sosSettingsClosed($event)"></app-sos-crude-settings>

<app-sos-crude-deal *ngIf="(addDealOpened$ | async)" (closed)="addDealClosed($event)" [nomDate]="loadedNomDate" [pipeId]="loadedPipeId" [deliveryPointId]="null"
  [counterparties]="localRequiredData.counterparties" [points]="localRequiredData.points" [addDealParams]="addDealParams"></app-sos-crude-deal>

<div *ngIf="transfersOpened$ | async" class="k-overlay"></div>
<kendo-window [height]="0 | winHeight" *ngIf="transfersOpened$ | async" (close)="transfersComponent.close()" [width]="2250 | winWidth" [minWidth]="400"
  [minHeight]="400" [keepContent]="true">
  <kendo-window-titlebar>
    <div class="row-g">
      <div class="rowItem-lc rightBuffer">Transfers</div>
      <div class="rowItem-lc leftBuffer">
        <button class="k-button" tabindex="-1" (click)="transfersComponent.addTransfer()" [disabled]="transfersComponent?.gridLoading$ | async">
          <kendo-svg-icon [icon]="icons.plusIcon" />Add Transfer
        </button>
      </div>
      <div class="rowItem-g"></div>
      <div class="k-window-titlebar-actions">
        <button kendoWindowMinimizeAction></button>
        <button kendoWindowMaximizeAction></button>
        <button kendoWindowRestoreAction></button>
        <button kendoWindowCloseAction></button>
      </div>
    </div>
  </kendo-window-titlebar>
  <app-sos-crude-transfers class="col-g" #transfersComponent (closed)="transfersClosed($event)" [nomDate]="loadedNomDate" [pipeId]="loadedPipeId"
    [pointId]="null" [settings]="adjustedSettings" [sosItem]="lastSelectedItem" [requiredData]="requiredData$ | async"></app-sos-crude-transfers>
</kendo-window>

<app-sos-crude-note *ngIf="noteOpened$ | async" [note]="selectedNomForm?.value?.notes" (closed)="closeNote()" (noteChanged)="noteChanged($event)"
  [fontSizeStr]="fontSizeStr"></app-sos-crude-note>

<app-sos-crude-legend *ngIf="legendOpened$ | async" (closed)="closeLegend()" [fontSizeStr]="fontSizeStr"></app-sos-crude-legend>

<app-sos-crude-supply-reset *ngIf="supplyResetOpened$ | async" (closed)="supplyResetClosed($event)" [nomDate]="loadedNomDate"
  [sosItem]="lastSelectedItem"></app-sos-crude-supply-reset>