opt-cc/static/src/app/pub/decoration-overview/decoration-overview.component.html

<div class="decoration-overview-container">
  <h1>{{'public.decorations.headline' | translate}}</h1>

  <div class="fraction-side-bar">
    <div [ngClass]="{active: active === 'ARF'}" (click)="switchFraction('ARF')">{{fraction.ARF}}</div>
    <div [ngClass]="{active: active === 'SWORD'}" (click)="switchFraction('SWORD')">{{fraction.SWORD}}</div>
    <div [ngClass]="{active: active === 'BLUFOR'}" (click)="switchFraction('BLUFOR')">{{fraction.BLUFOR}}</div>
    <div [ngClass]="{active: active === 'OPFOR'}" (click)="switchFraction('OPFOR')">{{fraction.OPFOR}}</div>
    <div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>
  </div>

  <mat-tab-group [selectedIndex]="selectedType" (selectedIndexChange)="switchTab($event)">
    <mat-tab label="{{'public.decorations.medal' | translate}}">
      <ng-template matTabContent>
        <cc-decoration-panel *ngFor="let decoration of medals"
                             [decoration]="decoration"
                             (select)="select($event)">
        </cc-decoration-panel>
      </ng-template>
    </mat-tab>
    <mat-tab label="{{'public.decorations.ribbons' | translate}}">
      <ng-template matTabContent>
        <cc-decoration-panel *ngFor="let decoration of ribbons"
                             [decoration]="decoration"
                             (select)="select($event)">
        </cc-decoration-panel>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>