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

{% block body %}
    <h2 class="text-center">Equipes</h2>
    <select id="conf" onchange="conference()">
        <option value="all">Les deux conférence</option>
        <option value="East">Conférence est</option>
        <option value="West">Conférence ouest</option>
    </select>
    <div id="tout" style="display:flex;flex-wrap:wrap;justify-content: center;align-items: center;">
        {{ dump(resultat[0]) }}
        {% for equipe in resultat %}
            {% if equipe.nbaFranchise==true %}

                <figure class="text-center" style="margin-right:20px;">
                    <img src="{{ equipe.logo }}" width="100"/>
                    <figcaption style="font-weight: bold;">{{ equipe.name }}</figcaption>
                </figure>
            {% endif %}
        {% endfor %}
    </div>
    <div id="east" style="display:none;flex-wrap:wrap;justify-content: center;">
        {% for equipe in conf_est %}
            {% if equipe.nbaFranchise==true %}
                <figure class="text-center" style="margin-right:20px;">
                    <img src="{{ equipe.logo }}" width="100"/>
                    <figcaption style="font-weight: bold;">{{ equipe.name }}</figcaption>
                </figure>
            {% endif %}
        {% endfor %}
    </div>
    <div id="west" style="display:none;flex-wrap:wrap;justify-content: center;">
        {% for equipe in conf_west %}
            {% if equipe.nbaFranchise==true %}
                <figure class="text-center" style="margin-right:20px;">
                    <img src="{{ equipe.logo }}" width="100"/>
                    <figcaption style="font-weight: bold;">{{ equipe.name }}</figcaption>
                </figure>
            {% endif %}
        {% endfor %}
    </div>
    <script>
        var conf;
        function conference() {
            conf=document.getElementById("conf").value;
            if (conf=="East") {
                $('#east').css("display","flex");
                $('#west').css("display","none");
                $('#tout').css("display","none");
            }
            if (conf=="West") {
                $('#east').css("display","none");
                $('#west').css("display","flex");
                $('#tout').css("display","none");
            }
            if (conf=="all") {
                $('#east').css("display","none");
                $('#west').css("display","none");
                $('#tout').css("display","flex");
            }
        }
    </script>
{% endblock %}