{extends file="layout.tpl"}

{block name=head}
<link href="/css/score.css" rel="stylesheet">
{/block}

{block name=content}

<div class="clock">
<div id="Date"></div>
  <ul>
      <li id="hours">00</li>
      <li id="point">:</li>
      <li id="min">00</li>
      <li id="point">:</li>
      <li id="sec">00</li>
  </ul>
</div>

<div class="container" style="margin-top: 25px">
  {if $ERRmessage}
  <div class="alert alert-{$ERRcolor}">
    <button class="close" data-dismiss="alert">&times;</button>
    <i class="icon-warning-sign"></i> {$ERRmessage}
  </div>
  {/if}

  <div class="row">
    <div class="col-md-2">
      <h3>TOP #10</h3>
      <div class="list-group">
      {foreach from=$top item=t}
        <div class="list-group-item">{$t->get_name()}</div>
      {/foreach}
      </div>
    </div>

  <!-- example -->
  <div class="col-md-10">
  <div class="jumbotron">
    <h1>Example</h1>
    <p><div id="test">This is a example</div></p>
    <p>This is a example</p>
    <p>This is a example</p>
    <p>This is a example</p>
    <p>This is a example</p>
    <p>This is a example</p>
  </div>
  </div>
  </div><!-- .row -->
      <div id="carousel-team" class="carousel slide">
        <div class="carousel-inner">
        {foreach from=$teams item=my_team key=k}
          {if $k == 0}
            <div class="item active">
          {else}
            <div class="item">
          {/if}
            <div class="well"><h1>{$my_team->get_name()}</h1>{include file="summary.tpl"}</div>
          </div>
        {/foreach}
        </div><!-- .carousel-inner -->
      </div><!-- .carousel -->
</div><!-- .container -->

{/block}
{block name=end}
<script type="text/javascript">
   $(document).ready(function() {
        var time = {$END};
        $('#carousel-team').carousel({
        interval: 2000 });

        setInterval( function() {
        var heure = Math.floor(time / 3600);
        var min = Math.floor((time / 60) % 60);
        var sec = Math.floor(time % 60);
        $("#hours").html(( heure < 10 ? "0" : "" ) + heure);
        $("#min").html(( min < 10 ? "0" : "" ) + min);
        $("#sec").html(( sec < 10 ? "0" : "" ) + sec);
        time--;
        }, 1000);
   });

</script>

{/block}