{% for state in games %}
<section class="accordion">
    <input type="checkbox" name="collapse" id="handle_{{loop.index}}">
    <h2 class="handle">
        <label for="handle_{{loop.index}}">
            <span>{{state.name}} ({% if state.state %}{{state.state.map}}{% else %}{{state.map}}{% endif %})</span>
            <span style="float: right">{% if state.type == "Playing" %}{{ state.connected }}/{{state.total}}{% else %}<a class="link" href='/visualizer?name={{state.name | safe }}&game=/games/{{state.file | safe}}'></a>{% endif %}</span>
        </label>
    </h2>
    <div class="content">
    {% if state.type == "Playing" %}
        <div class="players">
            {% for player in state.players %}
                <p class="{% if player.waiting %}waiting {% endif %}{% if player.connected %}connected {% endif %}{% if player.reconnecting %}reconnecting {% endif %}">{{ player.value }}</p>
            {% endfor %}
        </div>
    {% else %}
        <div class="players">
            {% for player in state.players %}
                <p class="{% if player[1] %}winner{% endif %}">{{ player[0] }}</p>
            {% endfor %}
        </div>
    {% endif %}
    </div>
</section>
{% endfor %}