<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matchmaking Debug</title>
    <style>
        body {
            background-color: #333;
            color: #fff;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        h1, h2 {
            color: #f2f2f2;
        }
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
            background-color: #444;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        th, td {
            border: 1px solid #555;
            text-align: left;
            padding: 12px;
        }
        th {
            background-color: #333;
        }
        tr:nth-child(even) {
            background-color: #555;
        }
        tr:hover {
            background-color: #777;
        }
        ul {
            padding: 0;
            margin: 0;
        }
        li {
            list-style-type: none;
        }
    </style>
    <meta http-equiv="refresh" content="4">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
    <meta name="msapplication-TileColor" content="#000000">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
    <h1>Matchmaking Debug Information</h1>
    <p><strong>Length of Queue:</strong> {{ len_queue }}</p>
    <p><strong>Killed Lobbies:</strong> {{ len_killed_lobbies }}</p>
    <p><strong>Queued Runners:</strong> {{ len_queued_runners }}</p>
    <p><strong>Queued Hunters:</strong> {{ len_queued_hunters }}</p>
    <p><strong>Open Lobbies:</strong> {{ len_open_lobbies }}</p>

    <h2>Lobby Data</h2>
    <table>
        <tr>
            <th>Lobby ID</th>
            <th>Hunters</th>
            <th>Runners</th>
            <th>Status</th>
        </tr>
        {% for lobby in lobby_data %}
        <tr>
            <td>{{ lobby.id }}</td>
            <td>1</td>
            <td>
                <ul>
                    {% for runner in lobby.nonHosts  %}
                    <li>{{ runner.userId }}</li>
                    {% endfor %}
                </ul>
            </td>
            <td>{{ lobby.status }}</td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>
