<div class="select-list">
  <div class="input-group list-header" *ngIf="loginService.hasPermission(3)">
    <button mat-stroked-button class="stats-add-btn" (click)="selectNewWar()">
      Schlacht hinzufügen
    </button>
    <button mat-stroked-button class="stats-add-btn" (click)="selectNewCampaign()">
      Kampagne hinzufügen
    </button>
  </div>

  <mat-accordion *ngFor="let campaign of campaigns; let isFirstRow=first">
    <mat-expansion-panel [expanded]="isFirstRow">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{campaign.title}}
        </mat-panel-title>
        <mat-panel-description class="war-interaction-panel" *ngIf="loginService.hasPermission(3)">
          <span (click)="deleteCampaign(campaign); $event.stopPropagation()" matTooltip="Löschen"
                class="glyphicon glyphicon-trash trash">
          </span>
          <span (click)="editCampaign(campaign); $event.stopPropagation()" matTooltip="Bearbeiten"
                class="glyphicon glyphicon-edit trash"
                style="padding-right: 10px;">
          </span>
        </mat-panel-description>
      </mat-expansion-panel-header>
      <div class="top-list-entry">
        <div class="fade-in list-entry"
             [ngClass]="{selected : selectedWarId == campaign._id}" (click)="selectOverview(campaign._id)">
          <div>
            <span>
              <a>Übersicht</a>
            </span>
          </div>
        </div>
        <div class="fade-in list-entry"
             [ngClass]="{selected : selectedWarId == campaign._id + highscore}" (click)="selectHighscore(campaign._id)">
          <div>
            <span>
              <a>Highscore</a>
            </span>
          </div>
        </div>
      </div>
      <div *ngFor="let war of campaign.wars">
        <cc-war-item
          [war]="war"
          (warEdit)="editWar($event)"
          (warDelete)="deleteWar(war)"
          (warSelected)="selectWar($event)"
          [selected]="war._id == selectedWarId">
        </cc-war-item>
      </div>
    </mat-expansion-panel>
  </mat-accordion>

  <div class="fade-in list-entry"
       style="background: white"
       [ngClass]="{selected : selectedWarId == 'all'}" (click)="selectOverview('all')">
    <div class="row">
      <div class="col-xs-9">
      <span>
        <a>Gesamtübersicht</a>
      </span>
      </div>
    </div>
  </div>

</div>