{% extends "base" %}
{% block content %}
<section class="section">
    <div class="container">
        <div class="columns is-centered">
            <div class="column is-narrow is-desktop">
                <table class="table is-bordered is-striped is-narrow is-hoverable">
                    <tr>
                        <th></th>
                        {% for ai in ais %}
                            <th class="has-text-centered">{{ ai.name }}</th>
                        {% endfor %}
                        <th class="has-text-success has-text-centered">✓</th>
                        <th class="has-text-danger has-text-centered">✗</th>
                    </tr>

                    {% for ai1 in ais %}
                        <tr>
                            <th class="has-text-centered">{{ ai1.name }}</th>
                            {% for ai2 in ais %}
                                {% if ai1.name == ai2.name %}
                                    <td></td>
                                {% else %}
                                    {% set key = ai1.name ~ "/" ~ ai2.name %}
                                    {% set value = battles | get(key=key) %}
                                    {% if value > 0.5 %}
                                        <td class="has-text-success">{{ value }}</td>
                                    {% elif value < 0.5 %}
                                        <td class="has-text-danger">{{ value }}</td>
                                    {% else %}
                                        <td>{{ value }}</td>
                                    {% endif %}
                                    {% endif %}
                            {% endfor %}
                            <td class="has-text-centered"><strong>{{ ai1.victory_count }}</strong></td>
                            <td class="has-text-centered"><strong>{{ ai1.defeat_count }}</strong></td>
                        </tr>
                    {% endfor %}
                </table>
             </div>
            <div class="column is-narrow">
                <table class="table is-bordered is-striped is-narrow is-hoverable">
                    <tr><th class="has-text-centered">AI</th><th>Score</th></tr>
                    {% for ai in sorted_ais %}
                        <tr>
                            <td class="has-text-centered"><strong>{{ ai.name }}</strong></td>
                            <td class="has-text-centered">{{ ai.victory_count - ai.defeat_count }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
</section>
{% endblock %}