<style>
  .RdYlGn .q0-8{fill:rgb(245,250,250)}
  .RdYlGn .q1-8{fill:rgb(190,200,200)}
  .RdYlGn .q2-8{fill:rgb(170,180,180)}
  .RdYlGn .q3-8{fill:rgb(150,160,160)}
  .RdYlGn .q4-8{fill:rgb(130,140,140)}
  .RdYlGn .q5-8{fill:rgb(110,120,120)}
  .RdYlGn .q6-8{fill:rgb(90,100,100)}
  .RdYlGn .q7-8{fill:rgb(70,80,80)}
</style>

<h1>
  {{ team.name }}
  <small>
    <span ng-repeat="member in members"><span ng-if="$last && !$first"> et </span><span ng-if="$middle">, </span>{{ member.firstname | capitalize }} <em ng-if="member.nickname">{{ member.nickname }}</em> {{ member.lastname | capitalize }}</span>
  </small>
</h1>

<div ng-controller="TeamExercicesController" class="bg-light text-dark">

  <dl class="dl-horizontal">
    <dt>Points</dt>
    <dd>{{ my.score }}</dd>
    <dt>Classement</dt>
    <dd>{{ teams[my.team_id].rank }}/{{ nb_teams }} ({{ nb_reg_teams }} registered teams)</dd>
  </dl>

  <h2>Présence</h2>

  <div id="presenceCal" ng-controller="PresenceController">
  </div>

  <h2>Exercices résolus : {{ solved_exercices }}/{{ exercices.length }} {{ solved_exercices * 100 / exercices.length | number:0 }}%</h2>

  <dl>
    <div style="float: left;padding: 0 5px; border: 1px solid #ccc; border-radius: 3px; min-width: 5vw" ng-repeat="(tid,theme) in themes" class="text-center m-1">
      <dt ng-bind="theme.name"></dt>
      <dd>
	<ul class="list-unstyled">
	  <li ng-repeat="(eid,exercice) in theme.exercices" ng-if="my.exercices[eid] && my.exercices[eid].solved_rank"><a href="/{{ my.exercices[eid].theme_id }}/{{ eid }}" target="_blank"><abbr title="{{ my.exercices[eid].statement }}">{{ exercice.title }}</abbr></a> (<abbr title="{{ my.exercices[eid].solved_time | date:'mediumDate' }} à {{ my.exercices[eid].solved_time | date:'mediumTime' }}">{{ my.exercices[eid].solved_rank }}<sup>e</sup></abbr>)</li>
	</ul>
      </dd>
    </div>
  </dl>

  <div class="clearfix"></div>

    <div class="row" ng-controller="TeamStatsController">
      <div class="col-sm-6" id="pieLevels">
	<h4 class="text-center">Tentatives par niveaux</h4>
      </div>
      <div class="col-sm-6" id="pieThemes">
	<h4 class="text-center">Tentatives par thèmes</h4>
      </div>
    </div>

</div>
