<!--
******************************************************************************
* 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
******************************************************************************

-->
<app-loading-spinner *ngIf="showSpinnerGrid"></app-loading-spinner>
<div #gridMeasureDetailHeaderContainer>
  <form #gridMeasureDetailHeaderForm="ngForm" *ngIf="!showSpinnerGrid" (change)="onGridMeasureHeaderFormValidation(gridMeasureDetailHeaderForm.form.valid)">
    <fieldset class="form-group" disabled="{{ readOnlyForm ? 'disabled' : ''}}">

      <!-- 1. Row -->
      <div class="row">
        <div class="col-md-2">
          <label class="form-field-label" for="id">Nummer (ID)</label>
          <input maxlength="256" [required]="false" type="text" name="id" id="id" [(ngModel)]="gridMeasureDetail.descriptiveId"
            class="form-control" />
        </div>
        <div class="col-md-2">
          <label class="form-field-label" for="branch">Sparte</label>
          <select [required]="false" type="text" name="branch" id="branch" [(ngModel)]="gridMeasureDetail.branchId"
            class="form-control" (change)="getBranchLevelsByBranch($event.target.value)">
            <option value=""></option>
            <option *ngFor="let branch of brancheList" value="{{ branch.id }}">{{ branch.description }}</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-field-label" for="level">Ebene</label>
          <select [required]="false" type="text" name="level" id="level" [disabled]="!isBranchLevelActive" [(ngModel)]="gridMeasureDetail.branchLevelId"
            class="form-control">
            <option *ngFor="let levelObject of branchLevelList" value="{{levelObject.id}}">{{levelObject.name}}</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="areaOfSwitching">Gebiet (Region) der Maßnahme</label>
          <input maxlength="256" [required]="true" type="text" list="areaOfSwitchingList" name="areaOfSwitching" id="areaOfSwitching"
            [(ngModel)]="gridMeasureDetail.areaOfSwitching" class="form-control" autocomplete="off" />
          <datalist id="areaOfSwitchingList">
            <option *ngFor="let areaOfSwitchingListString of areaOfSwitchingList">{{areaOfSwitchingListString}}</option>
          </datalist>
        </div>
        <div class="col-md-2">
          <label class="form-field-label" for="statusId">Status</label>
          <select [required]="false" type="text" name="statusId" id="statusId" [(ngModel)]="gridMeasureDetail.statusId"
            class="form-control">
            <option *ngFor="let status of statusList" value="{{ status.id }}">{{ status.name }}</option>
          </select>
        </div>
      </div>

      <!-- 2. Row -->
      <div class="row">
        <div class="col-lg-12">
          <label class="form-field-label" for="titleControl">Titel der Maßnahme</label>
          <input maxlength="256" placeholder="Bitte Titel der Maßnahme ausfüllen" [required]="true" type="text" name="title"
            id="titleControl" [(ngModel)]="gridMeasureDetail.title" #gmTitle (keyup)="onGridMeasureTitleChange(gmTitle.value)"
            class="form-control" />
        </div>
      </div>

      <!-- 3. Row -->
      <div class="row">
        <div class="col-md-4">
          <label class="form-field-label" for="applicantControl">Antragsteller</label>
          <input maxlength="256" type="text" name="applicant" id="applicantControl" [ngModel]="sessionContext.getUserMap().findAndRenderUser(gridMeasureDetail.createUser || sessionContext.getCurrUser().username) "
            class="form-control" />
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="createUserDepartment">Abteilung Ersteller</label>
          <input maxlength="256" [required]="true" type="text" list="departmentList" name="createUserDepartment" id="createUserDepartment"
            [(ngModel)]="gridMeasureDetail.createUserDepartment" class="form-control" autocomplete="off" />
          <datalist id="departmentList">
            <option *ngFor="let department of departmentList">{{ department }}</option>
          </datalist>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="costCenter">Kostenstelle</label>
          <input maxlength="256" [required]="true" type="text" list="costCenters" name="costCenter" id="costCenter"
            [(ngModel)]="gridMeasureDetail.costCenter" class="form-control" autocomplete="off" />
          <datalist id="costCenters">
            <option *ngFor="let costCenter of costCenters">{{ costCenter.name }}</option>
          </datalist>
        </div>

      </div>

    </fieldset>
  </form>
</div>