<!--
******************************************************************************
* Copyright © 2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
*
*     http://www.eclipse.org/legal/epl-v10.html
******************************************************************************
-->
<!-- <form #singleGridForm="ngForm" *ngIf="!showSpinnerSingleGrid" [singleGridMeasureFormValid]="!singleGridForm.form.valid"> -->
<div #singleGridMeasureDetailFormCotainer>
  <form #singleGridForm="ngForm" (change)="onSingleGridFormValidation(singleGridForm.form.valid)">
    <fieldset class="form-group" disabled="{{ readOnlyForm ? 'disabled' : ''}}">
      <h4>
        <b>{{gridMeasureDetail?.title}}&nbsp;</b>
      </h4>
      <div class="row actions">
        <div class="col-lg-12">
          <button class="btn btn-primary pull-right" id="createInvertedStep" (click)="duplicateSingleGM()" [disabled]="isSingleGridmeasureLimitReached()">Rückschaltung planen
          </button>
          <button class="btn btn-danger pull-left" id="deleteSingleGridMeasureBtn" (click)="onDeleteBtnClick()" [disabled]="isLastSingleGridmeasure()">Einzelmaßnahme löschen
            <span class="glyphicon glyphicon-trash" id="deleteSingleGridMeasureBtnIcon"></span>
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <label class="form-field-label" for="titleControl">Titel der Einzelmaßnahme</label>
          <input autofocus maxlength="256" [required]="true" type="text" name="singleGMTitle" id="singleGMTitle" class="form-control"
            [(ngModel)]="singleGridMeasure.title" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <label class="form-field-label" for="plannedStarttimeSinglemeasure">Beginn der geplanten Einzelmaßnahme</label>
          <div class="input-group">
            <label class="input-group-addon dateRangePickerIcon" for="plannedStarttimeSinglemeasure">
              <span class="glyphicon glyphicon-calendar"></span>
            </label>
            <input #input *ngIf="singleGridMeasure.plannedStarttimeSinglemeasure" maxlength="256" [required]="true" type="text" [pattern]="dateTimePattern"
              name="plannedStarttimeSinglemeasure" id="plannedStarttimeSinglemeasure" class="form-control" [ngModel]="singleGridMeasure.plannedStarttimeSinglemeasure|date:dateFormatLocale "
              (ngModelChange)="singleGridMeasure.plannedStarttimeSinglemeasure = $event.target?.value" daterangepicker [options]="{drops: calcDatepickerDropOrientation(input), autoUpdateInput: false,startDate:singleGridMeasure.plannedStarttimeSinglemeasure | stringToDate , singleDatePicker: true}"
              (applyDaterangepicker)="singleGridMeasure.plannedStarttimeSinglemeasure=$event.picker.startDate; " (selected)="selectedDate($event, 'singleGridMeasure.plannedStarttimeSinglemeasure')"
            />
            <input #input *ngIf="!singleGridMeasure.plannedStarttimeSinglemeasure" maxlength="256" [required]="true" type="text" [pattern]="dateTimePattern"
              [ngModel]="singleGridMeasure.plannedStarttimeSinglemeasure" name="plannedStarttimeSinglemeasure" id="plannedStarttimeSinglemeasure"
              class="form-control" autocomplete="no" daterangepicker [options]="{drops: calcDatepickerDropOrientation(input), autoUpdateInput: false, singleDatePicker: true}"
              (applyDaterangepicker)="singleGridMeasure.plannedStarttimeSinglemeasure=$event.picker.startDate;" (selected)="selectedDate($event, 'singleGridMeasure.plannedStarttimeSinglemeasure')"
            />
          </div>
        </div>


        <div class="col-md-4">
          <label class="form-field-label" for="plannedEndtimeSinglemeasure">Ende der geplanten Einzelmaßnahme</label>
          <div class="input-group">
            <label class="input-group-addon dateRangePickerIcon" for="plannedEndtimeSinglemeasure">
              <span class="glyphicon glyphicon-calendar"></span>
            </label>
            <input #input *ngIf="singleGridMeasure.plannedEndtimeSinglemeasure" maxlength="256" [required]="true" type="text" [pattern]="dateTimePattern"
              name="plannedEndtimeSinglemeasure" id="plannedEndtimeSinglemeasure" class="form-control" daterangepicker [ngModel]="singleGridMeasure.plannedEndtimeSinglemeasure|date:dateFormatLocale "
              (ngModelChange)="singleGridMeasure.plannedEndtimeSinglemeasure = $event.target?.value" [options]="{drops: calcDatepickerDropOrientation(input), autoUpdateInput: false, startDate:singleGridMeasure.plannedEndtimeSinglemeasure | stringToDate , singleDatePicker: true}"
              (applyDaterangepicker)="singleGridMeasure.plannedEndtimeSinglemeasure=$event.picker.startDate; " (selected)="selectedDate($event, 'singleGridMeasure.plannedEndtimeSinglemeasure')"
            />
            <input #input *ngIf="!singleGridMeasure.plannedEndtimeSinglemeasure" maxlength="256" [required]="true" type="text" [pattern]="dateTimePattern"
              [ngModel]="singleGridMeasure.plannedEndtimeSinglemeasure" name="plannedEndtimeSinglemeasure" id="plannedEndtimeSinglemeasure"
              class="form-control" autocomplete="no" daterangepicker [options]="{drops: calcDatepickerDropOrientation(input), autoUpdateInput: false, singleDatePicker: true}"
              (applyDaterangepicker)="singleGridMeasure.plannedEndtimeSinglemeasure=$event.picker.startDate;" (selected)="selectedDate($event, 'singleGridMeasure.plannedEndtimeSinglemeasure')"
            />
          </div>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="affectedResourceControl">Betroffenes Objekt / Betriebsmittel</label>
          <input disabled="disabled" maxlength="256" [required]="true" type="text" name="affectedResource" id="affectedResourceControl"
            list="affectedResourcesList" [(ngModel)]="gridMeasureDetail.affectedResource" autocomplete="off" class="form-control"
          />
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <label class="form-field-label" for="responsibleOnSiteName">Verantwortlich Vor-Ort</label>
          <input maxlength="256" [required]="true" type="text" list="responsibleOnSiteNameList" name="responsibleOnSiteName" id="responsibleOnSiteName"
            [(ngModel)]="gridMeasureDetail.responsibleOnSiteName" class="form-control" autocomplete="off" />
          <datalist id="responsibleOnSiteNameList">
            <option value=""></option>
            <option *ngFor="let responsibleOnSiteNameString of responsibleOnSiteNameList" value="{{ responsibleOnSiteNameString }}">{{responsibleOnSiteNameString}}</option>
          </datalist>
        </div>

        <div class="col-md-4">
          <label class="form-field-label" for="responsibleOnSiteDepartment">Abteilung Verantwortlicher Vor-Ort</label>
          <input maxlength="256" [required]="false" type="text" list="responsibleOnSiteDepartmentList" name="responsibleOnSiteDepartment"
            id="responsibleOnSiteDepartment" [(ngModel)]="gridMeasureDetail.responsibleOnSiteDepartment" class="form-control"
            autocomplete="off" />
          <datalist id="responsibleOnSiteDepartmentList">
            <option *ngFor="let responsibleOnSiteDepartmentString of responsibleOnSiteDepartmentList">{{responsibleOnSiteDepartmentString}}</option>
          </datalist>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="NetworkControls">Netzführung / Netzservice / Genehmiger</label>
          <input maxlength="256" [required]="false" type="text" list="NetworkControlsList" name="NetworkControls" id="NetworkControls"
            [(ngModel)]="singleGridMeasure.NetworkControls" class="form-control" autocomplete="off" />
          <datalist id="NetworkControlsList">
            <option value=""></option>
            <option *ngFor="let NetworkControlsString of NetworkControlsList" value="{{ NetworkControlsString }}">{{getNetworkControlsString}}</option>
          </datalist>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12">
          <label class="form-field-label" for="singleGMDescription">Beschreibung</label>
          <textarea style="resize:none;" maxlength="1024" [required]="true" rows="3" name="singleGMDescription" id="singleGMDescription"
            class="form-control" [(ngModel)]="singleGridMeasure.description"></textarea>
        </div>
      </div>
      <hr>
    </fieldset>

    <div class="col-md-4 step-container">
      <app-step style="width: 100%" [isReadOnlyForm]="readOnlyForm" [(singleGridMeasure)]="singleGridMeasure">
        loading ...
      </app-step>
    </div>
    <div class="col-md-8 steps-grid-container">
      <app-steps style="width: 100%" [gridId]="'steps'" [withEditButtons]="true" [gridMeasureDetail]="gridMeasureDetail" [(singleGridMeasure)]="singleGridMeasure">
        loading ...
      </app-steps>
    </div>
  </form>
</div>