<section role="region" >
     <header>
         <a href="#/" ><span class="icon icon-back">back</span></a>
	     <h1> {{ title }} </h1>
     </header>
</section>
<section role="region" class="loading" ng-show="generating" >
    <!-- <img src="./img/loading.gif"  /> -->
	<h2> Generating exercices </h2>
    <progress></progress>
</section>
<section role="region" class="exercice"  ng-show="running" >
     <div class="hbox exercice_info" >
		     <span class="fit hbox center" > {{ currentIndex + 1 }} / {{ maxIndex }} </span>
	         <span class="fit hbox center" > Level : {{ current.level }} </span>
	 </div>
	 <!-- When in action -->
	 <div ng-show="action" class="vbox"  >
		 <h2> {{ current.title }} </h2>
	     <div class="hbox center" >
               <img src="{{ image }}" />
	     </div>
	     <div role="actiontime" class="hbox timer" ng-show="action" >
		    	<span class="fit vbox middle center three" >ACTION : </span>
		    	<span class="fit vbox middle center two"   >{{ timer.duration }} </span>
         </div>
    </div>
	<!-- When in rest -->
	<div ng-hide="action" class="vbox" >
		<h2> Prepare for <br/> {{ current.title }} </h2> 
		<div class="hbox center" >
             <img src="{{ image }}" />
		</div>
	    <div role="breaktime" class="hbox timer"  ng-hide="action" >
		   		<span class="fit vbox middle center three" >BREAK : </span>
		   		<span class="fit vbox middle center two"   >{{ timer.break }} </span>
	    </div>
	</div>

	<footer>
		<div role="toolbar" >
	        <ul>
					<li><button id="btnPrevious"  ng-click="goPrevious()" ng-show="currentIndex > 0"> Prev. </button> </li>
					<li><button id="btnPlay"      ng-click="play()"     ng-show="stop" > Play </button> </li>
					<li><button id="btnBreak"     ng-click="break()"    ng-hide="stop" > Pause </button> </li>
					<li><button id="btnNext"      ng-click="goNext()"     ng-show="currentIndex < maxIndex - 1" > Next </button> </li>
		    </ul>
		</div>
	</footer>
</section>
<section role="region" class="exercice-finish vbox middle" ng-show="finish" >
   <h2>Well Done</h2>
</section>

