{% 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;
            font-size:10px;
        }

        td:hover {
            cursor:default;
        }

        .hover {
            background-color:green;
        }

        table {
            text-align: center;
        }
    </style>
{% endblock %}


{% block javascripts %}
    <script>
    let lastRowHover = '';
    let lastColHover = '';
        function showChampionsNameWhenHover(array){
            if(lastRowHover != ''){
                document.getElementById(lastRowHover).classList.remove('hover');
                document.getElementById(lastColHover).classList.remove('hover');
            }
            document.getElementById(array[0]).classList.add('hover');
            document.getElementById(array[1]).classList.add('hover');
            lastRowHover = array[0];
            lastColHover = array[1];
        }
    </script>
{% endblock %}

{% block body %}
<div id="content">
    <table>
        <thead>
            <tr>
                <th></th>
                {% for champion in champions %}
                    <th id="col_{{ champion.chmpname }}">{{ champion.chmpname }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row_champion in champions %}
                <tr>
                    <th id="row_{{ row_champion.chmpname }}">{{ row_champion.chmpname }}</th>
                    {% for col_champion in champions %}
                        {% set matchup_percent = 0 %}
                        {% set found = false %}
                        {% set equal = 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 %}
                            {% if row_champion.chmpid == col_champion.chmpid %}
                                {% set equal = true %}
                            {% endif %}
                        {% endfor %}
                        {% if found %}
                            {% if matchup_percent < 20 %}
                                <td onmouseover="showChampionsNameWhenHover(['row_{{ row_champion.chmpname }}', 'col_{{ col_champion.chmpname }}'])" class="matchup-0-20">{{ matchup_percent }}</td>
                            {% elseif matchup_percent < 40 %}
                                <td onmouseover="showChampionsNameWhenHover(['row_{{ row_champion.chmpname }}', 'col_{{ col_champion.chmpname }}'])" class="matchup-20-40">{{ matchup_percent }}</td>
                            {% elseif matchup_percent < 60 %}
                                <td onmouseover="showChampionsNameWhenHover(['row_{{ row_champion.chmpname }}', 'col_{{ col_champion.chmpname }}'])" class="matchup-40-60">{{ matchup_percent }}</td>
                            {% elseif matchup_percent < 80 %}
                                <td onmouseover="showChampionsNameWhenHover(['row_{{ row_champion.chmpname }}', 'col_{{ col_champion.chmpname }}'])" class="matchup-60-80">{{ matchup_percent }}</td>
                            {% else %}
                                <td onmouseover="showChampionsNameWhenHover(['row_{{ row_champion.chmpname }}', 'col_{{ col_champion.chmpname }}'])" class="matchup-80-100">{{ matchup_percent }}</td>
                            {% endif %}
                        {% elseif equal %}
                            <td style="background-color:white"></td>
                        {% else %}
                            <td style="background-color:black;color:white;">?</td>
                        {% endif %}
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}