<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>datascape companion — settings</title>
    <style>
        :root {
            --bg: #2e2e2e;
            --bg-panel: #434343;
            --text: #e6e6e6;
            --text-muted: #cfcfcf;
            --primary: #87458a;
            --primary-hover: #d64d95;
            --secondary: #c48401;
            --link: #01b6c4;
        }
        body {
            background: var(--bg);
            color: var(--text);
            font: 1rem ui-monospace, monospace;
            margin: 0;
            padding: 2rem 1rem;
            display: flex;
            justify-content: center;
        }
        main { width: 100%; max-width: 40rem; }
        h1 { font-size: 1.2rem; margin: 0 0 0.25rem; }
        .muted { color: var(--text-muted); font-size: 0.85rem; }
        .header { border-bottom: 1px dashed var(--secondary); padding-bottom: 0.75rem; margin-bottom: 1rem; }
        label { display: block; margin: 1rem 0 0.25rem; font-size: 0.9rem; }
        input[type=text], textarea {
            width: 100%;
            background: var(--bg-panel);
            color: var(--text);
            border: 1px solid var(--secondary);
            font: inherit;
            padding: 0.5rem;
        }
        textarea { min-height: 6rem; resize: vertical; }
        .help { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.25rem; }
        button {
            background: var(--primary);
            color: var(--text);
            border: none;
            padding: 0.6rem 1.2rem;
            font: inherit;
            cursor: pointer;
            margin-top: 1.25rem;
        }
        button:hover { background: var(--primary-hover); }
        .btn-small {
            padding: 0.4rem 0.75rem;
            font-size: 0.8rem;
            margin-top: 0;
        }
        .input-row {
            display: flex;
            gap: 0.5rem;
            align-items: stretch;
        }
        .input-row input { flex: 1; }
        .notice {
            background: var(--bg-panel);
            border-left: 3px solid var(--secondary);
            padding: 0.5rem 0.75rem;
            margin-bottom: 1rem;
        }
        .meta { margin-top: 2rem; font-size: 0.8rem; color: var(--text-muted); border-top: 1px dashed var(--secondary); padding-top: 0.75rem; }
        .meta div { margin: 0.2rem 0; }
        code { color: var(--link); word-break: break-all; }
        .log {
            margin-top: 2rem;
            border-top: 1px dashed var(--secondary);
            padding-top: 0.75rem;
        }
        .log h2 { font-size: 0.95rem; margin: 0 0 0.5rem; }
        .log pre {
            background: var(--bg-panel);
            border: 1px solid var(--secondary);
            margin: 0;
            padding: 0.5rem 0.75rem;
            max-height: 20rem;
            overflow: auto;
            font-size: 0.8rem;
            white-space: pre-wrap;
            word-break: break-all;
        }
    </style>
</head>
<body>
<main>
    <div class="header">
        <h1>datascape-companion</h1>
        <div class="muted">version {{.Version}} · port {{.Port}}</div>
    </div>

    {{if .Notice}}<div class="notice">{{.Notice}}</div>{{end}}

    <form method="POST" action="/config">
        <label for="wikiRoot">Wiki content mount path</label>
        <input id="wikiRoot" name="wikiRoot" type="text" value="{{.WikiRoot}}" placeholder="Z:\wiki  or  /mnt/wiki">
        <div class="help">Local filesystem path where the wiki's content tree is mounted.</div>

        <label for="allowedOrigins">Allowed wiki origins</label>
        <textarea id="allowedOrigins" name="allowedOrigins" placeholder="https://wiki.example.lan&#10;http://192.168.1.10:8080">{{.AllowedOrigins}}</textarea>
        <div class="help">One origin per line (scheme + host + optional port, no trailing slash). Only browser tabs from these origins can ask the companion to open files.</div>

        <label for="openFileCommand">Open-file command</label>
        <div class="input-row">
            <input id="openFileCommand" name="openFileCommand" type="text" value="{{.OpenFileCommand}}" placeholder="{{.DefaultOpenFileCommand}}">
            <button type="button" class="btn-small" data-reset="openFileCommand" data-default="{{.DefaultOpenFileCommand}}">RESET</button>
        </div>
        <div class="help">Run when the wiki asks to open a file. Use <code>{{`{path}`}}</code> for the resolved file path. Leave blank to use the default. Default: <code>{{.DefaultOpenFileCommand}}</code></div>

        <label for="openFolderCommand">Open-folder command</label>
        <div class="input-row">
            <input id="openFolderCommand" name="openFolderCommand" type="text" value="{{.OpenFolderCommand}}" placeholder="{{.DefaultOpenFolderCommand}}">
            <button type="button" class="btn-small" data-reset="openFolderCommand" data-default="{{.DefaultOpenFolderCommand}}">RESET</button>
        </div>
        <div class="help">Run when the wiki asks to reveal a folder. Default: <code>{{.DefaultOpenFolderCommand}}</code></div>

        <button type="submit">SAVE</button>
    </form>

    <script>
        document.querySelectorAll('button[data-reset]').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var input = document.getElementById(btn.dataset.reset);
                if (input) input.value = btn.dataset.default;
            });
        });
    </script>

    <div class="meta">
        <div>Config file: <code>{{.ConfigPath}}</code></div>
        <div>Log file: <code>{{.LogPath}}</code></div>
        <div>Port is set in the config file only; restart after editing.</div>
    </div>

    <div class="log">
        <h2>Log (last 50 lines)</h2>
        {{if .LogError}}
            <div class="muted">Could not read log: {{.LogError}}</div>
        {{else if .LogTail}}
            <pre>{{.LogTail}}</pre>
        {{else}}
            <div class="muted">Log is empty.</div>
        {{end}}
    </div>
</main>
</body>
</html>
