<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TicTacToe</title>
    <link rel="stylesheet" href="/css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1>TicTacToe</h1>

        <div id="connection-status" class="status-bar">Connecting to server...</div>

        <!-- Menu Section -->
        <div id="menu" class="panel">
            <h2>Start Game</h2>
            <div class="menu-controls">
                <button id="create-btn" class="btn primary">Create New Game</button>
                <div class="divider">OR</div>
                <div class="join-group">
                    <input type="text" id="join-code" placeholder="Enter Game Code" maxlength="6">
                    <button id="join-btn" class="btn secondary">Join Game</button>
                </div>
            </div>
        </div>

        <div id="game" class="panel hidden">
            <div class="game-info">
                <div class="info-item">
                    <span class="label">Game Code:</span>
                    <span id="display-code" class="value">??????</span>
                </div>
                <div class="info-item">
                    <span class="label">Status:</span>
                    <span id="turn-status" class="value">Waiting...</span>
                </div>
            </div>

            <div class="board" id="board">
                <!-- Cells generated by JS -->
                <div class="cell" data-r="0" data-c="0"></div>
                <div class="cell" data-r="0" data-c="1"></div>
                <div class="cell" data-r="0" data-c="2"></div>
                <div class="cell" data-r="1" data-c="0"></div>
                <div class="cell" data-r="1" data-c="1"></div>
                <div class="cell" data-r="1" data-c="2"></div>
                <div class="cell" data-r="2" data-c="0"></div>
                <div class="cell" data-r="2" data-c="1"></div>
                <div class="cell" data-r="2" data-c="2"></div>
            </div>

            <div class="game-actions">
                <button id="leave-btn" class="btn secondary">Leave Lobby</button>
                <button id="surrender-btn" class="btn danger">Surrender</button>
            </div>

            <div id="debug-log"
                style="margin-top: 20px; font-size: 0.8rem; color: #555; text-align: left; max-height: 200px; overflow-y: auto; border: 1px solid #333; padding: 10px;">
            </div>
        </div>

        <div id="visible-debug" style="margin-top: 20px; color: #666; font-size: 0.8rem;"></div>
    </div>

    <script src="/js/app.js"></script>
</body>

</html>