<!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 Configuration</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="config">
    <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">
        <section class="window config-window" aria-label="Room configuration">
            <div class="title-bar">
                <span>CreateRoom.exe</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">
                <p class="intro-copy">Configure your Scrum Poker room and share the invite link with your team.</p>

                <form id="room-config-form" class="room-form" novalidate>
                    <div class="config-layout">
                        <section class="config-panel">
                            <div class="field-group">
                                <label for="room-name">Room name</label>
                                <input type="text" id="room-name" name="roomName" maxlength="80" value="{{ .DefaultRoomName }}" placeholder="Sprint 32 Planning" required>
                            </div>

                            <div class="field-row">
                                <div class="field-group">
                                    <label for="username">Your username</label>
                                    <input type="text" id="username" name="username" maxlength="32" value="{{ .DefaultUsername }}" placeholder="alice_dev" required>
                                </div>

                                <div class="field-group">
                                    <label for="max-people">Max people</label>
                                    <div class="number-input-wrap">
                                        <input type="number" id="max-people" name="maxPeople" min="2" max="50" value="{{ .DefaultMaxPeople }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="field-row">
                                <div class="field-group">
                                    <label for="estimation-scale">Estimation scale</label>
                                    <select id="estimation-scale" name="estimationScale">
                                        <option value="fibonacci" {{ if eq .DefaultScale "fibonacci" }}selected{{ end }}>Fibonacci (0,1,2,3,5,8,13,21,?)</option>
                                        <option value="tshirt" {{ if eq .DefaultScale "tshirt" }}selected{{ end }}>T-Shirt (XS,S,M,L,XL,?)</option>
                                        <option value="powers-of-two" {{ if eq .DefaultScale "powers-of-two" }}selected{{ end }}>Powers of 2 (1,2,4,8,16,32,?)</option>
                                    </select>
                                </div>

                                <div class="field-group">
                                    <label for="reveal-mode">Reveal mode</label>
                                    <select id="reveal-mode" name="revealMode">
                                        <option value="manual" {{ if eq .DefaultRevealMode "manual" }}selected{{ end }}>Manual reveal by moderator</option>
                                        <option value="all_voted" {{ if eq .DefaultRevealMode "all_voted" }}selected{{ end }}>Auto reveal when everyone voted</option>
                                    </select>
                                </div>
                            </div>

                            <div class="field-row">
                                <div class="field-group">
                                    <label for="voting-timeout">Voting timeout (seconds)</label>
                                    <div class="number-input-wrap number-with-unit">
                                        <input type="number" id="voting-timeout" name="votingTimeoutSec" min="0" max="3600" value="{{ .DefaultVotingTime }}">
                                        <span class="input-unit">sec</span>
                                    </div>
                                </div>

                                <div class="field-group">
                                    <label for="room-password">Room password (optional)</label>
                                    <input type="password" id="room-password" name="password" maxlength="64" placeholder="Optional password">
                                </div>
                            </div>

                            <fieldset class="window options-box">
                                <legend>Room options</legend>
                                <label class="option-item">
                                    <input type="checkbox" id="allow-spectators" name="allowSpectators" {{ if .AllowSpectators }}checked{{ end }}>
                                    <span>Allow spectators (non-voting viewers)</span>
                                </label>
                                <label class="option-item">
                                    <input type="checkbox" id="anonymous-voting" name="anonymousVoting" {{ if .AnonymousVoting }}checked{{ end }}>
                                    <span>Anonymous voting until reveal</span>
                                </label>
                                <label class="option-item">
                                    <input type="checkbox" id="auto-reset" name="autoReset" {{ if .AutoResetCards }}checked{{ end }}>
                                    <span>Auto-reset cards after each reveal</span>
                                </label>
                            </fieldset>
                        </section>

                        <aside class="window preview-window" aria-label="Room preview">
                            <div class="title-bar">
                                <span>Room Preview</span>
                            </div>
                            <div class="window-content preview-content">
                                <div class="preview-meta">
                                    <span id="preview-scale">Scale: {{ .DefaultScale }}</span>
                                    <span id="preview-max-people">Max: {{ .DefaultMaxPeople }}</span>
                                </div>

                                <div class="preview-board" id="preview-board">
                                    <div class="preview-cards" id="preview-cards"></div>
                                </div>

                                <p class="hint-text">Drag cards to reorder. Hover a card to remove it.</p>

                                <div class="card-editor">
                                    <label for="custom-card">Add card</label>
                                    <div class="card-editor-row">
                                        <input type="text" id="custom-card" maxlength="8" placeholder="e.g. 34 or ?">
                                        <button type="button" id="add-card" class="btn">Add</button>
                                        <button type="button" id="auto-sort" class="btn">Auto-sort</button>
                                    </div>
                                </div>

                                <div class="deck-tools-row">
                                    <button type="button" id="save-preset" class="btn">Save preset</button>
                                    <button type="button" id="share-deck" class="btn">Share</button>
                                    <button type="button" id="preset-picker-toggle" class="btn icon-btn" aria-expanded="false" aria-controls="preset-modal-overlay" title="Open Presets">
                                        <img src="/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png" alt="Presets">
                                    </button>
                                </div>
                            </div>
                        </aside>
                    </div>

                    <div class="status-line" id="config-status" role="status" aria-live="polite">{{ .DefaultStatus }}</div>

                    <div class="actions-row">
                        <button type="reset" class="btn">Reset</button>
                        <button type="submit" class="btn btn-primary">Create Room</button>
                    </div>
                </form>
            </div>
        </section>

        <div id="preset-modal-overlay" class="preset-modal-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="preset-modal-title">
            <section class="window preset-modal-window">
                <div class="title-bar">
                    <span id="preset-modal-title">Deck Presets</span>
                    <div class="title-bar-controls">
                        <button type="button" id="preset-modal-close">×</button>
                    </div>
                </div>
                <div class="window-content">
                    <div id="preset-list" class="preset-list"></div>
                    <div class="preset-modal-actions">
                        <button type="button" id="import-toggle" class="btn import-btn">Import</button>
                        <button type="button" id="preset-modal-done" class="btn">Done</button>
                    </div>
                    <div id="import-pane" class="import-pane hidden">
                        <textarea id="import-b64" rows="3" placeholder="Paste base64 deck string"></textarea>
                        <div class="actions-row">
                            <button type="button" id="import-apply" class="btn">Apply Import</button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </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/config.js"></script>
</body>
</html>
