@(user: Option[model.users.User])

@navbar(user)
<main class="lobby-background flex-grow-1">
    <div class="w-25 mx-auto">
        <div class="mt-3">
            <label for="lobbyname" class="form-label">Lobby-Name</label>
            <input type="text" class="form-control" id="lobbyname" name="lobbyname" placeholder="Lobby 1" required>
        </div>
        <div class="form-check form-switch mt-3">
            <input class="form-check-input" type="checkbox" id="visibilityswitch" disabled>
            <label class="form-check-label" for="visibilityswitch">public/private</label>
        </div>
        <div class="mt-3">
            <label for="playeramount" class="form-label">Playeramount:</label>
            <input type="range" class="form-range text-body" min="2" max="7" value="2" id="playeramount" name="playeramount">
            <div class="d-flex justify-content-between">
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
            </div>
        </div>
        <div class="mt-3 text-center">
            <div class="btn btn-success" onclick="createGameJS()">Create Game</div>
        </div>
    </div>
</main>
<script>
            disconnectWebSocket();
</script>