<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset=utf-8>
        <title>Math'Educ</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link rel="stylesheet" href="/css/global.css">
    </head>

    <body id="bodyStyle">
        <div>
            <a href="/" role="button" class="fs-4 btn btn-secondary btn-lg position-absolute top-0 mt-2 end-0 me-2">
                Retour
            </a>
        </div>
        <div class="container mt-5">
        
            <div class="container d-flex justify-content-between">
                <h1 style="color: white;">Liste des Lobbies</h1>
                <div class="btn">
                    <a type="button" class="btn btn-primary" href="">ajouter un Lobby</a>
                </div>
            </div>
            
            <ul class="list-group">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <h4>Lobby</h4>
                    <h4>Nombre de joueurs</h4>
                    <h4></h4>
                </li>
                {% for lobby in lobbies %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <h6>{{lobby.name}}</h6>
                        <h6>0/{{lobby.nbPlayer}}</h6>
                        <div class="btn">
                            <a type="button" class="btn btn-primary" href="">Rejoindre</a>
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

    </body>
</html>