{{ template "account_shell_start" . }}
<main class="account-window" aria-labelledby="account-settings-title">
    {{ template "account_window_titlebar" . }}

    <nav class="menu-bar" aria-label="Settings toolbar">
        <div class="menu-item">
            <button class="menu-button" type="button" aria-expanded="false">File</button>
            <div class="menu-popup" role="menu">
                <a class="menu-action" href="/account/settings"><span>R</span><span>Refresh settings</span><span></span></a>
                <a class="menu-action" href="/account/settings/export.json"><span>E</span><span>Export JSON</span><span></span></a>
                <div class="menu-separator"></div>
                <form action="/account/logout" method="post">
                    {{ template "account_csrf_field" . }}
                    <button class="menu-action" type="submit"><span>Q</span><span>Log out</span><span></span></button>
                </form>
            </div>
        </div>
        <div class="menu-item">
            <button class="menu-button" type="button" aria-expanded="false">View</button>
            <div class="menu-popup" role="menu">
                {{ range .Groups }}
                    <a class="menu-action" href="#settings-{{ .Key }}"><span>S</span><span>{{ .Label }}</span><span></span></a>
                {{ end }}
            </div>
        </div>
    </nav>

    <form class="settings-layout account-body-content" action="/account/settings" method="post">
        {{ template "account_csrf_field" . }}

        <section class="settings-summary raised-panel" aria-label="Settings status">
            {{ if .Error }}<span class="badge is-danger">{{ .Error }}</span>{{ end }}
            {{ if .Notice }}<span class="badge is-ok">{{ .Notice }}</span>{{ end }}
            {{ if .OverridesAllowed }}
                <span class="badge is-ok">overrides enabled</span>
            {{ else }}
                <span class="badge is-warning">read-only: overrides disabled</span>
            {{ end }}
            <a class="tiny-button" href="/account/settings/export.json">Export JSON</a>
            <button class="tiny-button" type="button" data-settings-import-toggle>Import JSON</button>
        </section>

        <section class="settings-import raised-panel" data-settings-import-panel hidden>
            <label class="account-form-row">
                <span>Settings backup JSON</span>
                <textarea class="account-control" rows="5" data-settings-import-json></textarea>
            </label>
            <button class="win98-button" type="button" data-settings-import-submit {{ if not .CanEdit }}disabled{{ end }}>Import</button>
        </section>

        <div class="settings-scroll scroll-panel" aria-label="Grouped settings">
            {{ range .Groups }}
                <section class="settings-group" id="settings-{{ .Key }}">
                    <header class="settings-group-header">
                        <h2>{{ .Label }}</h2>
                        <p>{{ .Description }}</p>
                    </header>
                    <table class="account-table settings-table">
                        <thead>
                            <tr>
                                <th>Setting</th>
                                <th>Description</th>
                                <th>Value</th>
                                <th>Source</th>
                                <th>Reset</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{ range .Rows }}
                                <tr>
                                    <td>
                                        <strong>{{ .Label }}</strong>
                                        <span class="setting-key">{{ .Key }}</span>
                                    </td>
                                    <td><p class="setting-description">{{ .Description }}</p></td>
                                    <td>
                                        {{ if .Editable }}
                                            {{ if eq .Type "bool" }}
                                                <label class="account-checks"><span><input type="checkbox" name="{{ .Key }}" value="true" {{ if eq .Value "true" }}checked{{ end }}> enabled</span></label>
                                            {{ else }}
                                                <input class="account-control" name="{{ .Key }}" value="{{ .Value }}" inputmode="numeric">
                                                <span class="setting-key">{{ .DisplayValue }}</span>
                                            {{ end }}
                                        {{ else }}
                                            <span>{{ .DisplayValue }}</span>
                                            {{ if .LockedReason }}<span class="setting-key">{{ .LockedReason }}</span>{{ end }}
                                        {{ end }}
                                    </td>
                                    <td>
                                        <span class="setting-source">
                                            <span class="badge is-info">{{ .Source }}</span>
                                            <span class="setting-env">{{ .EnvName }}</span>
                                        </span>
                                    </td>
                                    <td>
                                        {{ if .Editable }}
                                            <button class="tiny-button" type="submit" form="reset-{{ .Key }}">Reset</button>
                                        {{ else }}
                                            <span class="badge">locked</span>
                                        {{ end }}
                                    </td>
                                </tr>
                            {{ else }}
                                <tr><td colspan="5">No settings in this group.</td></tr>
                            {{ end }}
                        </tbody>
                    </table>
                </section>
            {{ end }}
        </div>

        <section class="settings-actions raised-panel" aria-label="Settings actions">
            <button class="win98-button" type="submit" {{ if not .CanEdit }}disabled{{ end }}>Save Settings</button>
        </section>
    </form>

    {{ range .Groups }}
        {{ range .Rows }}
            {{ if .Editable }}
                <form id="reset-{{ .Key }}" action="/account/settings/reset" method="post" hidden>
                    {{ template "account_csrf_field" $ }}
                    <input type="hidden" name="key" value="{{ .Key }}">
                </form>
            {{ end }}
        {{ end }}
    {{ end }}

    <footer class="win98-statusbar" aria-label="Settings status">
        <span>settings</span>
        <span>{{ if .CanEdit }}editable{{ else }}read-only{{ end }}</span>
        <span>ready</span>
    </footer>
</main>
{{ template "account_shell_end" . }}