{% extends "base.html" %}

{% block content %}
    <p class="nav">
        <a class="mobile" href="#global-chart">Global Chart</a>
    </p>

    <h1>{{ CONFIG.site_name }}</h1>
    <p>
        {{ CONFIG.site_description }}
    </p>

    <div class="tables">
        <div class="games">
            <h2>Games</h2>
            <table>
                <tr>
                    <th>Game</th>
                    <th>Leader</th>
                    <th>Leader rating</th>
                    <th>Total games</th>
                </tr>
                {% for game in games %}
                    {% set leader = game.ratings[0][0] %}
                    {% if leader in players and 'displayName' in players[leader] %}
                        {% set leader_name = players[leader]['displayName'] %}
                    {% else %}
                        {% set leader_name = leader %}
                    {% endif %}
                    {% if leader in players and 'image' in players[leader] %}
                        {% set image_path = "player/" + players[leader]["name"] %}
                        {% set image_url = image_path + "/" + players[leader]["image"] %}
                    {% endif %}
                    <tr>
                        <td class="name">
                            <a href="{{ game.slug }}">{{ game.game_name }}</a>
                        </td>
                        <td class="name avatar">
                            {% if game.ratings|length > 0 %}
                                {% if image_url %}

                                    <img class="player-image" src="{{image_url}}">
                                {% endif %}
                                <a href="player/{{leader}}">{{ leader_name }}</a>
                            {% endif %}</td>
                        <td class="number">{% if game.ratings|length > 0 %}{{ game.ratings[0][2]|int }}{% endif %}</td>
                        <td class="count number">{{ game.count }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>

        <div id="global-chart">
            <h2>Overall placement</h2>
            <table>
                <tr>
                    <th>Position</th>
                    <th>Name</th>
                    <th>Average placement</th>
                </tr>
                {% for placement in global_chart %}
                    {% set name = placement["player_name"] %}
                    {% set rating = placement["average"] %}
                    {% if name in players and 'displayName' in players[name] %}
                        {% set display_name = players[name]['displayName'] %}
                    {% else %}
                        {% set display_name = name %}
                    {% endif %}
                    {% if name in players and 'image' in players[name] %}
                        {% set image_path = "player/" + players[name]["name"] %}
                        {% set image_url = image_path + "/" + players[name]["image"] %}
                    {% endif %}
                    <tr>
                        <td class="position">{{ loop.index }}</td>
                        <td class="name avatar">
                            {% if image_url %}
                                <img class="player-image" src="{{image_url}}">
                            {% endif %}
                            <a href="player/{{name}}">{{ display_name }}</a>
                        </td>
                        {% set percent = 100 - rating * 100 %}
                        <td class="rating">
                            {% if percent >= 30 %}
                                {{ percent | int }}%
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </table>
            <p>
                100% = first in all games, 0% = last in all games.
            </p>
            <p>
                The global chart includes only players
                with at least three games played and it only counts placements in games where the
                player has played at least three matches.
            </p>
            <p>
                The average is weighted, meaning
                that a game where the player has played many matches will count more towards
                the average than a match where the player only played a few matches.
            </p>
        </div>
    </div>
{% endblock %}
