{% 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 ia in ias %}
                            <th class="has-text-centered">{{ ia.name }}</th>
                        {% endfor %}
                        <th class="has-text-success has-text-centered">✓</th>
                        <th class="has-text-danger has-text-centered">✗</th>
                    </tr>

                    {% for ia1 in ias %}
                        <tr>
                            <th class="has-text-centered">{{ ia1.name }}</th>
                            {% for ia2 in ias %}
                                {% if ia1.name == ia2.name %}
                                    <td></td>
                                {% else %}
                                    {% set key = ia1.name ~ "/" ~ ia2.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>{{ ia1.victory_count }}</strong></td>
                            <td class="has-text-centered"><strong>{{ ia1.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 ia in sorted_ias %}
                        <tr>
                            <td class="has-text-centered"><strong>{{ ia.name }}</strong></td>
                            <td class="has-text-centered">{{ ia.victory_count - ia.defeat_count }}</td>
                        </tr>
                    {% endfor %}
                </table>
            </div>
        </div>
    </div>
</section>
{% endblock %}