{{define "settings_content"}}
<style>
    .settings-section {
        margin-bottom: 2rem;
    }
    .settings-info {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.5rem 1.5rem;
        margin-top: 1rem;
    }
    .settings-info dt {
        color: var(--ctp-subtext0);
        font-weight: 500;
    }
    .settings-info dd {
        color: var(--ctp-text);
    }
    .role-badge {
        display: inline-block;
        padding: 0.15rem 0.5rem;
        border-radius: 1rem;
        font-size: 0.8rem;
        font-weight: 600;
    }
    .role-admin {
        background: rgba(203, 166, 247, 0.2);
        color: var(--ctp-mauve);
    }
    .role-editor {
        background: rgba(137, 180, 250, 0.2);
        color: var(--ctp-blue);
    }
    .role-viewer {
        background: rgba(148, 226, 213, 0.2);
        color: var(--ctp-teal);
    }
    .token-display {
        display: block;
        padding: 0.75rem 1rem;
        background: var(--ctp-base);
        border: 1px solid var(--ctp-surface1);
        border-radius: 0.5rem;
        font-family: "JetBrains Mono", "Fira Code", monospace;
        font-size: 0.85rem;
        color: var(--ctp-peach);
        word-break: break-all;
        margin: 0.75rem 0;
    }
    .new-token-banner {
        background: rgba(166, 227, 161, 0.1);
        border: 1px solid rgba(166, 227, 161, 0.3);
        border-radius: 0.75rem;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }
    .new-token-banner p {
        color: var(--ctp-green);
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    .new-token-banner .hint {
        color: var(--ctp-subtext0);
        font-size: 0.85rem;
        font-weight: 400;
    }
    .copy-btn {
        padding: 0.4rem 0.75rem;
        background: var(--ctp-surface1);
        border: none;
        border-radius: 0.4rem;
        color: var(--ctp-text);
        cursor: pointer;
        font-size: 0.85rem;
    }
    .copy-btn:hover {
        background: var(--ctp-surface2);
    }
    .token-prefix {
        font-family: "JetBrains Mono", "Fira Code", monospace;
        color: var(--ctp-peach);
    }
    .btn-danger {
        background: rgba(243, 139, 168, 0.15);
        color: var(--ctp-red);
        border: none;
        padding: 0.4rem 0.75rem;
        border-radius: 0.4rem;
        cursor: pointer;
        font-size: 0.85rem;
    }
    .btn-danger:hover {
        background: rgba(243, 139, 168, 0.25);
    }
    .create-token-form {
        display: flex;
        gap: 0.75rem;
        align-items: flex-end;
        flex-wrap: wrap;
    }
    .create-token-form .form-group {
        margin-bottom: 0;
        flex: 1;
        min-width: 200px;
    }
    .no-tokens {
        color: var(--ctp-subtext0);
        padding: 2rem;
        text-align: center;
    }
</style>

<div class="settings-section">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Account</h2>
        </div>
        {{if .User}}
        <dl class="settings-info">
            <dt>Username</dt>
            <dd>{{.User.Username}}</dd>
            <dt>Display Name</dt>
            <dd>{{.User.DisplayName}}</dd>
            <dt>Email</dt>
            <dd>
                {{if .User.Email}}{{.User.Email}}{{else}}<span
                    style="color: var(--ctp-overlay0)"
                    >Not set</span
                >{{end}}
            </dd>
            <dt>Auth Source</dt>
            <dd>{{.User.AuthSource}}</dd>
            <dt>Role</dt>
            <dd>
                <span class="role-badge role-{{.User.Role}}"
                    >{{.User.Role}}</span
                >
            </dd>
        </dl>
        {{end}}
    </div>
</div>

<div class="settings-section">
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">API Tokens</h2>
        </div>
        <p
            style="
                color: var(--ctp-subtext0);
                margin-bottom: 1.25rem;
                font-size: 0.9rem;
            "
        >
            API tokens allow the FreeCAD plugin and scripts to authenticate with
            Silo. Tokens inherit your role permissions.
        </p>

        {{if and .Data (index .Data "new_token")}} {{if ne (index .Data
        "new_token") ""}}
        <div class="new-token-banner">
            <p>Your new API token (copy it now — it won't be shown again):</p>
            <code class="token-display" id="new-token-value"
                >{{index .Data "new_token"}}</code
            >
            <button
                class="copy-btn"
                onclick="
                    navigator.clipboard
                        .writeText(
                            document.getElementById('new-token-value')
                                .textContent,
                        )
                        .then(() => {
                            this.textContent = 'Copied!';
                        })
                "
            >
                Copy to clipboard
            </button>
            <p class="hint">
                Store this token securely. You will not be able to see it again.
            </p>
        </div>
        {{end}} {{end}}

        <form
            method="POST"
            action="/settings/tokens"
            class="create-token-form"
            style="margin-bottom: 1.5rem"
        >
            <input type="hidden" name="csrf_token" value="{{.CSRFToken}}" />
            <div class="form-group">
                <label class="form-label">Token Name</label>
                <input
                    type="text"
                    name="name"
                    class="form-input"
                    placeholder="e.g., FreeCAD workstation"
                    required
                />
            </div>
            <button
                type="submit"
                class="btn btn-primary"
                style="padding: 0.75rem 1.25rem; white-space: nowrap"
            >
                Create Token
            </button>
        </form>

        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Prefix</th>
                        <th>Created</th>
                        <th>Last Used</th>
                        <th>Expires</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="tokens-table"></tbody>
            </table>
        </div>
    </div>
</div>
{{end}} {{define "settings_scripts"}}
<script>
    (function () {
        async function loadTokens() {
            try {
                const resp = await fetch("/api/auth/tokens");
                if (!resp.ok) return;
                const tokens = await resp.json();
                const tbody = document.getElementById("tokens-table");
                if (!tokens || tokens.length === 0) {
                    tbody.innerHTML =
                        '<tr><td colspan="6" class="no-tokens">No API tokens yet. Create one to get started.</td></tr>';
                    return;
                }
                tbody.innerHTML = tokens
                    .map(
                        (t) => `
                <tr>
                    <td>${escHtml(t.name)}</td>
                    <td><span class="token-prefix">${escHtml(t.token_prefix)}...</span></td>
                    <td>${formatDate(t.created_at)}</td>
                    <td>${t.last_used_at ? formatDate(t.last_used_at) : '<span style="color:var(--ctp-overlay0)">Never</span>'}</td>
                    <td>${t.expires_at ? formatDate(t.expires_at) : '<span style="color:var(--ctp-overlay0)">Never</span>'}</td>
                    <td>
                        <form method="POST" action="/settings/tokens/${t.id}/revoke" style="display:inline">
                            <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                            <button type="submit" class="btn-danger" onclick="return confirm('Revoke this token?')">Revoke</button>
                        </form>
                    </td>
                </tr>
            `,
                    )
                    .join("");
            } catch (e) {
                console.error("Failed to load tokens:", e);
            }
        }

        function formatDate(s) {
            if (!s) return "";
            const d = new Date(s);
            return (
                d.toLocaleDateString() +
                " " +
                d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
            );
        }

        function escHtml(s) {
            const div = document.createElement("div");
            div.textContent = s;
            return div.innerHTML;
        }

        // Check for newly created token in URL or page state
        const params = new URLSearchParams(window.location.search);
        // The token is passed via a cookie/session flash, rendered by the server if present
        loadTokens();
    })();
</script>
{{end}}