{% extends 'base.jinja' %}

{% block title %}Formula 10 - Leaderboard{% endblock title %}

{% set active_page = "/graphs" %}

{% block body %}

    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Leaderboard</h5>
            <h6 class="card-subtitle">Points only include race picks</h6>

            <table class="table table-bordered table-sm table-responsive mt-3">
                <thead>
                <tr>
                    <th scope="col" class="text-center" style="min-width: 50px;">Place</th>
                    <th scope="col" class="text-center" style="min-width: 50px;">User</th>
                    <th scope="col" class="text-center" style="min-width: 100px;">Points</th>
                    <th scope="col" class="text-center" style="min-width: 100px;">Total picks</th>
                    <th scope="col" class="text-center" style="min-width: 100px;">Correct picks</th>
                    <th scope="col" class="text-center" style="min-width: 100px;">Points per pick</th>
                </tr>
                </thead>

                <tbody>
                {% for user in points.users_sorted_by_points() %}
                    <tr>
                        <td class="text-center text-nowrap">{{ loop.index }}</td>
                        <td class="text-center text-nowrap">{{ user.name }}</td>
                        <td class="text-center text-nowrap">{{ points.total_points_by(user.name) }}</td>
                        <td class="text-center text-nowrap">{{ points.picks_count(user.name) }}</td>
                        <td class="text-center text-nowrap">{{ points.picks_with_points_count(user.name) }}</td>
                        <td class="text-center text-nowrap">{{ "%0.2f" % points.points_per_pick(user.name) }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {#    <div class="card mt-2">#}
    {#        <div class="card-body">#}
    {#            <h5 class="card-title">History</h5>#}

    {# Line chart of point history with a line per user #}
    {#        </div>#}
    {#    </div>#}

    {#    <div class="card mt-2">#}
    {#        <div class="card-body">#}
    {#            <h5 class="card-title">Statistics</h5>#}

    {# Various statistics: Driver voted most for DNF #}
    {#        </div>#}
    {#    </div>#}

{% endblock body %}