<div class="row">
  <div class="col-md-12">
    <ol class="breadcrumb">
      <li><a href="#/championships/">Kampioenschappen</a></li>
      <li><a href="#/championship/{{currentChampionship}}/poules">Poules voor {{currentChampionship}}</a></li>
      <li class="active">Races in poule/tier {{currentPoule}}/{{currentTier}}</li>
    </ol>
  </div></div>

  <div class="row">
    <div class="col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Races</h3>
        </div>
        <div class="panel-body">
          <table class="table table-condensed table-striped">
            <tr><th>Team</th><th>Raceid</th><th>Totaaltijd</th><th>Ritten</th><th>Acties</th></tr>
            <tr ng-repeat="race in racesInPoule">
              <td>{{race.name}}</td>
              <td>{{race.idrace}}</td>
              <td>{{race.totaltime | secondsToString}}</td>
              <td>{{race.lapagg}}</td>
              <td>
                <a class="btn btn-info btn-sm" href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/race/{{race.idrace}}/measurements">
                  Tijden <span class="badge">{{race.measurementcount}}</span>
                </a>
                <a class="btn btn-info btn-sm" href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/race/{{race.idrace}}/drives">
                  Ritten <span class="badge">{{race.drivecount}}</span>
                </a>
                <button type="button" class="btn btn-default btn-sm"
                ng-class="{'btn-success' : getActiveRace().idrace == race.idrace, 'btn-warning' : getActiveRace().idrace != race.idrace}"
                ng-click="toggleActiveRace(race)" title="Zet deze race actief om metingen te registreren">
                <span
                class="glyphicon"
                ng-class="{'glyphicon-play' : getActiveRace().idrace == race.idrace, 'glyphicon-pause' : getActiveRace().idrace != race.idrace}"
              </span>
            </button>
            <a class="btn btn-danger btn-sm" href="" ng-click="deleteRace(race)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div class="col-md-4">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Voeg race toe</h3>
    </div>
    <div class="panel-body">


      <div class="panel panel-default">
        <div class="panel-heading">Met een team uit de poule...</div>
        <div class="panel-body">
          <div class="list-group">
            <a href="" class="list-group-item list-group-item-sm" ng-repeat="team in teamsInPoule" ng-click="setSelectedTeam(team)" ng-class="{active: selectedTeam==team}">{{team.name}}</a>
          </div>
          <button type="button" class="btn btn-success" ng-click="addRace(newrace);" ng-disabled="selectedTeam == null" title="Maak een nieuwe race aan voor het geselecteerde team.">Maak nieuwe race</button>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading">Met alle teams...</div>
        <div class="panel-body">
          <button type="button" class="btn btn-success" ng-disabled="teamsInPoule.length == 0" ng-click="addRaceForAllteams();" title="Maak nieuwe races aan voor alle bovenstaande teams.">Maak race voor elk team</button>
        </div>
      </div>
    </div><!-- end row -->
  </div>
</div>
</div>
