{% extends 'base.html' %}

{% block title %}
    STATISTICS 
{% endblock %}

{% block head %}
<meta http-equiv="refresh" content="60">
 
    <style type ="text/css">
       body {
          width: 92%;
          margin: 0 auto;
          background-color:#ff9900
       }
      .header {
          color:#000000;
          background-color:#ff9900;
      }

      .stops {
          color:#000000;
          background-color:#ff9900;
      }
      .routes {
          color:#000000;
          background-color:#ccff99;
      }

      .areas {
          color:#000000;
          background-color:#ccff99;
      }

       ul{
       width:900px;
       margin-bottom:20px;
       overflow:hidden;
       border-top:1px solid #ccc;

       }

       li{
       line-height:1.5em;
       /*border-bottom:1px solid #ccc; */
       float:left;
       display:inline;
       
       }
       .double li  { width:50%;} /* 2 col */
       .triple li  { width:33.333%; } /* 3 col */
       .quad li    { width:25%; } /* 4 col */
       .six li     { width:16.666%; } /*

    </style>


    <script type="text/javascript">

    </script>
{% endblock %}

{% block body %}
    <div class="header" >
      <h1> ChaloBEST! The Stats..
    </h1>
      </div>
    <div class="stops"> <h2>Total Stops : {{ total_stop_count }} <br /> Stops left : {{ total_stops_left }}</h2> 
    </div>

    <div class="routes"> <h3> Routes: </h3><br />
    <ul id="routesList" class="six" >
        {% for r in routes %}
        <li class="route listItem" >
            <a href="{{r.route.get_absolute_url}}" title="view stops for route"> {{ r.route.alias }} </a> 
	 -   {{ r.stops_done }} / {{ r.total_stops }}  
       </li>
        {% endfor %}
    </ul>    
    </div>

    <div class="areas"> <h3> Areas: </h3> <br />
    <ul id="AreasList" class="quad" >
        {% for a in areas %}
        <li class="area listItem">
            <a href="{{a.area.get_absolute_url}}" title="view stops for area">{{ a.area.name }}</a> -    {{ a.stops_done }} / {{ a.total_stops }}.
	    
        </li>
        {% endfor %}
    </ul>    

    
{% endblock %}
