<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
  <div class=vertical-spacer></div>
  <div style="overflow:hidden">
    <div style="width: 920px;min-height: 205px;">
      <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
      <div class="pull-left head-field" style="width: 250px">
        <h4>Endpunktestand:</h4>
        <span class="text-blufor" style="font-weight: bold; margin-right: 10px">NATO {{war.ptBlufor}}</span>
        <span style="font-size: x-large">|</span>
        <span class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} CSAT</span>
      </div>

      <div class="pull-left head-field " style="padding-left: 140px;">
        <h4 style="margin-bottom: 0;">Teilnehmer:</h4>
        <ngx-charts-pie-chart
          [view]="[120, 120]"
          [scheme]="{domain: ['#B22222', '#0000FF']}"
          [results]="playerChart"
          [legend]="false"
          [explodeSlices]="false"
          [labels]="false"
          [doughnut]="false"
          [gradient]="false">
        </ngx-charts-pie-chart>
      </div>

      <div class="pull-left " style="padding-left: 150px; padding-top:15px">
        <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
          anzeigen</a>
        <form class="form-group">
          <label class="radio-inline">
            <input type="radio" name="fractSelect"
                   [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
                   [(ngModel)]="fractionRadioSelect"
                   (change)="filterPlayersByFraction()">Alle
          </label>
          <label class="radio-inline">
            <input type="radio" name="fractSelect" value="BLUFOR"
                   [(ngModel)]="fractionRadioSelect"
                   #fractRadioBufor
                   (change)="filterPlayersByFraction(fractRadioBufor.value)">NATO
          </label>
          <label class="radio-inline">
            <input type="radio" name="fractSelect" value="OPFOR"
                   [(ngModel)]="fractionRadioSelect"
                   #fractRadioOpfor
                   (change)="filterPlayersByFraction(fractRadioOpfor.value)">CSAT
          </label>
          <br>
        </form>
      </div>
    </div>
  </div>

  <tabset #staticTabs>
    <tab>
      <ng-template tabHeading>
        <img src="../../../assets/scoreboard-btn.png"> Scoreboard
      </ng-template>
      <div class=vertical-spacer></div>
      <ngx-datatable
        [rows]="rows"
        [sorts]="[{prop: 'kill', dir: 'desc'}]"
        [reorderable]="reorderable"
        [messages]="{emptyMessage: 'Loading...'}"
        [headerHeight]="cellHeight"
        [rowHeight]="cellHeight"
        [cssClasses]='customClasses'
        [selectionType]="'single'"
        (select)="selectPlayerDetail($event)">
        <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
          <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
        <span class="player-name"
              [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
          {{value}}
        </span>
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
          <ng-template ngx-datatable-cell-template let-value="value">
            {{value === 'BLUFOR' ? 'NATO' : 'CSAT'}}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
        <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
        <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
        <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
        <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
        <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
      </ngx-datatable>
    </tab>

    <tab (select)="loadFractionData()">
      <ng-template tabHeading>
        <img src="../../../assets/fraction-btn.png"> Fraktionen
      </ng-template>
      <div class="fade-in chart-container">
        <ngx-charts-line-chart
          [scheme]="colorScheme"
          [results]="pointData"
          [gradient]="gradient"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelPoints"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-line-chart>
      </div>
      <div class="fade-in chart-container">
        <ngx-charts-line-chart
          [scheme]="colorScheme"
          [results]="budgetData"
          [gradient]="gradient"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelBudget"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-line-chart>
      </div>
      <div class="fade-in chart-container">
        <ngx-charts-line-chart
          [scheme]="colorScheme"
          [results]="killData"
          [gradient]="gradient"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelKill"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-line-chart>
      </div>
      <div class="fade-in chart-container">
        <ngx-charts-line-chart
          [scheme]="colorScheme"
          [results]="friendlyFireData"
          [gradient]="gradient"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelFriendlyFire"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-line-chart>
      </div>
      <div class="fade-in chart-container">
        <ngx-charts-line-chart
          [scheme]="colorScheme"
          [results]="transportData"
          [gradient]="gradient"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelTransport"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-line-chart>
      </div>
      <div class="fade-in chart-container">
        <ngx-charts-line-chart
          [scheme]="colorScheme"
          [results]="reviveData"
          [gradient]="gradient"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelRevive"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-line-chart>
      </div>
      <div class="fade-in chart-container">
        <ngx-charts-line-chart
          [scheme]="colorScheme"
          [results]="stabilizedData"
          [gradient]="gradient"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelStabilize"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-line-chart>
      </div>
      <div class="fade-in chart-container">
        <ngx-charts-area-chart
          [scheme]="colorScheme"
          [results]="flagData"
          [xAxis]="xAxis"
          [yAxis]="yAxis"
          [curve]="stepCurve"
          [legend]="legend"
          [legendTitle]="legendTitle"
          [showXAxisLabel]="showXAxisLabel"
          [showYAxisLabel]="showYAxisLabel"
          [yAxisLabel]="yAxisLabelFlag"
          [autoScale]="autoscale"
          [timeline]="timeline"
          [roundDomains]="roundDomains">
        </ngx-charts-area-chart>
      </div>
    </tab>
  </tabset>

</div>