{% extends 'base.jinja' %}

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

{% set active_page = "/stats" %}

{% block body %}

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

        <div class="card-body">
            Points from sprints and fastest laps are not tracked currently.
        </div>
    </div>

    <div class="grid card-grid-2">

        <div class="card shadow-sm mb-2">
            <div class="card-header">
                Drivers
            </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;">Driver</th>
                            <th scope="col" class="text-center" style="min-width: 100px;">Points</th>
                            <th scope="col" class="text-center" style="min-width: 100px;">DNFs</th>
                            <th scope="col" class="text-center" style="min-width: 100px;">Place Delta</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for driver in points.drivers_sorted_by_points() %}
                            {% set driver_standing = points.wdc_standing_by_driver()[driver.name] %}
                            <tr class="{% if driver_standing == 1 %}table-danger{% endif %}">
                                <td class="text-center text-nowrap">{{ driver_standing }}</td>
                                <td class="text-center text-nowrap">{{ driver.name }}</td>
                                <td class="text-center text-nowrap">{{ points.total_driver_points_by(driver.name) }}</td>
                                <td class="text-center text-nowrap">{{ points.dnfs()[driver.name] }}</td>
                                <td class="text-center text-nowrap">{{ "%+d" % points.wdc_diff_2023_by(driver.name) }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-2">
            <div class="card-header">
                Constructors
            </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;">Team</th>
                            <th scope="col" class="text-center" style="min-width: 100px;">Points</th>
                            <th scope="col" class="text-center" style="min-width: 100px;">Place Delta</th>
                        </tr>
                        </thead>

                        <tbody>
                        {% for team in points.teams_sorted_by_points() %}
                            {% set team_standing = points.wcc_standing_by_team()[team.name] %}
                            <tr class="{% if team_standing == 1 %}table-danger{% endif %}">
                                <td class="text-center text-nowrap">{{ team_standing }}</td>
                                <td class="text-center text-nowrap">{{ team.name }}</td>
                                <td class="text-center text-nowrap">{{ points.total_team_points_by(team.name) }}</td>
                                <td class="text-center text-nowrap">{{ points.wcc_diff_2023_by(team.name) }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

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

            <div class="card-body">
                <div class="chart-container" style="width: 100%; height: 40vh;">
                    <canvas id="driver-line-chart"></canvas>
                </div>

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

                    cumulative_driver_points({{ points.cumulative_driver_points_data() | safe }})
                </script>
            </div>
        </div>

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

            <div class="card-body">
                <div class="chart-container" style="width: 100%; height: 40vh;">
                    <canvas id="team-line-chart"></canvas>
                </div>

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

                    cumulative_team_points({{ points.cumulative_team_points_data() | safe }})
                </script>
            </div>
        </div>

    </div>

{% endblock body %}