{{ define "content" }}
<div class="page-header">
    <h1>Account Settings</h1>
</div>

<div id="account-settings-content">
    <div id="account-settings-message" class="message" style="display: none; margin-bottom: 1.5rem;"></div>

    <div class="modal-split" style="align-items: start;">
        <div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem;">
            <h2 style="font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text);">Profile</h2>
            <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Change your username. Avatar upload is planned for later.</p>

            <form id="username-form" onsubmit="saveAccountUsername(event)">
                <div class="form-group">
                    <label for="settings-username" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Username</label>
                    <input type="text" id="settings-username" placeholder="Username" required>
                </div>
                <div class="form-group">
                    <label for="settings-username-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Current password</label>
                    <input type="password" id="settings-username-password" placeholder="Confirm with current password" required autocomplete="current-password">
                </div>
                <button type="submit" class="btn btn-primary">Save username</button>
            </form>

            <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border);">
                <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Avatar</h3>
                <div style="display:flex; align-items:center; gap:1rem; color: var(--text-muted);">
                    <div id="settings-avatar-preview" class="avatar">M</div>
                    <div>
                        <div>Avatar upload is not implemented yet.</div>
                        <div style="font-size:0.85rem; margin-top:0.25rem;">This placeholder keeps the settings layout ready for it.</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem;">
            <h2 style="font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text);">Password</h2>
            <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Change your password. You will receive a fresh session afterwards.</p>

            <form id="password-form" onsubmit="saveAccountPassword(event)">
                <div class="form-group">
                    <label for="settings-current-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Current password</label>
                    <input type="password" id="settings-current-password" placeholder="Current password" required autocomplete="current-password">
                </div>
                <div class="form-group">
                    <label for="settings-new-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">New password</label>
                    <input type="password" id="settings-new-password" placeholder="New password" required autocomplete="new-password">
                </div>
                <div class="form-group">
                    <label for="settings-confirm-password" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Confirm new password</label>
                    <input type="password" id="settings-confirm-password" placeholder="Confirm new password" required autocomplete="new-password">
                </div>
                <button type="submit" class="btn btn-primary">Change password</button>
            </form>
        </div>
    </div>

    <div class="card" style="max-width: 100%; text-align: left; padding: 1.5rem; margin-top: 1.5rem;">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;">
            <div>
                <h2 style="font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text);">Two-factor authentication</h2>
                <p id="two-factor-status" style="color: var(--text-muted); margin-bottom: 1rem;">Loading 2FA status...</p>
            </div>
            <span id="two-factor-badge" class="badge">Unknown</span>
        </div>

        <div id="two-factor-disabled-panel" style="display: none;">
            <p style="color: var(--text-muted); margin-bottom: 1rem;">Use an authenticator app. You can scan the QR code or enter the setup key manually.</p>
            <button type="button" class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem;" onclick="startTwoFactorSetup()">Start 2FA setup</button>

            <div id="two-factor-setup-panel" style="display: none; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);">
                <div class="modal-split" style="align-items: start;">
                    <div>
                        <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Scan QR code</h3>
                        <img id="two-factor-qr" alt="2FA QR code" style="display: none; width: 220px; height: 220px; background: white; padding: 0.5rem; border-radius: 12px;">
                    </div>
                    <div>
                        <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Manual setup</h3>
                        <p style="color: var(--text-muted); margin-bottom: 0.75rem;">If you do not want to scan the QR code, enter this key manually in your authenticator app.</p>
                        <code id="two-factor-secret" style="display:block; word-break: break-all; background:#111827; border:1px solid var(--border); border-radius:10px; padding:0.85rem; color:var(--text);"></code>
                        <a id="two-factor-otpauth" href="#" style="display:block; color: var(--accent); margin-top:0.75rem; word-break: break-all;">Open otpauth URL</a>
                    </div>
                </div>

                <form id="two-factor-enable-form" onsubmit="enableTwoFactor(event)" style="margin-top: 1.5rem;">
                    <div class="form-group">
                        <label for="two-factor-enable-code" style="display:block; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem;">Authenticator code</label>
                        <input type="text" id="two-factor-enable-code" inputmode="numeric" placeholder="123456" required autocomplete="one-time-code">
                    </div>
                    <button type="submit" class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem;">Enable 2FA</button>
                </form>
            </div>
        </div>

        <div id="two-factor-enabled-panel" style="display: none;">
            <p style="color: var(--text-muted); margin-bottom: 1rem;">Recovery codes remaining: <strong id="recovery-codes-remaining">0</strong></p>

            <div id="recovery-codes-panel" style="display: none; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: #111827;">
                <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Recovery codes</h3>
                <p style="color: var(--text-muted); margin-bottom: 1rem;">Save these now. They are shown only once.</p>
                <pre id="recovery-codes-list" style="white-space: pre-wrap; word-break: break-word; color: var(--text); background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; margin-bottom: 1rem;"></pre>
                <button type="button" class="btn btn-primary" style="width: auto; padding: 0.6rem 1.2rem;" onclick="downloadRecoveryCodes()">Download recovery codes</button>
            </div>

            <div class="modal-split" style="align-items: start;">
                <div>
                    <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Regenerate recovery codes</h3>
                    <p style="color: var(--text-muted); margin-bottom: 1rem;">This invalidates all existing recovery codes.</p>
                    <form id="recovery-regenerate-form" onsubmit="regenerateRecoveryCodes(event)">
                        <div class="form-group">
                            <input type="password" id="recovery-password" placeholder="Current password" required autocomplete="current-password">
                        </div>
                        <div class="form-group">
                            <input type="text" id="recovery-code" inputmode="numeric" placeholder="Authenticator code" required autocomplete="one-time-code">
                        </div>
                        <button type="submit" class="btn btn-secondary">Generate new recovery codes</button>
                    </form>
                </div>

                <div>
                    <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: var(--text);">Disable 2FA</h3>
                    <p style="color: var(--text-muted); margin-bottom: 1rem;">Disabling 2FA revokes your active refresh sessions.</p>
                    <form id="two-factor-disable-form" onsubmit="disableTwoFactor(event)">
                        <div class="form-group">
                            <input type="password" id="two-factor-disable-password" placeholder="Current password" required autocomplete="current-password">
                        </div>
                        <div class="form-group">
                            <input type="text" id="two-factor-disable-code" inputmode="numeric" placeholder="Authenticator code" required autocomplete="one-time-code">
                        </div>
                        <button type="submit" class="btn btn-secondary danger-btn">Disable 2FA</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}