<ol class="breadcrumb">
  <li><a href="#/championships/">Kampioenschappen</a></li>
  <li class="active">Poules voor {{currentChampionship}}</li>
</ol>

<div class="row">
  <div class="visible-sm-block visible-xs-block col-sm-12 col-xs-12">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Voeg poule toe</h3>
      </div>
      <div class="panel-body">
        <form class="form-inline">
          <div class="form-group form-group-sm" style="display:inline-block">
            <label for="tierInput">Tier</label>
            <input type="text" class="form-control" id="tierInput" aria-describedby="sizing-addon2" ng-model="newpoule.tier" style="width:50px; display:inline-block"/>
          </div>
          <div class="form-group form-group-sm" style="display:inline-block">
            <label for="pouleInput">Poule</label>
            <input type="text" class="form-control" id="pouleInput" aria-describedby="sizing-addon2" ng-model="newpoule.poule" style="width:50px; display:inline-block"/>
          </div>
          <button type="button" class="btn btn-sm btn-success" ng-click="addPoule(newpoule)">Toevoegen</button>
        </form>
      </div>
    </div>
  </div>

  <div class="col-md-7 col-xs-12">
    <div class="panel panel-default" ng-show="poules.length > 0">
      <div class="panel-heading">
        <h3 class="panel-title">Poules</h3>
      </div>
      <div class="panel-body">
        <table class="table">
         <tr><th>Tier</th><th>Poule</th><th>Acties</th></tr>
         <tr ng-repeat="poule in poules | orderBy:'[tier,poule]'">
          <td>{{poule.tier}}</td>
          <td>{{poule.poule}}</td>
          <td>
            <a class="btn btn-info btn-sm" href="#/championship/{{poule.idchampionship}}/poule/{{poule.tier}}/{{poule.poule}}/races">
              Bekijk races <span class="badge">{{poule.racecount}}</span>
            </a>
            <a class="btn btn-info btn-sm" href="#/championship/{{poule.idchampionship}}/poule/{{poule.tier}}/{{poule.poule}}/teams">
              Bekijk teams <span class="badge">{{poule.teamcount}}</span>
            </a>
            <button class="btn btn-danger btn-sm" ng-click="deletePoule(poule.tier, poule.poule, currentChampionship);">
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div class="col-md-5 hidden-sm hidden-xs">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Voeg poule toe</h3>
    </div>
    <div class="panel-body">
      <form class="form-inline">
        <div class="form-group form-group-sm">
          <label for="tierInput">Tier</label>
            <input type="text" class="form-control" id="tierInput" aria-describedby="sizing-addon2" ng-model="newpoule.tier" style="width:50px">
          </div>
          <div class="form-group form-group-sm">
            <label for="pouleInput">Poule</label>
            <input type="text" class="form-control" id="pouleInput" aria-describedby="sizing-addon2" ng-model="newpoule.poule"  style="width:50px"/>
          </div>
          <button type="button" class="btn btn-sm btn-success" ng-click="addPoule(newpoule)">Toevoegen</button>
        </form>
      </div>
    </div>
  </div>
