<ol class="breadcrumb">
  <li><a href="#/championships/">Kampioenschappen</a></li>
  <li><a href="#/championship/{{currentChampionship}}/poules">Poules voor {{currentChampionship}}</a></li>
  <li><a href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/races">Races voor poule {{currentTier}}/{{currentPoule}}</a></li>
  <li class="active">Ritten voor race {{currentRace}}</li>
</ol>

<div class="row">
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Ritten</h3>
      </div>
      <div class="panel-body">
        <table class="table">
          <tr><th>Rit nr.</th><th>Laps</th><th>Chauffeur</th><th>Acties</th></tr>
          <tr ng-repeat="drive in drives | orderBy:'drivenr'">
            <td>{{drive.drivenr}}</td>
            <td>{{drive.laps}}</td>
            <td>{{drive.drivername}}</td>
            <td>
              <a class="btn btn-info btn-sm" href="#/championship/{{currentChampionship}}/poule/{{currentTier}}/{{currentPoule}}/race/{{drive.idrace}}/drive/{{drive.drivenr}}/comments">
                Commentaar <span class="badge">{{drive.commentcount}}</span>
              </a>
              <a class="btn btn-danger btn-sm" href="" ng-click="deleteDrive(drive.drivenr, drive.idrace)">Verwijder</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 rit toe</h3>
      </div>
      <div class="panel-body">


        <div class="panel panel-default">
          <div class="panel-heading">Kies chauffeur</div>
          <div class="panel-body">
            <div class="list-group">
              <a href="" class="list-group-item" ng-repeat="driver in team.drivers" ng-click="setSelectedDriver(driver)" ng-class="{active: selectedDriver==driver}">
                {{driver.drivername}}
              </a>
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">Opties en acties</div>
          <div class="panel-body">
            <div class="row">
              <label class="col-md-3"><h4>Laps</h4></label>
              <!-- <div class="col-md-1"><h4>Laps</h4></div> -->
              <div class="col-md-9">
                <div class="btn-group" role="group" aria-label="First group">
                  <button type="button" class="btn btn-default" ng-repeat="lapamount in lapamounts" ng-click="setSelectedLapamount(lapamount)" ng-class="{active:selectedLapamount==lapamount}">{{lapamount}}</button>
                </div>
              </div>
            </div>
            <button type="button" class="btn btn-default" ng-click="addDrive();" ng-disabled="selectedDriver == null">Voeg rit toe</button>
            <button type="button" class="btn btn-default" ng-click="addBatchDrives();" ng-disabled="selectedDriver == null" tooltip="Voegt ritten van x lap(s) toe voor iedere chauffeur in deze race.">Voeg {{selectedLapamount}}/{{selectedLapamount}}/.. toe</button>
          </div>
        </div>
      </div><!-- end row -->
    </div>
  </div>
</div>
