{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="row">
  <div class="col-md-2">
  <h3>TOP #10</h3>
  <table class="table">
    <tr>
      <td>1</td>
      <td>a</td>
    </td>
    <tr>
      <td>2</td>
      <td>b</td>
    </td>
    <tr>
      <td>3</td>
      <td>c</td>
    </td>
    <tr>
      <td>4</td>
      <td>d</td>
    </td>
    <tr>
      <td>5</td>
      <td>e</td>
    </td>
    <tr>
      <td>6</td>
      <td>f</td>
    </td>
    <tr>
      <td>7</td>
      <td>g</td>
    </td>
    <tr>
      <td>8</td>
      <td>h</td>
    </td>
    <tr>
      <td>9</td>
      <td>i</td>
    </td>
    <tr>
      <td>10</td>
      <td>j</td>
    </td>
  </table>
  </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>

      <div id="carousel-team" class="carousel slide">
        <div class="carousel-inner">
          <div class="item active">
                <div class="well">
                        <center><h1>Team Alpha</h1></center>
                </div>
          </div>
          <div class="item">
                <div class="well">
                        <center><h1>Team Beta</h1></center>
                </div>
          </div>
          <div class="item">
                <div class="well">
                        <center><h1>Team Gamma</h1></center>
                </div>
          </div>
          <div class="item">
                <div class="well">
                        <center><h1>Team Delta</h1></center>
                </div>
            <!--div class="carousel-caption">
              <p>#</p>
              <p><a href="#">#</a></p>
            </div-->
          </div>
        </div><!-- .carousel-inner -->
        <!--  next and previous controls here
              href values must reference the id for this carousel -->
          <!--a class="carousel-control left" href="#carousel-team" data-slide="prev">&lsaquo;</a>
          <a class="carousel-control right" href="#carousel-team" data-slide="next">&rsaquo;</a-->
      </div><!-- .carousel -->

{/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}