<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" id="mainEntryTable">
      <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"
                  (ngModelChange)="notification.fkRefBranch = $event ? $event : null" name="branchSelection" [required]="!isReadOnlyDialog && !isInstructionDialog">
                    <option *ngIf="isInstructionDialog" value=""></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" 
                  (ngModelChange)="notification.fkRefGridTerritory = $event ? $event : null" name="gridTerritorySelection" [required]="!isReadOnlyDialog && !isInstructionDialog">
                    <option *ngIf="isInstructionDialog" value=""></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, singleDatePicker: true, parentEl: 'md-dialog-container' }"
                  />
                  <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, singleDatePicker: true, parentEl: 'md-dialog-container' }" />
                </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, singleDatePicker: true, parentEl: 'md-dialog-container' }"
                  />
                </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 name="reminderDateFormControl" 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, singleDatePicker: true, parentEl: 'md-dialog-container' }"
                    *ngIf="notification.reminderDate" />
                  <input name="reminderDateFormControl" id="reminderDateFormControl" [disabled]="isReadOnlyDialog" class="form-control entry-input" *ngIf="!notification.reminderDate"
                    type="text" daterangepicker (applyDaterangepicker)="notification.reminderDate=$event.picker.startDate"
                    [options]="{ autoUpdateInput: false, singleDatePicker: true, parentEl: 'md-dialog-container' }" />
                </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, singleDatePicker: true, parentEl: 'md-dialog-container' }"
                    *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, singleDatePicker: true, parentEl: 'md-dialog-container' }" />
                </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, singleDatePicker: true, parentEl: 'md-dialog-container' }"
                    disabled="true" />
                  <input class="form-control entry-input" *ngIf="!notification.createDate" type="text" daterangepicker disabled="true" [options]="{ autoUpdateInput: false, singleDatePicker: true, parentEl: 'md-dialog-container' }"
                    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" type="button" (click)="cancel()">Abbrechen</button>
  </div>

</form>