{% extends "../templates/basic.njk" %}
{% import "../components/_utils.njk" as utils %}
{% import "../components/_map.njk" as map %}
{% set player = data.player %}

{% block head %}
    <title>DDStats - {{ player.player }}!</title>
    <link rel="stylesheet" type="text/css" href="/assets/css/maps.css">
{% endblock %}

{% block body %}
    <main class="flex-container">
        <div class="player player-detailed">
            <h1>{{ player.player }}</h1>
            <div>
                <h2>First finish</h2>
                <p>
                    {{ player.player }}'s first finish was on <a href="/maps/{{ player.firstFinish.map | urlencode }}">{{ player.firstFinish.map }}</a>
                    with a time of {{ utils.fancyTime(player.firstFinish.time) }}.
                </p>
            </div>

            <div>
                <h2>Points</h2>
                <table>
                    <tr>
                        <td>Points</td>
                        <td>{{ player.points.points }} pts with the rank {{ player.rank.points }}</td>
                    </tr>
                    <tr>
                        <td>Rank points</td>
                        <td>{{ player.points.pointsRank }} pts with the rank {{ player.rank.pointsRank }}</td>
                    </tr>
                    <tr>
                        <td>Team points</td>
                        <td>{{ player.points.pointsTeam }} pts with the rank {{ player.rank.pointsTeam }}</td>
                    </tr>
                    <tr>
                        <td>Points this week</td>
                        <td>{{ player.points.pointsThisWeek }} pts with the rank {{ player.rank.pointsThisWeek }}</td>
                    </tr>
                    <tr>
                        <td>Points this month</td>
                        <td>{{ player.points.pointsThisMonth }} pts with the rank {{ player.rank.pointsThisMonth }}</td>
                    </tr>
                </table>
            </div>

            {% macro insertMap(mapData) %}
                <div class="map">
                    <a href="/maps/{{ mapData.map | urlencode }}">
                        <img class="map-image" data-src="https://ddnet.tw/ranks/maps/{{ mapData.map | replace(r/[À-ž]/g, "__") | replace(r/[^a-zA-Z0-9]/g, "_") }}.png">
                    </a>
                    <h1 class="map-name">{{ mapData.map }}</h1>
                    <table class="map-info">
                        <tr>
                            <td>Finishes</td>
                            <td>{{ mapData.finishes }}</td>
                        </tr>
                        <tr>
                            <td>Points</td>
                            <td>{{ mapData.points }}</td>
                        </tr>
                        <tr>
                            <td>Rank</td>
                            <td>{{ mapData.rank }}</td>
                        </tr>
                        {% if mapData.teamrank %}
                            <tr>
                                <td>Teamrank</td>
                                <td>{{ mapData.teamrank }}</td>
                            </tr>
                        {% endif %}
                    </table>
                    <a class="map-more-info" href="/maps/{{ mapData.map | urlencode }}">More Info</a>
                </div>
            {% endmacro %}
            <div>
            <h2>Finished maps</h2>
                {% for category, finishedMaps in data.finishedMaps %}
                    <h3>{{ category }}</h3>
                    <div class="flex-container">
                        {% for finishedMap in finishedMaps %}
                            {{ insertMap(finishedMap) }}
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
            <div>
                <h2>Unfinished maps</h2>
                {% for category, unfinishedMaps in data.unfinishedMaps %}
                    <h3>{{ category }}</h3>
                    <div class="flex-container">
                        {% for unfinishedMap in unfinishedMaps %}
                            {{ insertMap(unfinishedMap) }}
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </main>
{% endblock %}