<div class="container">

  <navbar/>

  <div class="page-header">
    <h1>{{person.person.name}}</h1>
  </div>

  <ul class="nav nav-tabs">
    <li ng-class="{active: mode == 'overview'}"><a ng-click="setMode('overview')">Overview</a></li>
    <li ng-class="{active: mode == 'builds'}"><a ng-click="setMode('builds')">Builds</a></li>
  </ul>

  <div id="overview" ng-show="mode == 'overview'" class="row">
    <div class="span6">
      <h3>Upcoming</h3>
      <table>
        <tr ng-repeat="badge in person.badgesInProgress">
          <td style="padding-right: 1em">{{badge.name}}</td>
          <td style="width: 100%">
            <div class="progress" style="margin-bottom: 0;" title="Progress: {{badge.progress}} of {{badge.goal}}">
              <div class="bar" style="width: {{badge.progress / badge.goal * 100}}%;"></div>
            </div>
          </td>
        </tr>
      </table>

      <h3>Badges</h3>
      <ul class="unstyled">
        <li ng-repeat="badge in person.badges">
          <!--
          <span class="badge-level-{{badge.level}} badge">{{badge.name}}</span>
          -->
          <strong>{{badge.name}}</strong>
          <!--
          <i class="icon-user ng-class: {{{1: 'badge-level-1', 2: 'badge-level-2', 3: 'badge-level-3'}[badge.level]}}"></i>
          -->
          <span class="badge-level-{{badge.level}} badge">
              <i class="icon-user"></i>
          </span>

          {{badge.createdDate | date:'medium'}}
        </li>
      </ul>
    </div>
    <div class="span6">
      <h3>Recent builds</h3>
      <table class="table">
        <tbody>
        <tr ng-repeat="build in recentBuilds" class="{{{true: 'success', false: 'error'}[build.success]}}">
          <td>{{build.timestamp | date:'medium'}}</td>
          <td>{{{true: 'Success', false: 'Failure'}[build.success]}}</td>
          <td><a href="/build/{{build.uuid}}">Details</a></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div id="builds" ng-show="mode == 'builds'">
    <h3>Builds</h3>
    <table class="table text-baseline">
      <thead>
      <tr>
        <th>Date</th>
        <th>Success</th>
      </tr>
      </thead>
      <tbody>
      <tr ng-repeat="build in builds.rows" class="{{{true: 'build-success', false: 'build-error'}[build.success]}}">
        <td>{{build.timestamp | date:'medium'}}</td>
        <td>{{build.success}}</td>
        <td>
          <a class="btn btn-small" href="/build/{{build.uuid}}"><i class="icon-chevron-right"></i></a>
        </td>
      </tr>
      </tbody>
      <tfoot>
      <tr>
        <td colspan="3">
          <ul class="pager">
            <li class="previous" ng-class="{disabled: builds.startIndex == 0}">
              <a ng-click="builds.prev()">&larr; Older</a>
            </li>
            <li class="next">
              <a ng-click="builds.next()">Newer &rarr;</a>
            </li>
          </ul>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>
</div>