{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4">
    <h1>Bundeslaender Deutschland Quiz</h1>
    <div class="mt-4 mb-4 text-center">
        <h3>Sichtbar als <b>{{ participant.display_name }}</b></h3>
    </div>
    <div id="player-list">
        <ul>
            <li>Noch keine Spieler gefunden.</li>
        </ul>
        {{debug}}
    </div>
    <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Starten</button>
</div>

<script>
    // TODO: Websocket Verbindung aufbauen und Teilnehmerliste bei beitreten updaten
</script>
{% endblock %}