{% extends "base.html" %} {% block title %}Settings · OpenBrowse{% endblock %}
{% block head %}
<style>
  .settings-wrap {
    max-width: 680px;
    margin: 0 auto;
  }
  .settings-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    padding: 22px 22px 18px;
    margin-bottom: 16px;
  }
  .group-title {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
  }
  .env-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: center;
    padding: 7px 0;
  }
  .env-key {
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 12px;
    color: #9ca3af;
  }
  .env-key .unset {
    color: #fbbf24;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 11px;
    margin-left: 6px;
  }
  .env-key .default-chip {
    color: #666;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10px;
    padding: 1px 7px;
    margin-left: 6px;
  }
  .env-value-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }
  .env-row input[name="value"] {
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #e5e5e5;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 12px;
    padding: 8px 10px;
    width: 100%;
  }
  .env-value-wrap.has-reveal input[name="value"] {
    padding-right: 36px;
  }
  .env-row input:focus {
    outline: none;
    border-color: #60a5fa;
  }
  .reveal-btn {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
  }
  .reveal-btn:hover {
    color: #e5e5e5;
  }
  .reveal-btn svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .reveal-btn .eye-off {
    display: none;
  }
  .reveal-btn.revealed .eye {
    display: none;
  }
  .reveal-btn.revealed .eye-off {
    display: inline;
  }
  .settings-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
  }
  .settings-note {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
  }
  .save-btn {
    background: #60a5fa;
    color: #0a0a0a;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 22px;
    cursor: pointer;
  }
  .save-btn:hover {
    background: #7db8fb;
  }
  .save-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .save-btn:disabled:hover {
    background: #60a5fa;
  }
  .btn-ghost {
    background: transparent;
    color: #888;
    border: 1px solid #333;
    border-radius: 8px;
    font: inherit;
    font-weight: 500;
    font-size: 12.5px;
    padding: 8px 16px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .btn-ghost:hover {
    color: #e5e5e5;
    border-color: #444;
  }
  .restart-note {
    border-left: 2px solid #f59e0b;
    padding-left: 10px;
  }
  .failed-banner {
    background: #201012;
    border: 1px solid #4a1d1d;
    color: #f87171;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  /* ---------- software update ---------- */
  .update-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .update-body {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.6;
  }
  .update-body strong {
    color: #cbd5e1;
  }
  .update-tail {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .update-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #666;
  }
  .update-status:empty {
    display: none;
  }
  .update-status .ob-spin i {
    background: currentColor;
  }
  .update-status.is-ok {
    color: #34d399;
  }
  .update-status.is-avail {
    color: #fbbf24;
  }
  .update-status.is-bad {
    color: #f87171;
  }
  .update-avail-box {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: 8px;
  }
  .update-avail-box.is-shown {
    display: flex;
  }
  .update-avail-box .update-body {
    color: #fbbf24;
  }

  /* ---------- performance: every control shares the env-row grid ---------- */
  .perf-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
  }
  .perf-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
  }
  .detected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .detected-chips span {
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 11.5px;
    color: #cbd5e1;
    background: #1a1a1a;
    border-radius: 999px;
    padding: 4px 11px;
  }
  .perf-control {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .perf-control input[type="number"] {
    width: 84px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #e5e5e5;
    font-family: "SF Mono", "Menlo", monospace;
    font-size: 12px;
    padding: 8px 10px;
  }
  .perf-control input[type="number"]:focus {
    outline: none;
    border-color: #60a5fa;
  }
  .perf-hint {
    font-size: 11.5px;
    color: #666;
  }
  .perf-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #60a5fa;
    flex: none;
    cursor: pointer;
  }
</style>
{% endblock %} {% block content %}
<div class="settings-wrap">
  <h1>Settings</h1>
  {% if restart_failed %}
  <div class="failed-banner">
    The settings were saved to .env, but the server does not appear to have
    restarted, so the old configuration is still running. Restart it manually
    to apply the changes.
  </div>
  {% endif %}
  {% if active_sessions %}
  <div class="failed-banner">
    Not saved: {{ active_sessions }} session{{ "s" if active_sessions != 1 else "" }}
    currently running would be killed by the restart. Wait for
    {{ "them" if active_sessions != 1 else "it" }} to finish, or tick
    "restart anyway" below to save and restart regardless.
  </div>
  {% endif %}
  {% if update_failed %}
  <div class="failed-banner">
    <strong>Update failed.</strong> The running version is unchanged.
    {% if update and update.install_log %}
    <pre style="margin:8px 0 0;white-space:pre-wrap;font-size:12px;color:inherit;">{{ update.install_log }}</pre>
    {% endif %}
  </div>
  {% endif %}
  {% if update_busy %}
  <div class="failed-banner">
    Not updated: sessions are currently running and the update would restart the
    server underneath them. Wait for them to finish, then try again.
  </div>
  {% endif %}

  <div class="settings-card" id="update-card">
    <div class="group-title">Software update</div>
    <div class="update-row">
      <div class="update-body">Installed: <strong>v{{ version }}</strong></div>
      <div class="update-tail">
        <span class="update-status{% if update and update.available %} is-avail{% elif update and update.latest %} is-ok{% endif %}" id="update-status"
          >{% if update and update.available %}v{{ update.latest }} is available.{% elif update and update.latest %}You&rsquo;re on the latest version.{% endif %}</span
        >
        <button type="button" class="btn-ghost" id="update-check-btn">Check now</button>
      </div>
    </div>
    <div class="update-avail-box{% if update and update.available and update_supported %} is-shown{% endif %}" id="update-avail-box">
      <div class="update-body">
        <strong id="update-avail-version">{% if update and update.latest %}v{{ update.latest }}{% endif %}</strong>
        is ready to install. Installing restarts the server, which interrupts running sessions.
      </div>
      <form method="post" action="/settings/update" style="margin: 0"
            onsubmit="return confirm('Install the update and restart the server?')">
        <button class="save-btn" type="submit" style="white-space: nowrap">Install and restart</button>
      </form>
    </div>
    {% if update and update.available and not update_supported %}
    <p class="settings-note" style="margin-top: 10px">
      This copy was installed in a way OpenBrowse cannot upgrade itself
      ({{ update_method }}). Upgrade it manually, then restart the service.
    </p>
    {% endif %}
  </div>

  <form id="settings-form" method="post" action="/settings">
    <div class="settings-card" id="performance-card">
      <div class="group-title">Performance</div>
      {% if hw_complete %}
      <div class="perf-row">
        <span class="perf-label">Detected</span>
        <span class="detected-chips">
          {% for part in hw_summary.split(" · ") %}<span>{{ part }}</span>{% endfor %}
        </span>
      </div>
      {% endif %}
      <div class="perf-row">
        <span class="perf-label">Concurrent sessions</span>
        <span class="perf-control">
          <input type="hidden" name="key" value="MAX_CONCURRENT_SESSIONS" />
          <input
            type="number"
            name="value"
            id="mcs-input"
            min="1"
            step="1"
            value="{{ hw_current }}"
            inputmode="numeric"
          />
          {% if hw_suggested_max %}<span class="perf-hint">Maximum concurrency suggested for this machine: {{ hw_suggested_max }}</span>{% endif %}
        </span>
      </div>
      <label class="perf-row" style="cursor: pointer">
        <span class="perf-label">Lighter browser</span>
        <span class="perf-control">
          <input type="checkbox" id="light-toggle" {% if hw_light_on %}checked{% endif %} />
          <input type="hidden" name="key" value="CHROME_LIGHT_FLAGS" />
          <input type="hidden" name="value" id="light-value" value="{{ '1' if hw_light_on else '' }}" />
          <span class="perf-hint">No GPU process, capped memory. Best for small machines.</span>
        </span>
      </label>
    </div>

    {% for group in groups %}
    <div class="settings-card">
      <div class="group-title">{{ group.title }}</div>
      {% for row in group.rows %}
      <div class="env-row">
        <span class="env-key">{{ row.key }}{% if not row.present %}{% if row.default %}<span class="default-chip">default</span>{% else %}<span class="unset">not set</span>{% endif %}{% endif %}</span>
        <span class="env-value-wrap{% if row.secret %} has-reveal{% endif %}">
          <input type="hidden" name="key" value="{{ row.key }}" />
          <input
            type="{{ 'password' if row.secret else 'text' }}"
            name="value"
            value="{{ row.value }}"
            {% if row.default and not row.present %}placeholder="{{ row.default }}"{% endif %}
            autocomplete="off"
            spellcheck="false"
          />
          {% if row.secret %}
          <button type="button" class="reveal-btn" title="Show value" aria-label="Show value">
            <svg class="eye" viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            <svg class="eye-off" viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><path d="M14.12 14.12A3 3 0 1 1 9.88 9.88"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
          </button>
          {% endif %}
        </span>
      </div>
      {% endfor %}
    </div>
    {% endfor %}
    <div class="settings-actions">
      <span class="settings-note restart-note">
        Values are written to .env; clearing a value removes the variable.
        Saving restarts the server, which interrupts any sessions currently running.
      </span>
      {% if active_sessions %}
      <label class="settings-note" style="white-space: nowrap">
        <input type="checkbox" name="force" value="1" /> restart anyway
      </label>
      {% endif %}
      <button class="save-btn" type="submit" {% if not active_sessions %}disabled{% endif %}>Save and restart</button>
    </div>
  </form>
</div>
<script>
  document.querySelectorAll(".reveal-btn").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var input = btn.parentElement.querySelector("input[name=value]");
      var show = input.type === "password";
      input.type = show ? "text" : "password";
      btn.classList.toggle("revealed", show);
      btn.title = show ? "Hide value" : "Show value";
    });
  });
  (function () {
    var form = document.getElementById("settings-form");
    var save = form.querySelector(".save-btn");
    function dirty() {
      return Array.prototype.some.call(
        form.querySelectorAll("input[name=value]"),
        function (i) {
          return i.value !== i.defaultValue;
        }
      );
    }
    form.addEventListener("input", function () {
      save.disabled = !dirty();
    });
  })();
  (function () {
    var toggle = document.getElementById("light-toggle");
    if (!toggle) return;
    var hidden = document.getElementById("light-value");
    toggle.addEventListener("change", function () {
      hidden.value = toggle.checked ? "1" : "";
      hidden.dispatchEvent(new Event("input", { bubbles: true }));
    });
  })();
  (function () {
    var btn = document.getElementById("update-check-btn");
    var status = document.getElementById("update-status");
    var availBox = document.getElementById("update-avail-box");
    var availVersion = document.getElementById("update-avail-version");
    function spinnerHtml() {
      var blades = "";
      for (var i = 0; i < 8; i++) {
        blades +=
          '<i style="transform:rotate(' + i * 45 + 'deg);animation-delay:' + -(7 - i) * 100 + 'ms"></i>';
      }
      return '<span class="ob-spin">' + blades + "</span>";
    }
    btn.addEventListener("click", function () {
      btn.disabled = true;
      status.className = "update-status";
      status.innerHTML = spinnerHtml() + " Checking for updates…";
      fetch("/settings/update/check", { method: "POST", credentials: "same-origin" })
        .then(function (r) {
          if (!r.ok) throw new Error("http " + r.status);
          return r.json();
        })
        .then(function (res) {
          btn.disabled = false;
          if (res.available && res.latest) {
            status.className = "update-status is-avail";
            status.textContent = "v" + res.latest + " is available";
            if (res.supported) {
              availVersion.textContent = "v" + res.latest;
              availBox.classList.add("is-shown");
            }
          } else if (res.error) {
            status.className = "update-status is-bad";
            status.textContent = "The check failed: " + res.error;
          } else {
            status.className = "update-status is-ok";
            status.textContent = "You’re on the latest version.";
            availBox.classList.remove("is-shown");
          }
        })
        .catch(function (err) {
          btn.disabled = false;
          status.className = "update-status is-bad";
          status.textContent = "Could not reach the server to check (" + err.message + ").";
        });
    });
  })();
</script>
{% endblock %}