{% extends "ui/_layout.html" %}
{% block title %}Settings - bty-web{% endblock %}

{% block subnav %}
{# Settings is the one page with real sub-nav: in-page jump links to
   each card, separated by vertical rules. #}
<nav class="navbar subnav-strip" aria-label="Settings sections">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#netboot-release">Netboot release</a>
            <span class="vr"></span>
            <a href="#catalog-source">Catalog</a>
            <span class="vr"></span>
            <a href="#backup-schedule">Backup schedule</a>
            <span class="vr"></span>
            <a href="#display">Display</a>
            <span class="vr"></span>
            <a href="#settings-identity">Identity</a>
            <span class="vr"></span>
            <a href="#settings-storage-paths">Storage paths</a>
            <span class="vr"></span>
            <a href="#settings-network">Network</a>
            <span class="vr"></span>
            <a href="#dhcp-pxe">DHCP / Network boot</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Where every bty magic value comes from. Most are read-only (set via
    environment variable or derived from the state directory); the
    <strong>Netboot release</strong> and <strong>Catalog</strong> cards
    are editable and persist in the database. The
    <strong>DHCP / Network boot</strong> cheatsheet below is the
    router-side config to point PXE / HTTP-Boot clients at this host.
    Operator authentication lives on the
    <a href="/ui/account">Account</a> page.
{% endcall %}
{% endblock %}

{% block content %}
{# Both editable cards share the same POST handler (/ui/settings/upstream)
   but render as visually-distinct cards so the operator's mental model
   (netboot artifacts vs image catalog) maps onto the UI. The form
   element lives outside the row and is referenced by ``form=
   "upstream-form"`` on every input + button, which is the HTML5
   way to associate fields with a non-ancestor form. Submitting
   from EITHER card saves all three fields in one round-trip. #}
<form method="post" action="/ui/settings/upstream" id="upstream-form"></form>

{# Row 1: Catalog spans full width. The card carries an
   explanatory callout about the dual-flavour nosi catalog model
   plus the single URL input, so giving it full width keeps the
   call-out readable on wide screens. #}
<div class="row g-3 mb-3">
<div class="col-12">
<div class="card h-100" id="catalog-source">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-collection me-1"></i>Catalog
    </div>
    <div class="card-body">
        <p class="small text-muted mb-3">
            The single URL that the <em>Fetch catalog</em> button
            on the <a href="/ui/images">Images</a> page GETs. Bytes
            at that URL must parse as a <code>catalog.toml</code>;
            the rows are imported into the local catalog table.
            To point at a fork or a private catalog server, just
            edit the URL.
        </p>
        <div class="border-start border-info border-3 ps-3 small mb-3" role="note">
            <p class="mb-1">
                <strong>The default URL is
                <code>/releases/latest/download/catalog.toml</code></strong>
                -- a fresh fetch picks up whatever nosi release is
                current. Byte-stability across operators is provided
                by withcache (since v0.59.0): once cached, every
                fetch resolves to the same bytes until an operator
                evicts the cache entries. Two options if you want
                something else:
            </p>
            <ul class="mb-0 mt-1">
                <li><strong>Pin to a specific week.</strong> Browse
                    <a href="https://github.com/safl/nosi/releases"
                       target="_blank" rel="noopener">safl/nosi releases</a>,
                    pick a tag (e.g. <code>2026.W26</code>), paste
                    <code>/releases/download/&lt;tag&gt;/catalog.toml</code>.
                    Useful for production deploys where rolling under
                    your feet would surprise.</li>
                <li><strong>Rolling oras :latest refs.</strong>
                    Use <code>/releases/latest/download/catalog-latest.toml</code>
                    (or <code>/releases/download/&lt;tag&gt;/catalog-latest.toml</code>);
                    image refs are <code>:latest</code> so bty flashes
                    whatever ghcr currently serves, every flash.</li>
            </ul>
        </div>
        <div class="mb-3">
            <label for="catalog_url" class="form-label">Catalog URL</label>
            <input type="url" class="form-control font-monospace" id="catalog_url"
                   name="catalog_url" placeholder="{{ upstream.catalog_url_default }}"
                   value="{{ upstream.catalog_url_override or '' }}"
                   form="upstream-form">
            <div class="form-text small">
                Effective:
                <code>{{ upstream.catalog_url }}</code>{% if not upstream.catalog_url_override %}
                (default; leave blank to keep){% endif %}.
            </div>
        </div>
        <button type="submit" class="btn btn-primary" form="upstream-form">
            <i class="bi bi-save me-1"></i>Save
        </button>
        <span class="form-text small ms-2">Clear to revert.</span>
    </div>
</div>
</div>{# /col catalog-source #}
</div>{# /row catalog #}

{# Row 2: Netboot release + Backup schedule side-by-side. #}
<div class="row g-3 mb-3">
<div class="col-md-6">
<div class="card h-100" id="netboot-release">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-hdd-network me-1"></i>Netboot release
    </div>
    <div class="card-body">
        <p class="small text-muted mb-3">
            The GitHub release that the <em>Fetch artifacts</em>
            button on the <a href="/ui/netboot">Netboot</a> page pulls
            <code>vmlinuz</code>, <code>initrd</code>, and
            <code>squashfs</code> from. Repo + tag are independent so
            an operator can pin netboot to a known-good release while
            the catalog rolls forward.
        </p>
        <div class="mb-3">
            <label for="netboot_repo" class="form-label">Netboot repo</label>
            <input type="text" class="form-control font-monospace" id="netboot_repo"
                   name="netboot_repo" placeholder="{{ upstream.netboot_repo_default }}"
                   value="{{ upstream.netboot_repo_override or '' }}"
                   form="upstream-form">
            <div class="form-text small">
                GitHub <code>owner/repo</code>. Effective:
                <code>{{ upstream.netboot_repo }}</code>{% if not upstream.netboot_repo_override %}
                (default; leave blank to keep){% endif %}.
            </div>
        </div>
        <div class="mb-3">
            <label for="netboot_tag" class="form-label">Netboot release tag</label>
            <input type="text" class="form-control font-monospace" id="netboot_tag"
                   name="netboot_tag" placeholder="{{ upstream.netboot_tag_default }}"
                   value="{{ upstream.netboot_tag_override or '' }}"
                   form="upstream-form">
            <div class="form-text small">
                <code>latest</code> or a tag like <code>v0.23.0</code>.
                Effective:
                <code>{{ upstream.netboot_tag }}</code>{% if not upstream.netboot_tag_override %}
                (default; leave blank to keep){% endif %}.
            </div>
        </div>
        <button type="submit" class="btn btn-primary" form="upstream-form">
            <i class="bi bi-save me-1"></i>Save
        </button>
        <span class="form-text small ms-2">Clear a field to revert.</span>
    </div>
</div>
</div>{# /col netboot-release #}

<div class="col-md-6">
{# Editable: scheduled backup knobs. ``enabled`` + ``cadence`` +
   ``retention`` persist in the settings table; the scheduler loop
   reads them on every tick so a change here propagates within one
   tick (60s) without restart. The on-disk destination is read-only
   here (set via ``[paths] backup_dir`` in bty.toml or
   ``BTY_PATHS_BACKUP_DIR``). #}
<div class="card h-100" id="backup-schedule">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-shield-check me-1"></i>Backup schedule
    </div>
    <div class="card-body">
        <form method="post" action="/ui/settings/backup">
            {# Always-relevant block: retention applies on every successful
               backup (manual or scheduled), and destination + last-run are
               useful regardless of whether the scheduler is enabled. The
               schedule (enable + cadence) is the optional layer below the
               <hr> -- it only matters if the operator wants bty to fire
               backups on its own. #}
            <div class="mb-3">
                <label for="backup_retention_count" class="form-label">Retention</label>
                <input type="number" class="form-control" id="backup_retention_count"
                       name="backup_retention_count" min="1" max="999"
                       value="{{ backup_retention_count }}" style="max-width: 8rem;">
                <div class="form-text small">
                    Keep the N most recent backups under
                    <code>{{ backups_root }}</code>. Older directories are deleted
                    after every successful run -- manual or scheduled. Set to 1 to
                    keep only the latest.
                </div>
            </div>
            <div class="mb-3 small">
                <strong>Destination:</strong> <code>{{ backups_root }}</code>
                {% if backup_last_run_at %}
                <br><strong>Last scheduled run:</strong>
                <code>{{ backup_last_run_at }}</code>
                {% else %}
                <br><strong>Last scheduled run:</strong>
                <span class="text-muted">never</span>
                {% endif %}
            </div>
            <hr class="my-4">
            <div class="form-check form-switch mb-3">
                <input type="checkbox" class="form-check-input" id="backup_enabled"
                       name="backup_enabled" {% if backup_enabled %}checked{% endif %}>
                <label class="form-check-label" for="backup_enabled">
                    Enable scheduled backups
                </label>
                <div class="form-text small">
                    Off: bty never runs a backup on its own; operator triggers each
                    one via "Back up now" on
                    <a href="/ui/backups">Backups</a>. On: the scheduler
                    enqueues a backup whenever the cadence is due.
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label">Cadence</label>
                {% for c in backup_cadences %}
                <div class="form-check">
                    <input type="radio" class="form-check-input"
                           id="backup_cadence_{{ c }}" name="backup_cadence" value="{{ c }}"
                           {% if backup_cadence == c %}checked{% endif %}>
                    <label class="form-check-label" for="backup_cadence_{{ c }}">
                        {{ c }}
                        {% if c == "daily" %}<span class="text-muted small">(every 24h since the last scheduled run)</span>
                        {% elif c == "weekly" %}<span class="text-muted small">(every 7d since the last scheduled run)</span>
                        {% elif c == "manual" %}<span class="text-muted small">(scheduler quiescent; operator triggers each backup)</span>
                        {% endif %}
                    </label>
                </div>
                {% endfor %}
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-save me-1"></i>Save backup schedule
            </button>
        </form>
    </div>
</div>
</div>{# /col backup-schedule #}
</div>{# /row netboot + backup #}

{# Display card: timezone the UI uses to render every operator-facing
   timestamp. bty stores in UTC; an empty value defaults to UTC. A
   bad IANA name redirects back with an error rather than persisting
   a broken value. #}
<div class="row g-3 mb-3">
<div class="col-12">
<div class="card h-100" id="display">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-clock me-1"></i>Display
    </div>
    <div class="card-body">
        <form method="post" action="/ui/settings/display">
            <div class="mb-3">
                <label for="display_timezone" class="form-label">Timezone</label>
                <input type="text" class="form-control font-monospace" id="display_timezone"
                       name="display_timezone"
                       placeholder="UTC"
                       value="{{ display_timezone_override or '' }}"
                       style="max-width: 24rem;">
                <div class="form-text small">
                    IANA zone name (e.g. <code>Europe/Copenhagen</code>,
                    <code>America/New_York</code>, <code>UTC</code>). All
                    operator-facing timestamps in bty-web are converted from
                    UTC (the storage standard) to this zone before display.
                    Empty = revert to UTC. The change takes effect on the
                    next page render; no restart needed.
                    {% if display_timezone_override %}
                    Currently effective:
                    <code>{{ display_timezone_effective }}</code>.
                    {% else %}
                    Currently effective:
                    <code>{{ display_timezone_effective }}</code>
                    <span class="text-muted">(default)</span>.
                    {% endif %}
                </div>
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-save me-1"></i>Save display
            </button>
        </form>
    </div>
</div>
</div>
</div>{# /row display #}

{# Four-up row of the config groups (Identity / Storage / Network /
   Background workers). Each card uses a compact list-group layout
   instead of the wide 4-column table the single-column form had:
   at col-lg-3 each card is too narrow for a table-with-source-and-
   env column set, so the source badge sits inline with the value
   and the env-var name renders as a small muted line below. On
   medium screens cards stack 2-up; on phones 1-up.

   rows that map to a Config field carry an inline edit
   form (POST -> /ui/settings/config/edit -> save_value to the
   primary bty.toml). Env-overridden rows render the input as
   disabled with a hint -- the TOML write wouldn't take effect
   until the env is unset. Pure-display rows (e.g. "bty version")
   keep the read-only shape. #}
<div class="row g-3 mb-3">
{% for group in config_groups %}
<div class="col-md-6 col-lg-4">
<div class="card h-100" id="settings-{{ group.title|lower|replace(' ', '-') }}">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-{{ group.icon }} me-1"></i>{{ group.title }}
    </div>
    <ul class="list-group list-group-flush small">
        {% for r in group.rows %}
        <li class="list-group-item">
            <div class="d-flex justify-content-between align-items-start gap-2">
                <span class="text-muted">{{ r.label }}</span>
                {% if r.source == "env" %}
                <span class="badge bg-primary"
                      title="overridden by environment variable: {{ r.source_detail }}">env</span>
                {% elif r.source == "toml" %}
                <span class="badge bg-success"
                      title="set via bty.toml: {{ r.source_detail }}">toml</span>
                {% else %}
                <span class="badge bg-light text-dark border"
                      title="built-in default: {{ r.default }}">default</span>
                {% endif %}
            </div>
            {% if r.env %}
            <div class="small"><code class="text-muted">{{ r.env }}</code></div>
            {% endif %}
            {% if r.editable %}
            <form method="post" action="/ui/settings/config/edit"
                  class="d-flex gap-1 mt-1 align-items-center">
                <input type="hidden" name="section" value="{{ r.section }}">
                <input type="hidden" name="key" value="{{ r.key }}">
                <input type="text" name="value" value="{{ r.value }}"
                       class="form-control form-control-sm font-monospace"
                       style="min-width: 0;"
                       title="Edit {{ r.section }}.{{ r.key }} -- blank clears the override">
                <button type="submit" class="btn btn-sm btn-primary text-nowrap"
                        title="Save to {{ config_primary_toml or '(no bty.toml configured)' }}">
                    <i class="bi bi-save"></i>
                </button>
            </form>
            {% elif r.source == "env" %}
            {# Env-overridden: show the current value as a disabled
               input + a hint that the env wins. #}
            <input type="text" value="{{ r.value }}" disabled
                   class="form-control form-control-sm font-monospace mt-1"
                   title="Environment override active: {{ r.source_detail }}. Unset the env var to let bty.toml take effect.">
            {% else %}
            {# Pure-display row (e.g. bty version). #}
            <div class="text-break"><code class="small">{{ r.value }}</code></div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
</div>
</div>
{% endfor %}
</div>{# /row config_groups #}

{# Source-of-truth banner: when the operator opens Settings and
   nothing is configured at the bty.toml layer (or none of the
   candidate paths are writable), surface that clearly -- editing
   below either no-ops or has nowhere to land. #}
{% if not config_primary_toml %}
<div class="alert alert-warning small mb-3">
    <i class="bi bi-exclamation-triangle me-1"></i>
    No writable <code>bty.toml</code> in the config search path.
    Settings edits below have nowhere to persist. Set
    <code>$BTY_CONFIG_FILE</code> to a writable path or create
    <code>&lt;state_dir&gt;/bty.toml</code>.
</div>
{% endif %}

{# Router-side cheatsheet (moved here from the Netboot page). The bits
   the operator pastes into UniFi / pfSense / dnsmasq DHCP config to
   point PXE clients at this host. Reference-only; no editable
   fields -- bty doesn't run DHCP, the LAN router does. #}
<div class="card mb-4" id="dhcp-pxe">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-hdd-network me-1"></i>DHCP / Network boot
    </div>
    <div class="card-body">
        <p class="text-muted">
            Targets can net-boot two ways: <strong>PXE</strong> (legacy
            + UEFI, iPXE fetched over TFTP) and <strong>UEFI HTTP
            Boot</strong> (iPXE fetched over HTTP, no TFTP). bty serves
            the boot artifacts and per-MAC iPXE scripts over HTTP; TFTP
            is served by the tftp sidecar (container deploy) or a
            co-located dnsmasq (host install). The DHCP side stays with
            your LAN's router (or DHCP server); bty deliberately doesn't
            try to replace it. Point your router at this host with the
            settings below.
        </p>

        {% if missing_netboot_artifacts %}
        <div class="alert alert-warning d-flex justify-content-between align-items-start">
            <div>
                <i class="bi bi-exclamation-triangle-fill me-1"></i>
                <strong>Netboot environment incomplete.</strong>
                Missing under <code>{{ boot_root }}</code>:
                {% for name in missing_netboot_artifacts %}
                <code>{{ name }}</code>{% if not loop.last %}, {% endif %}
                {% endfor %}.
                PXE clients will chain into iPXE but get 404 on the
                kernel fetch until these files are present.
            </div>
            <a href="/ui/netboot" class="btn btn-sm btn-primary ms-3 flex-shrink-0 text-nowrap">
                <i class="bi bi-cloud-download me-1"></i>Fetch artifacts
            </a>
        </div>
        {% endif %}

        <h3 class="h6 mt-3">This host</h3>
        <table class="table table-striped table-sm mb-3">
            <thead class="table-light">
                <tr>
                    <th scope="col">Interface</th>
                    <th scope="col">State</th>
                    <th scope="col">IPv4</th>
                </tr>
            </thead>
            <tbody>
                {% for iface in interfaces %}
                <tr>
                    <td><code>{{ iface.name }}</code></td>
                    <td>{{ iface.operstate }}</td>
                    <td>
                        {% if iface.ipv4 %}
                        <code>{{ iface.ipv4 }}/{{ iface.prefix }}</code>
                        {% else %}
                        <span class="text-muted">(no address)</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="3" class="text-muted">(no interfaces detected)</td></tr>
                {% endfor %}
            </tbody>
        </table>

        <h3 class="h6 mt-4">Router-side configuration</h3>
        <p class="text-muted">
            Configure your LAN's DHCP server to tag PXE clients with
            the options below. For UniFi: <em>Settings &rarr; Networks
            &rarr; [your LAN] &rarr; Advanced &rarr; DHCP &rarr; Network
            Boot</em>. For pfSense / OpenWRT / dnsmasq: equivalent
            options on the DHCP service.
        </p>

        {# Shorthand for "this host's IP", reused across both tables.
           Prefer the configured advertised host (withcache URL host),
           falling back to the sniffed primary interface. #}
        {% set bty_ip = suggested_host if suggested_host else (primary.ipv4 if primary and primary.ipv4 else "<bty-host>") %}

        <h4 class="h6 mt-3 fw-semibold">Option A &mdash; PXE (via TFTP)</h4>
        <p class="text-muted small mb-2">
            Legacy BIOS and UEFI PXE. The firmware TFTPs the iPXE binary
            from this host, then iPXE chains on over HTTP.
        </p>
        <table class="table table-striped table-sm">
            <thead class="table-light">
                <tr>
                    <th scope="col">Option</th>
                    <th scope="col">Value</th>
                    <th scope="col">Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>option 60</code></td>
                    <td><code>PXEClient</code></td>
                    <td>Vendor-class echo. Strict UEFI firmware filters offers without it.</td>
                </tr>
                <tr>
                    <td><code>option 66</code> / Next-Server</td>
                    <td><code>{{ bty_ip }}</code></td>
                    <td>The TFTP server. Same box as bty-web.</td>
                </tr>
                <tr>
                    <td><code>option 67</code> / Boot-Filename</td>
                    <td><code>ipxe.efi</code></td>
                    <td>For UEFI PXEClient (arch 6/7/9). Use <code>undionly.kpxe</code> for legacy BIOS (arch 0).</td>
                </tr>
                <tr>
                    <td><code>option 67</code> for <code>user-class=iPXE</code></td>
                    <td><code>http://{{ bty_ip }}:8080/pxe-bootstrap.ipxe</code></td>
                    <td>Stops iPXE chain-loop. Different bootfile when iPXE re-DHCPs.</td>
                </tr>
            </tbody>
        </table>

        <h4 class="h6 mt-4 fw-semibold">Option B &mdash; UEFI HTTP Boot (no TFTP)</h4>
        <p class="text-muted small mb-2">
            For firmware with UEFI HTTP Boot, the target fetches iPXE
            directly over HTTP &mdash; no TFTP server in the path. Tag
            HTTP-Boot clients (vendor-class <code>HTTPClient</code>) with
            these instead of the PXE options above. Everything after iPXE
            loads is identical to the PXE flow.
        </p>
        <table class="table table-striped table-sm">
            <thead class="table-light">
                <tr>
                    <th scope="col">Option</th>
                    <th scope="col">Value</th>
                    <th scope="col">Notes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>option 60</code></td>
                    <td><code>HTTPClient</code></td>
                    <td>Vendor-class echo. UEFI HTTP-Boot firmware filters offers without it (the HTTP-Boot counterpart of <code>PXEClient</code>).</td>
                </tr>
                <tr>
                    <td><code>option 66</code> / Next-Server</td>
                    <td><code>{{ bty_ip }}</code></td>
                    <td><strong>Still required.</strong> bty's iPXE binary chains on to <code>http://&lt;next-server&gt;:8080/pxe-bootstrap.ipxe</code>, so this must point here even though the bootfile below is a full URL.</td>
                </tr>
                <tr>
                    <td><code>option 67</code> / Boot-Filename</td>
                    <td><code>http://{{ bty_ip }}:8080/boot/ipxe.efi</code></td>
                    <td>Full URL. The firmware HTTP-downloads iPXE directly &mdash; no TFTP roundtrip.</td>
                </tr>
            </tbody>
        </table>
        <p class="form-text mt-2 mb-0">
            Both paths converge: once iPXE is running it fetches
            <code>http://{{ bty_ip }}:8080/pxe-bootstrap.ipxe</code> and
            then the per-MAC plan at <code>/pxe/&lt;mac&gt;</code>. The
            only differences are the vendor class and how the iPXE binary
            is delivered (TFTP vs HTTP).
        </p>
    </div>
</div>

{% endblock %}