<ol class="breadcrumb">
  <li><a href="#/championships/">Kampioenschappen</a></li>
  <li><a href="#/championship/{{currentChampionship}}/poules">Poules voor {{currentChampionship}}</a></li>
  <li class="active">Team in poule/tier {{currentPoule}}/{{currentTier}}</li>
</ol>

<div class="row">

  <!-- linker panel -->
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Deelnemers<br/><small>Deze teams zijn toegewezen aan de poule</div>
      <div class="panel-body">
        <div class="list-group" ng-show="teamsInPoule.length > 0">
          <a href="" class="list-group-item" ng-repeat="team in teamsInPoule" aria-label="Verwijder team van poule" ng-click="removeTeamFromPoule(team);">
            <span class="badge glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
            {{team.name}}
          </a>
        </div>
        <div ng-show="teamsInPoule.length == 0" class="text-center">
          <span class="glyphicon glyphicon-circle-arrow-left large-glyph"> </span>
        </div>
      </div>
    </div>
  </div>

  <!-- rechter panel -->
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">Beschikbare teams<br/><small>Deze teams zitten niet in de poule maar zitten wel in hetzelfde kampioenschap.</small></div>
      <div class="panel-body">
        <div class="list-group" ng-show="teamsAvailableForPoule.length > 0">
          <a href="" class="list-group-item" ng-repeat="team in teamsAvailableForPoule" aria-label="Voeg team toe aan poule" ng-click="addTeamToPoule(team);">
            <span class="badge glyphicon glyphicon-chevron-left" aria-hidden="true"> </span>
            {{team.name}}
          </a>
        </div>
        <div ng-show="teamsAvailableForPoule.length == 0" class="text-center">
          <span class="glyphicon glyphicon-eject large-glyph" aria-hidden="true"></span>
        </div>
      </div><!-- panel body -->
    </div>
  </div>
</div><!-- end row -->
