{% extends "../templates/basic.njk" %}
{% import "../components/_map.njk" as mapComponent %}
{% set map = data.map %}
{% set raceLeaderboard = data.raceLeaderboard %}
{% set teamLeaderboard = data.teamLeaderboard %}
{% set graphMap = data.graphMap %}
{% block head %}
    <title>DDStats - Maps!</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/maps.css">
    <script src="/assets/scripts/lazyLoadImages.js" defer></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
{% endblock %}

{% block body %}
    <main class="flex-container">
        <div class="map map-detailed">
            <img class="map-image" src="https://ddnet.tw/ranks/maps/{{ map.map | replace(r/[À-ž]/g, "__") | replace(r/[^a-zA-Z0-9]/g, "_") }}.png">
            <h1 class="map-name">{{ map.map }}</h1>
            <table class="map-info">
                <tr>
                    <td>
                        {% if map.mappers[1] %}
                            Mappers:
                        {% else %}
                            Mapper:
                        {% endif %}
                    </td>
                    <td>
                        {{ map.mappers.join(", ") }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Category:
                    </td>
                    <td>
                        {{ map.category }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Rating:
                    </td>
                    <td>
                        {% for i in range(0, map.stars) %}★{% endfor %}
                        {% for i in range(0, 5 - map.stars) %}☆{% endfor %}
                    </td>
                </tr>
                <tr>
                    <td>
                        Points:
                    </td>
                    <td>
                        {{ map.points }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Released:
                    </td>
                    <td>
                        {{ map.release }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Total finishes:
                    </td>
                    <td>
                        {{ map.finishes.total }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Team finishes: 
                    </td>
                    <td>
                        {{ map.finishes.team }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Unique finishes:
                    </td>
                    <td>
                        {{ map.finishes.unique }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Median time: 
                    </td>
                    <td>
                        {{ map.times.median | round(2) }}
                    </td>
                </tr>
                <tr>
                    <td>
                        Average time:
                    </td>
                    <td>
                        {{ map.times.average | round(2) }}
                    </td>
                </tr>
            </table>
        </div>


        <div class="leaderboard">
            <h2> Records! </h2>
            {% for record in raceLeaderboard %}
                <div class="rank">
                    <img class="country-image" data-src="https://ddnet.tw/countryflags/{{ record.server }}.png">
                    <p class="rank-position">{{ record.rank }}.</p>
                    <p class="rank-player">{{ record.player }}</p>
                    <p class="rank-time">
                        {{ (record.time - (record.time % 60)) / 60 }}:
                        {%- if record.time | round % 60 > 9 %}
                            {{- record.time | round % 60 }}
                        {%- else -%}
                            0{{- record.time | round % 60 }}
                        {%- endif %}
                    </p>
                </div>
            {% endfor %}
        </div>

        <div class="leaderboard">
            <h2> Team records! </h2>
            {% for record in teamLeaderboard %}
                <div class="rank">
                    <img class="country-image" data-src="https://ddnet.tw/countryflags/{{ record.server }}.png">
                    <p class="rank-position">{{ record.teamrank }}.</p>
                    <p class="rank-player">{{ record.players.join(", ") }}</p>
                    <p class="rank-time">
                        {{ (record.time - (record.time % 60)) / 60 }}:
                        {%- if record.time | round % 60 > 9 %}
                            {{- record.time | round % 60 }}
                        {%- else -%}
                            0{{- record.time | round % 60 }}
                        {%- endif %}
                    </p>
                </div>
            {% endfor %}
        </div>

        <div class="leaderboard-history">
            <h1> Record over time </h1>
            <div class="container">
            <canvas id="chart"></canvas>
            </div> 
            <script>
            const ctx = document.getElementById("chart").getContext("2d");
            const graph = {{ data.graphMap | dump | safe }}

            const myChart = new Chart(ctx, {
                type: 'line',
                options: {
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    hover: {
                        mode: 'index',
                        intersect: false
                    },
                    /*  This currently doesn't work :( */
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data[tooltipItem['index']]['player']
                        }
                    },
                    scales: {
                        xAxes: [{
                            type: 'time',
                            time: {
                                unit: 'year'
                            }
                        }]
                    },
                    elements: {
                        point: {
                            radius: 6
                        },
                        line: {
                            fill: false
                        }
                    }
                },
                data: {
                    datasets: [{
                        label: '{{ map.map }}',
                        data: graph,
                        color: [
                            '#EE588F'
                        ],
                        backgroundColor: [
                            'rgba(0, 0, 0, 0)'
                        ],
                        borderColor: [
                            '#FBA7C6'
                        ],
                        borderWidth: 3
                    }]
                }
            })
            </script>
        </div>
    </main>
{% endblock %}