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

{% block body %}
<select onchange="mois()" id="mois">
    {% for match in resultat %}
        {% if ((loop.index0==0) or (match.date.start|date("m")!=resultat[loop.index0-1].date.start|date("m"))) %}
            <option value="{{ match.date.start|date("m") }}">{{ match.date.start|date("m") }}</option>
        {% endif %}
    {% endfor %}
</select>
{% for match in resultat %}
    {% if ((loop.index0==0) or (match.date.start|date("m")!=resultat[loop.index0-1].date.start|date("m"))) %}
        {% if (loop.index0==0) %}
            <table class="table table_{{ match.date.start|date("m") }}">
        {% else %}
            <table style="display: none;" class="table" id="table_{{ match.date.start|date("m") }}">
        {% endif %}
    {% endif %}
            <tr>
                <td>{{ match.date.start|date("d/m/y H:i") }}</td>
                <td class="text-right" style="vertical-align: middle;">{{ match.teams.home.name }}</td>
                <td style="vertical-align: middle;" class="text-center"><img src="{{ match.teams.home.logo }}" width="50"/></td>
                <td style="vertical-align: middle;" class="text-center">{{ match.scores.home.points }}</td>
                <td style="vertical-align: middle;" class="text-center">-</td>
                <td style="vertical-align: middle;" class="text-center">{{ match.scores.visitors.points }}</td>
                <td style="vertical-align: middle;" class="text-center"><img src="{{ match.teams.visitors.logo }}" width="50"/></td>
                <td style="vertical-align: middle;" class="text-left">{{ match.teams.visitors.name }}</td>
            </tr>
    {% if ((loop.index0!=resultat|length-1) and (match.date.start|date("m")!=resultat[loop.index0+1].date.start|date("m"))) %}
        </table>
    {% endif %}
{% endfor %}
<script>
    var m;
    function mois() {
        m=document.getElementById("mois").value;
        $('table').hide();
        $('#table_'+m).show();
    }
</script>
{% endblock %}