{% extends "locksmith/base.html" %}

{% block bodyclass %}analytics{% endblock %}

{% block css %}
    {{ block.super }}

      <link href="{{STATIC_URL}}styles/locksmith.css" rel="stylesheet" type="text/css">

    </style>
{% endblock css %}

{% block content %}
    <h2>User Leaderboard</h2>
    <div class="clearfix"></div>
    <div class="loading-container" style="display: none;">
        <div class="loading"></div>
        <div class="loading-text">Loading...</div>
    </div>
    <div class="clearfix"></div>
    <div id="leaderboard">
        <table id="latest-quarter" class="entry-content">
            <caption></caption>
            <thead></thead><tbody></tbody>
        </table>
        <table id="previous-quarter" class="entry-content">
            <caption></caption>
            <thead></thead><tbody></tbody>
        </table>
        <table id="ancient-quarter" class="entry-content">
            <caption></caption>
            <thead></thead><tbody></tbody>
        </table>
        <div class="clearfix"></div>
    </div>

    <script type="text/x-jquery-tmpl" id="leaderboard-header-tmpl">
        <tr> <th>Rank</th> <th> </th> <th>Email</th> </tr>
    </script>
    <script type="text/x-jquery-tmpl" id="leaderboard-row-tmpl">
        <tr>
            <td class="rank"></td>
            <td> <div class="diff"></div> </td>
            <td class="email"> <a class="key"></a> </td>
        </tr>
    </script>

{% endblock content %}

{% block js %}
    {{ block.super }}
    <script type="text/javascript">
        var options = {{ json_options|safe }};
    </script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/date-en-US.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/analytics-common.js"></script>
    <script type="text/javascript" src="{{STATIC_URL}}scripts/leaderboard.js"></script>
{% endblock js %}