{extends file="layout.tpl"}

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

{block name=content}
  {include file="clock.tpl"}

<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 key=k}
        <div class="list-group-item">{$k+1}. {link href="{$t->id}-{$t->get_name()}" href_prefix="/" label=$t->get_name()}</div>
      {/foreach}
      </div>
    </div>

    <div class="col-md-10">
	{block name=main}{/block}
    </div>
  </div>
{if isset($teams)}
  <div id="carousel-team" class="carousel slide">
    <div class="carousel-inner">
    {foreach from=$teams item=my_team key=k}
      <div class="item{if $k == 0} active{/if}">
        <div class="well">
          <h1>{$my_team->get_name()}</h1>
	  {include file="summary.tpl"}
        </div>
      </div>
    {/foreach}
    </div>
  </div>
{/if}
</div>
{/block}

{block name=end}
<script src="/js/countdown.js"></script>
<script type="text/javascript">
   var end_challenge = new Date({$END * 1000});
{literal}
$(document).ready(function() {
   update_end();
   $('#carousel-team').carousel({
     interval: 2000 });

   setInterval( function() {
     update_end();
     }, 1000);
});
{/literal}
</script>
{/block}