<!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/cards.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="taskbar-shell">
            <div class="taskbar-program-list" data-role="taskbar-program-list"></div>
        </div>
    </div>

    <main id="desktop" class="room-desktop">
        <section id="room-skeleton" class="room-grid skeleton-grid hidden" 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>

            <div class="side-stack">
                <aside class="window side-panel-window participants-window">
                    <div class="title-bar">
                        <span>Participants</span>
                    </div>
                    <div class="window-content side-panel-content">
                        <div class="participants-scroll">
                            <ul id="participant-list" class="participant-list"></ul>
                        </div>
                        <div class="participants-footer">
                            <p id="votes-counter" class="status-line">Votes: 0/0</p>
                            <button type="button" id="change-name-btn" class="btn">Change Name</button>
                        </div>
                    </div>
                </aside>

                <aside class="window side-panel-window admin-window">
                    <div class="title-bar">
                        <span>Admin Controls</span>
                    </div>
                    <div class="window-content side-panel-content">
                        <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-message" class="status-line">Waiting for join...</p>
                    </div>
                </aside>
            </div>
        </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>

        <section
            id="theme-tool-window"
            class="window ui-tool-window hidden"
            role="dialog"
            aria-modal="false"
            aria-labelledby="theme-tool-title"
            data-ui-window
            data-window-title="Theme.exe"
            data-window-rights="all"
            data-window-order="10"
            data-window-default-left="16"
            data-window-default-top="88"
            data-window-default-width="390"
            data-window-default-height="320"
            data-window-icons='{"win98":"/static/img/Windows Icons - PNG/main.cpl_14_109-1.png","modern":"/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png","none":"/static/img/Windows Icons - PNG/taskmgr.exe_14_118-1.png","default":"/static/img/Windows Icons - PNG/main.cpl_14_109-1.png"}'
        >
            <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
                <span id="theme-tool-title">Theme.exe</span>
                <div class="title-bar-controls">
                    <button type="button" data-role="close-window" data-target="theme-tool-window">×</button>
                </div>
            </div>
            <div class="window-content">
                <p class="tool-copy">Pick a visual style for this workspace.</p>
                <div class="theme-option-list">
                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="win98">
                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/main.cpl_14_100-0.png" alt="">
                        <span>Win98</span>
                    </button>
                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="modern">
                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png" alt="">
                        <span>Modern</span>
                    </button>
                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="none">
                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/taskmgr.exe_14_118-1.png" alt="">
                        <span>No Theme</span>
                    </button>
                </div>
                <p class="tool-copy">Set the display mode.</p>
                <p class="tool-copy" id="mode-status-text">Current mode: Light</p>
                <button class="btn mode-toggle-btn" type="button" data-role="mode-toggle-action">
                    <img class="taskbar-icon" data-role="mode-icon" src="/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png" alt="">
                    <span data-role="mode-toggle-label">Switch to Dark Mode</span>
                </button>
            </div>
        </section>

        <section
            id="terminal-tool-window"
            class="window ui-tool-window terminal-window hidden"
            role="dialog"
            aria-modal="false"
            aria-labelledby="terminal-title"
            data-ui-window
            data-window-title="Terminal.exe"
            data-window-rights="admin"
            data-window-order="30"
            data-window-default-left="780"
            data-window-default-top="88"
            data-window-default-width="500"
            data-window-default-height="350"
            data-window-icons='{"win98":"/static/img/Windows Icons - PNG/taskmgr.exe_14_107-1.png","modern":"/static/img/Windows Icons - PNG/taskmgr.exe_14_137.png","none":"/static/img/Windows Icons - PNG/taskmgr.exe_14_118-1.png","default":"/static/img/Windows Icons - PNG/taskmgr.exe_14_107-1.png"}'
        >
            <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
                <span id="terminal-title">Terminal.exe</span>
                <div class="title-bar-controls">
                    <button type="button" data-role="close-window" data-target="terminal-tool-window">×</button>
                </div>
            </div>
            <div class="window-content terminal-window-content">
                <div id="terminal-log-output" class="terminal-log-output" aria-live="polite"></div>
            </div>
        </section>
    </main>

    <footer class="taskbar desktop-taskbar" aria-label="Desktop taskbar">
        <div class="taskbar-shell">
            <div class="taskbar-program-list" data-role="taskbar-program-list"></div>
        </div>
    </footer>

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