opt-cc/static/src/app/pub/decoration-overview/decoration-overview.compone...

31 lines
1.4 KiB
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>