<ng-container *ngIf="changeDatesResult$ | async"></ng-container>

<div class="overlay2"></div>
<div [hidden]="(loading$ | async) === false" class="k-i-loading-lg"></div>
<kendo-window *ngIf="(loading$ | async) === false" class="window2" [height]="280" (close)="close()" [width]="415" [resizable]="false">
  <kendo-window-titlebar>
    <div class="row-g">
      <div class="rowItem-lc">Change Transfer Dates</div>
      <div class="rowItem-g"></div>
      <div class="k-window-titlebar-actions">
        <button kendoWindowCloseAction></button>
      </div>
    </div>
  </kendo-window-titlebar>
  <form [formGroup]="changeForm" class="overflow">
    @let requiredData = (requiredData$ | async);
    <div class="col-g padding">
      <div class="colItem-g topSection">
        <div class="row">
          <span class="warning t-text-color-delete"><b>Warning:</b> Changing transfer dates will delete all nominations
            and
            actualizations that fall outside the new date range.
          </span>
        </div>
        <div class="row">
          <div class="rowItem-g">
            @if (requiredData) {
            <span>{{sosItem.supplyTicket}} current start: {{requiredData.currentTransferStartDate | date:
              'M/d/yyyy'}}</span>
            <span>{{sosItem.supplyTicket}} current end:&nbsp;&nbsp;{{requiredData.currentTransferEndDate | date:
              'M/d/yyyy'}}</span>
            }
          </div>
        </div>
        <div class="row-c dateRow">
          <div class="rowItem-g"></div>
          <div class="rowItem labelCol">
            <label class="noWrap">New Start</label>
          </div>
          <div class="rowItem">
            @if (requiredData) {
            <kendo-datepicker class="datePicker-width inputFocusTarget" formControlName="fromDate" [min]="requiredData.sourceSupplyStartDate"
              [max]="requiredData.sourceSupplyEndDate" [format]="'M/d/yyyy'" [formatPlaceholder]="util.dayPlaceholder"></kendo-datepicker>
            }
          </div>
          <div class="rowItem-g buttonCol"></div>
        </div>
        <div class="row-c dateRow">
          <div class="rowItem-g"></div>
          <div class="rowItem labelCol">
            <label class="noWrap">New End</label>
          </div>
          <div class="rowItem">
            @if (requiredData) {
            <kendo-datepicker class="datePicker-width" formControlName="toDate" [min]="requiredData.sourceSupplyStartDate"
              [max]="requiredData.sourceSupplyEndDate" [format]="'M/d/yyyy'" [formatPlaceholder]="util.dayPlaceholder"></kendo-datepicker>
            }
          </div>
          <div class="rowItem-g buttonCol"></div>
        </div>
      </div>
      <hr />
      <div class="colItem bottomSection">
        <div class="row">
          <div class="rowItem-g"></div>
          <div class="rowItem-r">
            <button type="button" class="k-button button-md k-primary" (click)="changeDates()" [disabled]="changeForm.disabled">
              <kendo-svg-icon [icon]="icons.calendarDateIcon" />Change
            </button>
          </div>
          <div class="rowItem-r">
            <button type="button" class="k-button button-md" (click)="close()">
              <kendo-svg-icon [icon]="icons.cancelIcon" />Cancel
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</kendo-window>