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

{% block body %}
    <div style="display: flex;flex-wrap: wrap;justify-content: center;">
    <div>
    <h3 class="text-center" style="text-decoration: underline;">Conférence Est</h3>
    <table style="margin: auto;border:1px solid black;margin-right: 10px;" class="table w-auto" id="conf_est">
        <tr>
            <th style="border-top: 1px solid black;">#</th>
            <th style="border-top: 1px solid black;" colspan="2">Equipe</th>
            <th style="border-top: 1px solid black;">V</th>
            <th style="border-top: 1px solid black;">D</th>
            <th style="border-top: 1px solid black;">%</th>
            <th style="border-top: 1px solid black;">DOM</th>
            <th style="border-top: 1px solid black;">EXT</th>
        </tr>
        {% for equipe in resultat %}
            {% if (equipe.conference.name=="east") %}
            <tr>
            <td>{{ equipe.conference.rank }}</td>
            <td><img src="{{ equipe.team.logo }}" width="30"/></td>
            <td>{{ equipe.team.name }}</td>
            <td>{{ equipe.conference.win }}</td>
            <td>{{ equipe.conference.loss }}</td>
            <td>{{ equipe.win.percentage*100 }}</td>
            <td>{{ equipe.win.home }}-{{ equipe.loss.home }}</td>
            <td>{{ equipe.win.away }}-{{ equipe.loss.away }}</td>
            </tr>
            {% endif %}
        {% endfor %}
    </table>
    </div>
        <div>
            <h3 style="text-decoration: underline;" class="text-center">Conférence Ouest</h3>
            <table style="border:1px solid black;margin: auto;" class="table w-auto" id="conf_ouest">
                <tr>
                    <th style="border-top: 1px solid black;">#</th>
                    <th style="border-top: 1px solid black;" colspan="2">Equipe</th>
                    <th style="border-top: 1px solid black;">V</th>
                    <th style="border-top: 1px solid black;">D</th>
                    <th style="border-top: 1px solid black;">%</th>
                    <th style="border-top: 1px solid black;">DOM</th>
                    <th style="border-top: 1px solid black;">EXT</th>
                </tr>
                {% for equipe in resultat %}
                    {% if (equipe.conference.name=="west") %}
                        <tr>
                            <td>{{ equipe.conference.rank }}</td>
                            <td><img src="{{ equipe.team.logo }}" width="30"/></td>
                            <td>{{ equipe.team.name }}</td>
                            <td>{{ equipe.conference.win }}</td>
                            <td>{{ equipe.conference.loss }}</td>
                            <td>{{ equipe.win.percentage*100 }}</td>
                            <td>{{ equipe.win.home }}-{{ equipe.loss.home }}</td>
                            <td>{{ equipe.win.away }}-{{ equipe.loss.away }}</td>
                        </tr>
                    {% endif %}
                {% endfor %}
            </table>
        </div>
    </div>
    <script>
        var conf_est=document.getElementById("conf_est");
        var tr_conf_est=conf_est.getElementsByTagName("tr");
        var td;
        var td2;
        var bool=false;
        for (var p=1;p<tr_conf_est.length;p++) {
            bool=false;
            td=tr_conf_est[p].getElementsByTagName("td")[0];
            for (var u=p;u>=1;u--) {
                if (parseInt(td.innerHTML)<parseInt(document.getElementById("conf_est").getElementsByTagName("tr")[u].getElementsByTagName("td")[0].innerHTML)) {
                    td2=document.getElementById("conf_est").getElementsByTagName("tr")[u];
                    bool=true;
                    console.log("hjhh");
                }
            }
            if (bool==true)
                td2.before(tr_conf_est[p]);
        }
        conf_est=document.getElementById("conf_ouest");
        tr_conf_est=conf_est.getElementsByTagName("tr");
        bool=false;
        for (var p=1;p<tr_conf_est.length;p++) {
            bool=false;
            td=tr_conf_est[p].getElementsByTagName("td")[0];
            for (var u=p;u>=1;u--) {
                if (parseInt(td.innerHTML)<parseInt(document.getElementById("conf_est").getElementsByTagName("tr")[u].getElementsByTagName("td")[0].innerHTML)) {
                    td2=document.getElementById("conf_ouest").getElementsByTagName("tr")[u];
                    bool=true;
                    console.log("hjhh");
                }
            }
            if (bool==true)
                td2.before(tr_conf_est[p]);
        }
    </script>
{% endblock %}