<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrum Poker Room</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/main.css">
    <link rel="stylesheet" href="/static/css/layout.css">
    <link rel="stylesheet" href="/static/css/themes/win98.css">
    <link rel="stylesheet" href="/static/css/themes/modern.css">
    <link rel="stylesheet" href="/static/css/themes/no-theme.css">
</head>
<body data-page="room" data-room-id="{{ .RoomID }}" class="prejoin">
    <div class="mobile-control-strip">
        <div class="ui-controls">
            <select class="theme-picker" data-role="theme-picker" aria-label="Theme picker">
                <option value="win98">Win98</option>
                <option value="modern">Modern</option>
                <option value="none">No Theme</option>
            </select>
            <button class="btn" type="button" data-role="mode-toggle">Dark Mode</button>
        </div>
    </div>

    <main id="desktop" class="room-desktop">
        <section id="room-skeleton" class="room-grid skeleton-grid" aria-hidden="true">
            <article class="window room-main-window">
                <div class="title-bar"><span>Loading room...</span></div>
                <div class="window-content">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-board"></div>
                    <div class="skeleton-line short"></div>
                    <div class="skeleton-table"></div>
                </div>
            </article>
            <aside class="window side-panel-window">
                <div class="title-bar"><span>Loading participants...</span></div>
                <div class="window-content">
                    <div class="skeleton-list"></div>
                    <div class="skeleton-controls"></div>
                </div>
            </aside>
        </section>

        <section id="room-grid" class="room-grid hidden" aria-label="Scrum poker room board">
            <article class="window room-main-window">
                <div class="title-bar">
                    <span id="room-title">Room</span>
                    <div class="title-bar-controls" aria-hidden="true">
                        <button type="button">_</button>
                        <button type="button">□</button>
                        <button type="button">×</button>
                    </div>
                </div>
                <div class="window-content">
                    <div class="room-meta">
                        <span id="reveal-mode-label">Reveal mode: manual</span>
                        <span id="round-state-label">Cards hidden</span>
                    </div>
                    <div class="voting-board" id="voting-board"></div>

                    <section class="window vote-summary-window" id="vote-summary-window">
                        <div class="title-bar">
                            <span>Vote Summary</span>
                        </div>
                        <div class="window-content vote-summary-content">
                            <table class="summary-table" id="summary-table">
                                <thead>
                                    <tr>
                                        <th>Card</th>
                                        <th>Users</th>
                                    </tr>
                                </thead>
                                <tbody id="summary-body"></tbody>
                            </table>
                            <div class="summary-metrics">
                                <span id="summary-average">Average: -</span>
                                <span id="summary-recommended">Recommended: -</span>
                            </div>
                        </div>
                    </section>
                </div>
            </article>

            <aside class="window side-panel-window">
                <div class="title-bar">
                    <span>Participants & Controls</span>
                </div>
                <div class="window-content side-panel-content">
                    <div class="participants-scroll">
                        <ul id="participant-list" class="participant-list"></ul>
                    </div>

                    <section class="side-controls">
                        <div class="links-block">
                            <label for="share-link">Share Link</label>
                            <div class="share-link-row">
                                <input id="share-link" type="text" readonly>
                                <label class="share-admin-toggle">
                                    <input id="share-admin-toggle" type="checkbox">
                                    <span>Admin</span>
                                </label>
                            </div>
                        </div>
                        <div id="admin-controls" class="admin-controls hidden">
                            <button type="button" id="reveal-btn" class="btn">Reveal</button>
                            <button type="button" id="reset-btn" class="btn">Reset</button>
                        </div>
                        <p id="room-status" class="status-line">Waiting for join...</p>
                    </section>
                </div>
            </aside>
        </section>

        <section id="join-panel" class="window join-window" aria-label="Join room">
            <div class="title-bar">
                <span>JoinRoom.exe</span>
            </div>
            <div class="window-content">
                <form id="join-form" class="room-form" novalidate>
                    <div class="field-group">
                        <label for="join-username">Username</label>
                        <input id="join-username" name="username" type="text" maxlength="32" required>
                    </div>
                    <div class="field-group">
                        <label for="join-role">Role</label>
                        <select id="join-role" name="role">
                            <option value="participant">Participant</option>
                            <option value="viewer">Viewer</option>
                        </select>
                    </div>
                    <div class="field-group">
                        <label for="join-password">Room password (if required)</label>
                        <input id="join-password" name="password" type="password" maxlength="64">
                    </div>
                    <div class="field-group">
                        <label for="join-admin-token">Admin token (optional)</label>
                        <input id="join-admin-token" name="adminToken" type="text" maxlength="64">
                    </div>
                    <div class="actions-row">
                        <button type="submit" class="btn btn-primary">Join Room</button>
                    </div>
                    <p id="join-error" class="status-line hidden"></p>
                </form>
            </div>
        </section>
    </main>

    <footer class="taskbar desktop-taskbar" aria-label="Desktop taskbar">
        <div class="ui-controls">
            <select class="theme-picker" data-role="theme-picker" aria-label="Theme picker">
                <option value="win98">Win98</option>
                <option value="modern">Modern</option>
                <option value="none">No Theme</option>
            </select>
            <button class="btn" type="button" data-role="mode-toggle">Dark Mode</button>
        </div>
    </footer>

    <script src="/static/js/ui-controls.js"></script>
    <script src="/static/js/room.js"></script>
</body>
</html>
