<form #entryForm="ngForm">

  <header>
    <h2 *ngIf="!isInstructionDialog && !isEditDialog && !isReadOnlyDialog">
      Betriebstagebucheintrag anlegen
    </h2>
    <h2 *ngIf="isInstructionDialog && !isEditDialog && !isReadOnlyDialog">
      Anweisung anlegen  
    </h2>
    <h2 *ngIf="!isInstructionDialog && isEditDialog && !isReadOnlyDialog">
      Betriebstagebucheintrag bearbeiten
    </h2>
    <h2 *ngIf="isInstructionDialog && isEditDialog && !isReadOnlyDialog">
      Anweisung bearbeiten
    </h2>
    <table *ngIf="isReadOnlyDialog && notificationVersions">
      <tbody>
        <tr>
          <td class="text-left" colspan="3"><label style="font-size:30px;margin-left: 5px;">Meldungshistorie anzeigen</label></td>
        </tr>
        <tr>
          <td class="text-left"><label style="font-size:22px;margin-right:5px;margin-left:5px;">Version</label></td>
          <td class="text-right" style="width: 70px;">
            <div class="form-group" >
              <select style="height:30px !important" class="form-control" name="notificationSelection" (change)="onNotificationVersionChange($event.target.value)">
                <option class="nvo" dir="rtl" *ngFor="let notificationVersion of notificationVersions" [selected]="notificationVersion.version == notification.version">{{notificationVersion.version}}</option>
              </select>
            </div>
          </td>
           <td class="text-left"><label style="font-size:22px; margin-left:5px;">erstellt am {{ (notification.modDate || notification.createDate) | formattedTimestamp: 'DD.MM.YYYY HH:mm' }}</label></td>
        </tr>
      </tbody>
    </table>
  </header>
  <fieldset [disabled]="isReadOnlyDialog">
    <div class="panel panel-default entry-dialog">
      <div class="panel-body">
        <table class="table">
          <tbody>
            <tr>
              <td class="text-right"><label>Bereich</label></td>
              <td class="text-left" style="width: 17%">
                <div class="form-group">
                  <select class="form-control" [(ngModel)]="notification.fkRefBranch" name="branchSelection" [required]="!isReadOnlyDialog && !isInstructionDialog">
                    <option *ngIf="isInstructionDialog"></option>
                    <option *ngFor="let branch of branches" value="{{ branch.id }}">{{ branch.description }}</option>
                  </select>
                </div>
              </td>            
              <td></td>            
              <td class="text-right"><label>Netzgebiet</label></td>
              <td class="text-left" style="width: 17%">
                <div class="form-group">
                  <select class="form-control" [(ngModel)]="notification.fkRefGridTerritory" name="gridTerritorySelection" [required]="!isReadOnlyDialog && !isInstructionDialog">
                    <option *ngIf="isInstructionDialog"></option>
                    <option *ngFor="let gridTerritory of gridTerritories" value="{{ gridTerritory.id }}">{{ gridTerritory.description }}</option>
                  </select>
                </div>
              </td>
              <td></td>              
              <td colspan="1" class="text-right"><label>Status</label></td>
              <td class="text-left" style="width: 17%">
                <select class="form-control" name="status" [(ngModel)]="notification.fkRefNotificationStatus" (ngModelChange)="statusChanged($event,notification)"
                  name="statusSelection" [required]="!isReadOnlyDialog">
                <option *ngFor="let status of statuses" value="{{ status.id }}" >{{ status.name }} </option>
              </select>
              </td>
            <td></td>
            </tr>
          </tbody>
        </table>
          <table class="table">
          <tbody>
            <tr>
              <td colspan="10">
                <textarea class="form-control entry-textarea" placeholder="Meldungstext" [(ngModel)]="notification.notificationText" name="notificationTextArea"
                  maxlength="200" [required]="!isReadOnlyDialog"></textarea>
              </td>
            </tr>
            <tr>
              <td colspan="10">
                <textarea class="form-control entry-textarea" placeholder="Freitext" [(ngModel)]="notification.freeText" name="freeTextArea"
                  maxlength="1000"></textarea>
              </td>
            </tr>
            <tr>
              <td colspan="10">
                <textarea class="form-control entry-textarea" placeholder="weiterer Freitext" [(ngModel)]="notification.freeTextExtended"
                  name="freeTextExtendedTextArea" maxlength="1000"></textarea>
              </td>
            </tr>
            <tr>
              <td>
                <label>Zuständigkeit / weitergeleitet an</label>
              </td>
              <td colspan="2">              
                <app-autocomplete [(responsibilityForwarding)] = "notification.responsibilityForwarding"></app-autocomplete>               
              </td>
              <td></td>
              <td>
                <label>Erledigt vorauss. bis</label>
              </td>
              <td colspan="2">
                <div class="input-group">
                  <label for="expectedFinishDateFormControl" class="input-group-addon dateRangePickerIcon" [ngClass]="{'dateRangePickerIcon': !isReadOnlyDialog}"><span class="glyphicon glyphicon-calendar" [ngClass]="{'glyphicon-calendar': !isReadOnlyDialog}"></span></label>
                  <input id="expectedFinishDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" *ngIf="notification.expectedFinishDate" type="text"
                    daterangepicker (applyDaterangepicker)="notification.expectedFinishDate=$event.picker.startDate " [options]="{ startDate: notification.expectedFinishDate | stringToDate, endDate: notification.expectedFinishDate | stringToDate }"
                  />
                  <input id="expectedFinishDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" *ngIf="!notification.expectedFinishDate" type="text"
                    daterangepicker (applyDaterangepicker)="notification.expectedFinishDate=$event.picker.startDate " [options]="{ autoUpdateInput: false }"
                  />
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <label>Letzter Bearbeiter</label>
              </td>
              <td colspan="2">
                <input class="form-control entry-input last_change_usr_test" type="text" [(ngModel)]="notification.responsibilityControlPoint" name="responsibilityControlPointInput"
                  disabled="true">
              </td>
              <td>
              </td>
               <td>
                <label>Beginnt am</label>
              </td>
              <td colspan="2">
                <div class="input-group">
                  <label for="beginDateFormControl"   class="input-group-addon dateRangePickerIcon" [ngClass]="{'dateRangePickerIcon': !isReadOnlyDialog}"><span class="glyphicon glyphicon-calendar" [ngClass]="{'glyphicon-calendar': !isReadOnlyDialog}"></span></label>
                  <input id="beginDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" *ngIf="notification.beginDate" type="text" daterangepicker  (applyDaterangepicker)="notification.beginDate=$event.picker.startDate "
                    [options]="{ startDate: notification.beginDate | stringToDate, endDate: notification.beginDate | stringToDate }"
                  />
                </div>
              </td>
            </tr>
            <tr>
              <td style="width: 24%">
                <label>Erinnerung</label>
              </td>
              <td style="width: 24%" colspan="2">
                <div class="input-group" >
                  <label for="reminderDateFormControl" class="input-group-addon dateRangePickerIcon" [ngClass]="{'dateRangePickerIcon': !isReadOnlyDialog}"><span class="glyphicon glyphicon-calendar" [ngClass]="{'glyphicon-calendar': !isReadOnlyDialog}"></span></label>
                  <input id="reminderDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" type="text" (applyDaterangepicker)="notification.reminderDate=$event.picker.startDate"
                    daterangepicker [options]="{ startDate: notification.reminderDate | stringToDate, endDate: notification.reminderDate | stringToDate }"
                    *ngIf="notification.reminderDate" />
                  <input id="reminderDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" *ngIf="!notification.reminderDate" type="text" daterangepicker
                    (applyDaterangepicker)="notification.reminderDate=$event.picker.startDate" [options]="{ autoUpdateInput: false }"
                  />
                </div>
              </td>
              <td style="width: 2%"></td>
              <td style="width: 20%">
                <label>Erledigt am</label>
              </td>
               <td colspan="2">
                <div class="input-group" >
                  <label for="finishedDateFormControl" class="input-group-addon dateRangePickerIcon" [ngClass]="{'dateRangePickerIcon': !isReadOnlyDialog}"><span class="glyphicon glyphicon-calendar" [ngClass]="{'glyphicon-calendar': !isReadOnlyDialog}"></span></label>
                  <input id="finishedDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" type="text" (applyDaterangepicker)="notification.finishedDate=$event.picker.startDate"
                    daterangepicker [options]="{ startDate: notification.finishedDate | stringToDate, endDate: notification.finishedDate | stringToDate }"
                    *ngIf="notification.finishedDate" />
                  <input id="finishedDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" *ngIf="!notification.finishedDate" type="text" daterangepicker [disabled]="true"
                    (applyDaterangepicker)="notification.finishedDate=$event.picker.startDate" [options]="{ autoUpdateInput: false }"
                  />
                </div>
              </td> 
            </tr>
            <tr>
              <td>
                <label>Datum/Uhrzeit</label>
              </td>
              <td colspan="2">
                <div class="input-group">
                  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar" [ngClass]="{'glyphicon-calendar': !isReadOnlyDialog}"></span></span>
                  <input class="form-control entry-input" *ngIf="notification.createDate" type="text" daterangepicker  [options]="{ startDate: notification.createDate | stringToDate, endDate: notification.createDate | stringToDate }"
                   disabled="true"/>
                   <input class="form-control entry-input" *ngIf="!notification.createDate" type="text" daterangepicker disabled="true" [options]="{ autoUpdateInput: false }"
                   disabled="true"/>
                </div>
              </td>
              <td>
              </td>
              <td>
                <label>Initialer Ersteller</label>
              </td>
              <td colspan="2">
                <input class="form-control entry-input" type="text" [(ngModel)]="notification.createUser" disabled="true" name="creatorInput">
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </fieldset>
  <div>
    <button *ngIf="isEditDialog && !isReadOnlyDialog" class="btn btn-primary btn-sm btn-success" (click)="edit()" autofocus type="submit"
      [disabled]="!entryForm.form.valid">Ändern</button>
    <button *ngIf="!isEditDialog && !isReadOnlyDialog" class="btn btn-primary btn-sm btn-success" (click)="add(isInstructionDialog)" autofocus type="submit"
      [disabled]="!entryForm.form.valid">Hinzufügen</button>
    <button class="btn btn-primary btn-sm" (click)="cancel()">Abbrechen</button>
  </div>

</form>