{% extends "base.html" %}

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

    <h1>Rayter</h1>
    <p>
        Find game ratings for our games here!
    </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 users and 'displayName' in users[leader] %}
                        {% set leader_name = users[leader]['displayName'] %}
                    {% else %}
                        {% set leader_name = leader %}
                    {% endif %}
                    {% if leader in users and 'imageUrl' in users[leader] %}
                        {% set image_url = users[leader]['imageUrl'] %}
                    {% 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="user-image" src="{{image_url}}">
                                {% endif %}
                                <a href="/user/{{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 name, rating in global_chart %}
                    {% if name in users and 'displayName' in users[name] %}
                        {% set display_name = users[name]['displayName'] %}
                    {% else %}
                        {% set display_name = name %}
                    {% endif %}
                    {% if name in users and 'imageUrl' in users[name] %}
                        {% set image_url = users[name]['imageUrl'] %}
                    {% endif %}
                    <tr>
                        <td class="position">{{ loop.index }}</td>
                        <td class="name avatar">
                            {% if image_url %}
                                <img class="user-image" src="{{image_url}}">
                            {% endif %}
                            <a href="/user/{{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 id="event-log">
            <h2>Events</h2>
            <table>
                <tr>
                    <th>Event</th>
                </tr>
                {% for message in log %}
                    <tr>
                        <td >{{ message }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}
