<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 tier/poule {{currentTier}}/{{currentPoule}}</a></li>
  <li class="active">Metingen voor race {{currentRace}}</li>
</ol>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Metingen
      <span ng-show="drivesExpanded.length+1>measurements.length && drivesExpanded.length>0" class="label label-warning pull-right">Meting ontbrekend <span class="badge">{{drivesExpanded.length+1 - measurements.length}}</span></span>
      <span ng-show="drivesExpanded.length+1==measurements.length && drivesExpanded.length>0" class="glyphicon glyphicon-ok label-success label pull-right"> </span>
      <span ng-show="drivesExpanded.length==0" class="glyphicon glyphicon-exclamation-sign label-danger label pull-right"> Geen ritten aanwezig</span>
      <span ng-show="drivesExpanded.length+1<measurements.length && drivesExpanded.length>0" class="glyphicon glyphicon-exclamation-sign label-warning label pull-right"> Teveel metingen</span>
    </h3>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-xs-12">
        <table class="table">
          <tr><th>id</th><th>Timestamp</th><th>Geldig</th><th>Manueel</th><th>Sensor</th><th>Sensortijd</th><th>Acties</th><th>Geassocieerde ritten</th></tr>
          <tr ng-repeat="measurement in measurements | orderBy:'timestamp'">
            <td>{{measurement.idmeasurement}}</td>
            <td><h5><span class="label label-default">{{measurement.timestamp}}</span></h5></td>
            <td><input type="checkbox" ng-model="measurement.valid" ng-change="measurementValidityChanged(measurement)" ng-true-value="'t'" ng-false-value="'f'"/></td>
            <td><span class="glyphicon" ng-class="{'glyphicon-ok':measurement.manual=='t', 'glyphicon-remove':measurement.manual=='f'}" aria-hidden="true"></span></td>
            <td>{{measurement.sensor}}</td>
            <td><h5><span class="label label-default">{{measurement.sensortime}}</span></h5></td>
            <td>
              <button type="button" class="btn btn-danger btn-sm" ng-click="deleteMeasurement(measurement);">
                <span class="glyphicon glyphicon-remove" aria-hidden="true" title="Verwijder"> </span>
              </button>
            </td>
            <td>
              <div ng-show="$index==0"><small>Start!</small></div>
              <div ng-show="$index>0 && $index<=drivesExpanded.length">
                <small>Ronde {{drivesExpanded[$index-1].lap}} door {{drivesExpanded[$index-1].drivername}}</small>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Opties en acties</h3>
  </div>
  <div class="panel-body">

    <div class="well">
      <div class="row">
        <div class="col-xs-9">
          <input type="text" class="form-control" readonly ng-model="rightnow"></input>
        </div>
        <div class="col-xs-3">
          <button type="button" class="btn btn-success btn-sm" ng-click="addMeasurementNow();">Voeg "nu" toe aan race {{currentRace}}</button>
        </div>
      </div>
    </div>

    <div class="well">
      <div class="row">
        <div class="col-sm-9">
          <form name="relativeTimestampForm" class="form-horizontal">
            <div class="form-group">
              <label for="inputTimepicker" class="col-sm-2 control-label">Relatieve start</label>
              <div class="col-sm-10">
                <!-- <input type="email" class="form-control" id="inputTimepicker" placeholder="Email"> -->
                <timepicker ng-model="relativeRaceStart" id="inputTimepicker" ng-change="relativeTimestampChanged()" hour-step="1" minute-step="1" show-meridian="ismeridian"></timepicker>
              </div>
            </div>
            <div class="form-group">
              <label for="inputExtraMinutes" class="col-sm-2 control-label">Extra minuten</label>
              <div class="col-sm-10">
                <!-- <input type="email" class="form-control" id="inputTimepicker" placeholder="Email"> -->
                <input type="number" min="0" max="60" name="relativeRaceStartAddMinutes" class="form-control" id="inputExtraMinutes" ng-model="relativeRaceStartAddMinutes" ng-change="relativeTimestampChanged()" required/>
              </div>
            </div>
            <div class="form-group">
              <label for="inputExtraSeconds" class="col-sm-2 control-label">Extra seconden</label>
              <div class="col-sm-10">
                <!-- <input type="email" class="form-control" id="inputTimepicker" placeholder="Email"> -->
                <input type="number" min="0" max="3600" name="relativeRaceStartAddSeconds" class="form-control" id="inputExtraSeconds" ng-model="relativeRaceStartAddSeconds" ng-change="relativeTimestampChanged()" required/>
              </div>
            </div>
            <div class="form-group">
              <label for="inputExtraSeconds" class="col-sm-2 control-label">Resultaat</label>
              <div class="col-sm-10">
                <!-- <input type="email" class="form-control" id="inputTimepicker" placeholder="Email"> -->
                <input type="text" class="form-control" id="inputExtraSeconds" ng-model="relativeRaceTime" readonly/>
              </div>
            </div>
          </form>
        </div>
        <div class="col-sm-3">
          <!-- <label>Resultaat: {{relativeRaceTime}}</label> -->
          <button type="button" class="btn btn-success btn-sm" ng-disabled="!relativeTimestampForm.relativeRaceStartAddMinutes.$valid || !relativeTimestampForm.relativeRaceStartAddSeconds.$valid" ng-click="addMeasurementRelative();">Voeg toe aan race {{currentRace}}</button>
        </div>
      </div>
    </div>
  </div>
</div>

</div>
