opt-cc/static/src/app/pub/user-list-sheet/user-list-sheet.component.html

<div *ngIf="data.rank">
  <img class="pull-left" src="resource/rank/{{data.rank._id}}.png" height="65">
  <h4 style="text-align: center;height: 65px; padding-top: 20px;">
    {{'public.list.users.headline' | translate}} {{'public.ranks.rank' | translate}} {{data.rank.name}}
  </h4>
</div>

<div *ngIf="data.decoration">
  <img src="resource/decoration/{{data.decoration._id}}.png"
       height="{{data.decoration.isMedal ? 65 : 32}}"
       style="float:left;">
  <h4 style="text-align: center;"
      [style.height]="data.decoration.isMedal ? '65px' : 'inherit'"
      [style.padding-top]="data.decoration.isMedal ? '20px' : 'inherit'">
    {{'public.list.users.headline' | translate}} {{data.decoration.isMedal ? 'Orden' : 'Ordensband'}} : {{data.decoration.name}}
  </h4>
</div>

<mat-nav-list *ngFor="let user of users">
  <a mat-list-item (click)="selectUser(user)">
      <span mat-line>
        {{user.username}}
      </span>
    <span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
        {{user.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} - {{user.squadId.name}}
      </span>
  </a>
</mat-nav-list>