<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LEX - Learning EX-a-pawn</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <header>
            <h1>LEX - Learning EX-a-pawn</h1>
            <p class="subtitle">A game by Mattia Monga © 2020-25</p>
        </header>

        <div class="game-setup" id="gameSetup">
            <h2>New game</h2>

            <div class="setup-section">
                <h3>Board configuration</h3>
                <label>
                    Enter board code (optional):
                    <input type="text" id="boardCode" placeholder="e.g., BBB">
                </label>
            </div>

            <div class="setup-section">
                <h3>Player 1 (Cyan ♙) - starts first</h3>
                <label>
                    <input type="radio" name="player1Type" value="human" checked>
                    Human
                </label>
                <label>
                    <input type="radio" name="player1Type" value="computer">
                    Computer
                </label>
                <div id="player1ExpSection" style="display: none;">
                    <label>
                        Select existing file:
                        <select id="player1ExpSelect">
                            <option value="">-- Choose a file --</option>
                        </select>
                    </label>
                    <p style="text-align: center; margin: 10px 0;">or</p>
                    <label>
                        Upload new experience file:
                        <input type="file" id="player1Exp" accept=".xlsx">
                    </label>
                </div>
            </div>

            <div class="setup-section">
                <h3>Player 2 (Violet ♟)</h3>
                <label>
                    <input type="radio" name="player2Type" value="human" checked>
                    Human
                </label>
                <label>
                    <input type="radio" name="player2Type" value="computer">
                    Computer
                </label>
                <div id="player2ExpSection" style="display: none;">
                    <label>
                        Select existing file:
                        <select id="player2ExpSelect">
                            <option value="">-- Choose a file --</option>
                        </select>
                    </label>
                    <p style="text-align: center; margin: 10px 0;">or</p>
                    <label>
                        Upload new experience file:
                        <input type="file" id="player2Exp" accept=".xlsx">
                    </label>
                </div>
            </div>

            <button class="btn-primary" onclick="startNewGame()">Start game</button>
        </div>

        <div class="game-container" id="gameContainer" style="display: none;">
            <div class="game-info">
                <div class="status" id="gameStatus">
                    <span id="currentPlayerSpan"></span>
                    <span id="turnSpan"></span>
                </div>
                <div class="board-code">
                    Board code: <span id="boardCodeDisplay"></span>
                </div>
            </div>

            <div id="board" class="board"></div>

            <div class="game-controls">
                <div id="moveSelection" style="display: none;">
                    <p>Select your move:</p>
                    <div id="legalMoves"></div>
                </div>
                <button class="btn-secondary" onclick="resetGame()">New game</button>
            </div>

            <div id="winnerMessage" class="winner-message" style="display: none;"></div>
        </div>

        <div class="rules">
            <h3>Rules</h3>
            <p>Pawns move and capture as in chess, but there are neither two-step moves nor en-passant captures.</p>
            <p>Players win by reaching the last row or by blocking the opponent.</p>
            <p>Moves are given by two letters: the starting column and the ending one.</p>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/game.js') }}"></script>
</body>
</html>
