<div class="return-button">
  <span class="btn btn-default" style="float:left" (click)="backToOverview()">< zurück zur Übersicht</span>

  <h3 [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'" style="padding-left: 20%;">
    Auszeichnungen von {{user.rank?.name}} {{user.username}}
  </h3>
</div>


<div class="overview">

  <div>
    <img style="margin-left: 13%;" src="/signatures/{{user.username}}">
  </div>
  <div class="input-group" style="width: 662px; margin-left: 13%;">
    <input type="text" style="background: white;" class="form-control" [(ngModel)]="signatureUrl" readonly>
    <span class="input-group-btn">
        <button class="btn btn-default" [class.btn-success]="isCopied" type="button"
                ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">kopieren</button>
      </span>
  </div>

  <div class="pull-left" style="margin-top:20px;">
    <div class="table-container" style="width: 75%; min-width: 500px">
      <table class="table table-hover">
        <thead>
        <tr class="table-head">
          <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
          <th class="col-sm-2">Bezeichnung</th>
          <th class="col-sm-2">Begründung</th>
          <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
        </tr>
        </thead>
        <tbody *ngFor="let award of user.awards">
        <tr class="cell-outline">
          <td class="text-center" *ngIf="award.decorationId.isMedal">
            <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
          </td>
          <td class="text-center" *ngIf="!award.decorationId.isMedal">
            <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
          </td>
          <td style="font-weight: bold">
            {{award.decorationId.name}}
          </td>
          <td>
            {{award.reason}}
          </td>
          <td class="text-right">
            <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

  </div>

</div>