{% extends 'base.jinja' %}

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

{% set active_page = "/graphs" %}

{% block body %}

    <div class="card shadow-sm mb-2">
        <div class="card-header">
            Note
        </div>

        <div class="card-body">
            Points only include race picks.
        </div>
    </div>

    <div class="card shadow-sm mb-2">
        <div class="card-header">
            Leaderboard
        </div>

        <div class="card-body">
            <div class="d-inline-block overflow-x-scroll w-100">
                <table class="table table-bordered table-sm table-responsive">
                    <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;">Points (Race)</th>
                        <th scope="col" class="text-center" style="min-width: 100px;">Points (Season)</th>
                        <th scope="col" class="text-center" style="min-width: 100px;">Total picks</th>
                        <th scope="col" class="text-center" style="min-width: 100px;" data-bs-toggle="tooltip"
                            title="Any points count as correct">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(include_season=True) %}
                        {% set user_standing = points.user_standing(include_season=True)[user.name] %}
                        <tr class="{% if user_standing == 1 %}table-danger{% endif %}">
                            <td class="text-center text-nowrap">{{ user_standing }}</td>
                            <td class="text-center text-nowrap">{{ user.name }}</td>
                            <td class="text-center text-nowrap">{{ points.total_points_by(user_name=user.name, include_season=True) }}</td>
                            <td class="text-center text-nowrap">{{ points.total_points_by(user_name=user.name, include_season=False) }}</td>
                            <td class="text-center text-nowrap">{{ points.season_points_by(user_name=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>

    <div class="card shadow-sm mb-2">
        <div class="card-header">
            History (Race)
        </div>

        <div class="card-body">
            <div class="chart-container">
                <canvas id="line-chart"></canvas>
            </div>

            <script>
                function cumulative_points(data) {
                    return new Chart(document.getElementById("line-chart"), {
                        type: 'line',
                        data: data,
                        options: {
                            title: {
                                display: true,
                                text: 'History'
                            },
                            {#tension: 0,#}
                            responsive: true,
                            maintainAspectRatio: false,
                            pointRadius: 5,
                            pointHoverRadius: 10,
                            scales: {
                                y: {
                                    min: 0,
                                    {#max: 100#}
                                }
                            }
                        }
                    });
                }

                cumulative_points({{ points.cumulative_points_data() | safe }})
            </script>
        </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 %}