{% extends "layout.html" %}
{% from "_partials/page_description.html" import page_description %}
{% block title %}Settings - pixie{% endblock %}
{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#display">Display</a>
            <a href="#deployment">Deployment</a>
        </span>
    </div>
</nav>
{% endblock %}
{% block content %}
{{ page_description('sliders', 'Operator-editable knobs that pixie persists across restarts, alongside the environment variables the deploy consumes at startup. UI edits below win over env-var defaults, so tuning a knob live in the browser does not need a redeploy. Env-var defaults are documented in the Deployment card at the bottom.') }}
{% if flash_error %}
<div class="alert alert-danger">
    <i class="bi bi-exclamation-triangle me-1"></i>{{ flash_error }}
</div>
{% endif %}

<div class="card shadow-sm mb-4" id="display">
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
        <span class="text-nowrap"><i class="bi bi-clock me-1"></i>Display</span>
        <span class="text-muted small">
            timezone + strftime pattern for every operator-facing timestamp
        </span>
    </div>
    <div class="card-body">
        <form method="post" action="/ui/settings/display/edit" class="row g-3">
            <div class="col-md-6">
                <label for="timezone" class="form-label">
                    Display timezone
                    <span class="badge text-bg-{% if display_tz.override %}primary{% else %}secondary{% endif %} ms-1">
                        {% if display_tz.override %}override{% elif display_tz.effective != display_tz.default %}env{% else %}default{% endif %}
                    </span>
                </label>
                <input type="text" id="timezone" name="timezone"
                       class="form-control font-monospace"
                       value="{{ display_tz.override }}"
                       placeholder="{{ display_tz.default }}"
                       list="tz-suggestions">
                <datalist id="tz-suggestions">
                    <option value="UTC">
                    <option value="Europe/Copenhagen">
                    <option value="Europe/London">
                    <option value="Europe/Berlin">
                    <option value="America/New_York">
                    <option value="America/Los_Angeles">
                    <option value="Asia/Tokyo">
                </datalist>
                <div class="form-text">
                    IANA timezone name. Blank falls back to
                    <code>{{ display_tz.env }}</code> then <code>{{ display_tz.default }}</code>.
                    Currently effective: <code>{{ display_tz.effective }}</code>.
                    {% if display_tz.updated_at %}
                    <br>Last updated: <code>{{ display_tz.updated_at | fmt_ts }}</code>.
                    {% endif %}
                </div>
            </div>
            <div class="col-md-6">
                <label for="datetime_format" class="form-label">
                    Datetime format
                    <span class="badge text-bg-{% if datetime_format.override %}primary{% else %}secondary{% endif %} ms-1">
                        {% if datetime_format.override %}override{% elif datetime_format.effective != datetime_format.default %}env{% else %}default{% endif %}
                    </span>
                </label>
                <input type="text" id="datetime_format" name="datetime_format"
                       class="form-control font-monospace"
                       value="{{ datetime_format.override }}"
                       placeholder="{{ datetime_format.default }}">
                <div class="form-text">
                    Python <code>strftime</code> pattern (e.g.
                    <code>%Y-%m-%d %H:%M:%S %Z</code>,
                    <code>%d %b %Y %H:%M</code>). Blank falls back to
                    <code>{{ datetime_format.env }}</code> then the default.
                    Currently effective: <code>{{ datetime_format.effective }}</code>.
                    {% if datetime_format.updated_at %}
                    <br>Last updated: <code>{{ datetime_format.updated_at | fmt_ts }}</code>.
                    {% endif %}
                </div>
            </div>
            <div class="col-12">
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check2 me-1"></i>Save
                </button>
                <span class="text-muted small ms-2">
                    Blank fields CLEAR the override. Env / default takes over.
                </span>
            </div>
        </form>
    </div>
</div>

<div class="card shadow-sm mb-4" id="deployment">
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
        <span class="text-nowrap"><i class="bi bi-gear-wide-connected me-1"></i>Deployment</span>
        <span class="text-muted small">
            environment variables consumed at startup + DHCP handoff
        </span>
    </div>
    <div class="card-body">
        <p class="text-muted small">
            Environment variables the pixie process reads at startup.
            The compose file bundled by <code>pixie deploy</code> sets
            the important ones from <code>envvars</code>; anything not
            set falls back to the default in the table. Changes here
            require a container restart (they are read once at
            startup), unlike the UI knobs above which are live.
        </p>

        <div class="table-responsive">
            <table class="table table-sm mb-0 align-middle">
                <thead>
                    <tr>
                        <th scope="col">Variable</th>
                        <th scope="col">Default</th>
                        <th scope="col">Purpose</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in deployment_envvars %}
                    <tr>
                        <td><code>{{ row.name }}</code></td>
                        <td>
                            {% if row.default %}<code>{{ row.default }}</code>
                            {% else %}<em class="text-muted small">(none)</em>{% endif %}
                        </td>
                        <td class="small">{{ row.purpose }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <h3 class="h6 fw-semibold mt-4 mb-2">
            <i class="bi bi-router me-1"></i>Pointing DHCP at pixie
        </h3>
        <p class="small mb-2">
            Pixie chainloads iPXE via TFTP: the DHCP server tells the
            target's PXE firmware where to fetch the iPXE bootloader,
            and iPXE then chains to pixie's HTTP endpoint. The two
            options below cover the common firmware split:
        </p>
        <div class="row g-3">
            <div class="col-md-6">
                <div class="border rounded p-3 h-100 bg-body-tertiary">
                    <div class="fw-semibold mb-1">
                        <i class="bi bi-hdd-network me-1"></i>Legacy BIOS / PXE
                    </div>
                    <div class="small text-muted mb-2">
                        Target boots via PXE ROM. DHCP hands out an
                        iPXE binary that pixie serves over TFTP;
                        iPXE re-DHCPs and pixie sees the second
                        request come in from an iPXE user-class
                        + chains to <code>/pxe-bootstrap.ipxe</code>.
                    </div>
                    <pre class="mb-0 small"><code># dnsmasq
dhcp-boot=tag:!ipxe,undionly.kpxe,{{ deployment.host }},{{ deployment.host }}
dhcp-userclass=set:ipxe,iPXE
dhcp-boot=tag:ipxe,http://{{ deployment.host }}:{{ deployment.port }}/pxe-bootstrap.ipxe</code></pre>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded p-3 h-100 bg-body-tertiary">
                    <div class="fw-semibold mb-1">
                        <i class="bi bi-hdd-network-fill me-1"></i>UEFI
                    </div>
                    <div class="small text-muted mb-2">
                        Target boots via UEFI PXE. Same shape but
                        the DHCP hand-off must serve an EFI iPXE
                        binary. Same iPXE user-class re-DHCP dance
                        lands on <code>/pxe-bootstrap.ipxe</code>.
                    </div>
                    <pre class="mb-0 small"><code># dnsmasq
dhcp-boot=tag:!ipxe,ipxe.efi,{{ deployment.host }},{{ deployment.host }}
dhcp-userclass=set:ipxe,iPXE
dhcp-boot=tag:ipxe,http://{{ deployment.host }}:{{ deployment.port }}/pxe-bootstrap.ipxe</code></pre>
                </div>
            </div>
        </div>

        <div class="mt-3 small text-muted">
            <div>
                <span class="fw-semibold">TFTP listen:</span>
                {% if deployment.tftp_enabled %}
                <code>{{ deployment.tftp_bind }}:{{ deployment.tftp_port }}/udp</code>
                (root <code>{{ deployment.tftp_root }}</code>)
                {% else %}
                <em>disabled</em> (set <code>PIXIE_TFTP_ENABLED=1</code>
                to bind udp/69)
                {% endif %}
            </div>
            <div>
                <span class="fw-semibold">Bootstrap URL:</span>
                <code>http://{{ deployment.host }}:{{ deployment.port }}/pxe-bootstrap.ipxe</code>
            </div>
            <div>
                <span class="fw-semibold">NBD listen:</span>
                <code>{{ deployment.nbd_bind }}</code> from port
                <code>{{ deployment.nbd_port_base }}</code> upward
                (one export per bound nbdboot image)
            </div>
        </div>
    </div>
</div>
{% endblock %}