<form #form="ngForm" class="overview">
  <h3>Teilnehmer auszeichnen</h3>

  <div class="form-group">
    <label for="decoration">Auszeichnung</label>
    <select class="form-control"
            name="decoration"
            id="decoration"
            #decorationField
            (change)="toggleDecoPreview(decoDescription, decorationField.value, decoPreview)"
            [ngModel]="undefined"
            required
            style="min-width: 200px;">
      <option *ngFor="let deco of decorations" [value]="deco._id">
        {{deco.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{deco.name}}
      </option>
    </select>

    <show-error text="Auszeichnung" path="decoration"></show-error>
  </div>

  <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
    <div class="div-table-col content-s">
      &nbsp;
    </div>
    <div class="div-table-col content-m-flex decoration-preview" style="border-radius: 15px 0px 0px 15px;">
      <img class="center-block" #decoPreview>
    </div>
    <div class="div-table-col content-l decoration-preview"
         style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
      &nbsp;
    </div>
    <div class="div-table-col content-s">
      &nbsp;
    </div>
  </div>

  <div class="form-group">
    <label for="reason">Begründung</label>
    <textarea class="form-control center-block" name="reason" [ngModel]="undefined" required
              id="reason" placeholder="Begründung eingeben..." rows="3" #awardTextArea></textarea>
    <show-error text="Begründung" path="reason"></show-error>
  </div>


  <button id="cancel"
          (click)="cancel()"
          class="btn btn-default">
    Abbrechen
  </button>

  <button id="save"
          (click)="addAwarding(decorationField, awardTextArea, decoPreview, decoDescription)"
          class="btn btn-default"
          [disabled]="!form.valid">
    Bestätigen
  </button>

  <span *ngIf="showSuccessLabel"
        class="label label-success label-small"
        style="margin-left: inherit">
        Erfolgreich gespeichert
  </span>

  <div class="table-container">
    <table class="table table-hover">
      <thead>
      <tr>
        <th class="col-sm-1">Bild</th>
        <th class="col-sm-2">Bezeichnung</th>
        <th class="col-sm-2">Begründung</th>
        <th class="col-sm-1 text-right">Datum</th>
        <th class="col-sm-1 text-center"></th>
      </tr>
      </thead>
      <tbody *ngFor="let award of awards">
      <tr>
        <td class="table-cell-id" *ngIf="award.decorationId.isMedal">
          <img height="40px" src="resource/decoration/{{award.decorationId._id}}.png">
        </td>
        <td class="table-cell-id" *ngIf="!award.decorationId.isMedal">
          <img width="60px" src="resource/decoration/{{award.decorationId._id}}.png">
        </td>
        <td>
          {{award.decorationId.name}}
        </td>
        <td>
          {{award.reason}}
        </td>
        <td class="text-right">
          <a class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</a>
        </td>
        <td class="text-center">
          <span class="glyphicon glyphicon-trash trash" title="Löschen" (click)="deleteAwarding(award._id)"></span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>

</form>