opt-cc/static/src/app/statistic/war/war-list/war-list.component.html

<div class="war-list-header" *ngIf="!collapsed && loginService.hasPermission(3)">
  <button mat-stroked-button (click)="selectNewCampaign()">
    {{'stats.sidebar.campaign.add' | translate}}
  </button>
  <button mat-stroked-button (click)="selectNewWar()">
    {{'stats.sidebar.battle.add' | translate}}
  </button>
</div>

<div class="list-header"
     [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
  <div class="select-indicator-container">
    <div class="select-indicator"></div>
  </div>
  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.overview'] : ''"
            matTooltipPosition="right"
            svgIcon="stats-chart"></mat-icon>
  <span *ngIf="!collapsed">{{'stats.sidebar.overview' | translate}}</span>
</div>

<div class="list-header"
     [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
  <div class="select-indicator-container">
    <div class="select-indicator"></div>
  </div>
  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.highscore'] : ''"
            matTooltipPosition="right"
            svgIcon="highscore"></mat-icon>
  <span *ngIf="!collapsed">{{'stats.sidebar.highscore' | translate}}</span>
</div>

<div class="list-header-battles">
  <mat-icon [matTooltip]="collapsed ? toolTipTranslation['stats.sidebar.battles'] : ''"
            matTooltipPosition="right"
            svgIcon="battle"></mat-icon>
  <span *ngIf="!collapsed">{{'stats.sidebar.battles' | translate}}</span>
</div>

<div class="battle-list">
  <div *ngFor="let war of campaign.wars$ | async">
    <cc-war-item
      [war]="war"
      (warEdit)="editWar($event)"
      (warDelete)="deleteWar(war)"
      (warSelected)="selectWar($event)"
      [collapsed]="collapsed"
      [selected]="war._id == selectedWarId">
    </cc-war-item>
  </div>
</div>

<div class="fill-vertical-border"
     [ngClass]="{collapsed: collapsed}">
</div>