<div id="container" class="practice-container">
  <div ng-if="!started">
    <div class="ng-view-header hidden-xs">
      <h2 dynamic-title="Test">Test</h2>
    </div>
    <br>
    <div ng-include="'test_description.html'" class="col-lg-12"></div>
    <br>
    <div class="text-center">
      <a href=""
        class="btn btn-primary btn-lg"
        ng-click="start()">
        Spustit test
      </a>
    </div>
  </div>
  <div ng-if="started" class="col-lg-12">
    <div ng-if="questions" ng-hide="showSummary || error">
      <timer countdown="30 * 60" 
        max-time-unit="'minute'" 
        interval="1000" 
        finish-callback="evaluate(true);"
        title="Zývá do konce"
        class="pull-right">
        <i class="glyphicon glyphicon-time"></i>
         {{minutes}}:{{sseconds}}
      </timer>
      <ul class="progress-indicator">
        <li class="prev" ng-click="prev()" >&lt;</li>
        <li ng-repeat="question in questions"
          class="question-switcher"
          ng-class="{ 
            'active': ($index == activeQuestionIndex),
            'answered': question.answered !== undefined, 
            'correct': question.isCorrect,
            'wrong': question.isWrong
          }"
          ng-click="activateQuestion($index)">
        {{$index}}
        </li>
        <li class="next" ng-click="next()">&gt;</li>
      </ul>
    </div>
    <div ng-hide="questions || showSummary || error" class="loading-indicator">
    </div>
    <div ng-show="error" ng-bind="error" class="alert alert-danger">
    </div>
    <div ng-repeat="question in questions"
        ng-if="$index == activeQuestionIndex" class="practice">
      <div class="well" ng-if="question|imgSrc">
        <img ng-src="{{question|imgSrc}}"/>
      </div>
      <div class="question">
        <div ng-bind="question | stripImg"></div>
      </div>
      <div options="question" no-answers="true"></div>
      <div class="pull-right" >
        <button class="btn btn-lg btn-default next {{!canNext || 'btn-primary'}}" 
            ng-click="next()" 
            ng-disabled="questions.length == $index + 1" >
          <i class="glyphicon glyphicon-arrow-right"></i> Další
        </button>
      </div>
        <button class="btn btn-lg btn-default prev" 
            ng-click="prev()" 
            ng-disabled="$index == 0" >
          <i class="glyphicon glyphicon-arrow-left"></i> Předchozí 
        </button>
        <button class="btn btn-lg btn-default" 
            ng-show="!showSummary"
            ng-click="evaluate()">
          <i class="glyphicon glyphicon-saved"></i> Vyhodnotit
        </button>
      <div debug="question"></div>
    </div>
    <div ng-show="showSummary" class="summary">
      <div class="ng-view-header hidden-xs">
        <h2 dynamic-title="Výsledky testu"></h2>
      </div>
      <div>
        <h2 ng-show="errorMessage != undefined" ng-bind="errorMessage"></h2>
        
        <div questions-list="summary.questions"> </div>
        <div class="progress" ng-show="summary != undefined">
          <div class="progress-bar progress-bar-success" 
               style="width: {{result.pointsRatio * 100 }}%;">
          </div>
          <div class="progress-bar progress-bar-danger" 
               style="width: {{result.pointsToPassPortion * 100 }}%;">
          </div>
        </div>
        <div ng-show="loading" class="loading-indicator">
        </div>
        <div ng-hide="loading" >
          <div class="progress-label">
            <strong>
            Celkem získáno
            </strong>
            <span class="badge badge-default" >
              <i class="color-indicator" style="background-color: {{1|probColor}};" ></i>
              {{result.score_achieved}} b
            </span>
            <span class="col-offset-2" ng-hide="result.pointsMissingToPass == 0">
              a do úspěšného složení testu chybí
              <span class="badge badge-default" >
                <i class="color-indicator" style="background-color: {{0|probColor}};" ></i>
                {{result.pointsMissingToPass}} b
              </span>
            </span>
          </div>
          <br>
          <div class="alert alert-success" ng-show="result.pointsMissingToPass == 0">
            <h3> Gratulujeme k úspěšnému složení testu!</h3>
          <div>
        </div>
      </div>
      <br>
      <span class="pull-right" ng-if="showSummary">
        <a class="btn-continue btn btn-lg btn-default"
           href="#/view/" >
          Přehled znalostí
        </a>
        <a class="btn-continue btn btn-lg btn-default"
           href="#/refreshtest/" >
          Další test 
        </a>
        <a class="btn-continue btn btn-lg btn-primary"
           href="#/practice/" >
          Procvičovat 
        </a>
      </span>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

