{% extends 'base.html.twig' %}

{% block style %}
    <style>
        .matchup-0-20 {
            background-color: #ff0000; /* Rouge */
        }
        .matchup-20-40 {
            background-color: #ff6666; /* Rouge clair */
        }
        .matchup-40-60 {
            background-color: #cccccc; /* Gris */
        }
        .matchup-60-80 {
            background-color: #66ff66; /* Vert clair */
        }
        .matchup-80-100 {
            background-color: #00ff00; /* Vert */
        }
        #content {
            align-content: center;
        }

        th {
            color:white;
        }
    </style>
{% endblock %}

{% block body %}
<div id="content">
    <table>
        <thead>
            <tr>
                <th></th>
                {% for champion in champions %}
                    <th>{{ champion.chmpname }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row_champion in champions %}
                <tr>
                    <th>{{ row_champion.chmpname }}</th>
                    {% for col_champion in champions %}
                        {% set matchup_percent = 0 %}
                        {% set found = false %}
                        {% for matchup in matchups %}
                            {% if matchup.chmp1id == row_champion.chmpid and matchup.chmp2id == col_champion.chmpid %}
                                {% set matchup_percent = matchup.percentMU %}
                                {% set found = true %}
                            {% elseif matchup.chmp1id == col_champion.chmpid and matchup.chmp2id == row_champion.chmpid %}
                                {% set matchup_percent = 100 - matchup.percentMU %}
                                {% set found = true %}
                            {% endif %}
                        {% endfor %}
                        {% if found %}
                            {% if matchup_percent < 20 %}
                                <td class="matchup-0-20">{{ matchup_percent }}</td>
                            {% elseif matchup_percent < 40 %}
                                <td class="matchup-20-40">{{ matchup_percent }}</td>
                            {% elseif matchup_percent < 60 %}
                                <td class="matchup-40-60">{{ matchup_percent }}</td>
                            {% elseif matchup_percent < 80 %}
                                <td class="matchup-60-80">{{ matchup_percent }}</td>
                            {% else %}
                                <td class="matchup-80-100">{{ matchup_percent }}</td>
                            {% endif %}
                        {% else %}
                            <td></td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}