{% 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>
        <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>

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

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

    var 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: 10
                },
                line: {
                    fill: false
                }
            }
        },
        data: {
        datasets: [{
            label: '{{ map.map }}',
            data: graph,
            borderColor: [
                'rgba(255,99,132,1)'
            ],
            borderWidth: 3
        }
        ]}
    });
    </script>

    </main>
{% endblock %}