{% extends "_base.html" %}
{% from "_macros.html" import tabs %}

{% block title %}Settings · {{ project.name | humanize }} · Urika{% endblock %}
{% block heading %}Settings{% endblock %}

{% block breadcrumb %}
  <nav class="breadcrumb">
    <a href="/projects">Projects</a>
    <span class="breadcrumb-separator">/</span>
    <a href="/projects/{{ project.name }}">{{ project.name | humanize }}</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Settings</span>
  </nav>
{% endblock %}

{% block content %}
<style>
  .form-row { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }
  .form-row label { font-weight: 600; }
  .form-row input[type="text"],
  .form-row textarea,
  .form-row select { width: 100%; font: inherit; padding: 0.4rem; }
  .form-help { color: var(--text-muted); font-size: var(--fs-xs); }
  .form-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
  .models-grid { width: 100%; border-collapse: collapse; }
  .models-grid--hybrid { table-layout: fixed; }
  .models-grid th, .models-grid td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
  }
  .models-grid th { font-weight: var(--fw-semibold); color: var(--text-muted); font-size: var(--fs-xs); }
  .models-grid td input,
  .models-grid td select { width: 100%; font: inherit; padding: 0.3rem; }
  .checkbox-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
  .privacy-summary { padding: var(--space-3); background: var(--bg-elevated); border-radius: 6px; }
  .privacy-summary dt { font-weight: var(--fw-semibold); margin-top: var(--space-2); }
  .privacy-summary dd { margin: 0 0 var(--space-2) 0; color: var(--text-muted); }
  .privacy-block {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-3);
    margin-top: var(--space-3);
    background: var(--bg-elevated);
  }
  .privacy-block h4 { margin-top: 0; }
  .channel-block {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .channel-block h4 { margin: 0 0 var(--space-2) 0; }
  .radio-group { display: flex; flex-direction: column; gap: 0.25rem; }
  .radio-group label { font-weight: normal; }
</style>

<form
  hx-put="/api/projects/{{ project.name }}/settings"
  hx-target="#settings-feedback"
  hx-swap="innerHTML"
  class="card"
>
  {% call(active) tabs("project-settings", [
    {"id": "basics", "label": "Basics"},
    {"id": "data", "label": "Data"},
    {"id": "privacy", "label": "Privacy"},
    {"id": "models", "label": "Models"},
    {"id": "notifications", "label": "Notifications"},
    {"id": "secrets", "label": "Secrets"}
  ]) %}

    {# ---- Basics tab ---------------------------------------------------- #}
    <div class="tab-panel" x-show="active === 'basics'">
      <div class="form-row">
        <label>Project name</label>
        <input type="text" value="{{ project.name }}" disabled>
        <span class="form-help">Project name is immutable.</span>
      </div>

      <div class="form-row">
        <label for="question">Research question</label>
        <textarea id="question" name="question" rows="2">{{ project.question }}</textarea>
      </div>

      <div class="form-row">
        <label for="description">Description</label>
        <textarea id="description" name="description" rows="5">{{ project.description }}</textarea>
      </div>

      <div class="form-row">
        <label for="mode">Mode</label>
        <select id="mode" name="mode">
          {% for m in valid_modes %}
            <option value="{{ m }}" {% if m == project.mode %}selected{% endif %}>{{ m }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="form-row">
        <label for="audience">Audience</label>
        <select id="audience" name="audience">
          {% for a in valid_audiences %}
            <option value="{{ a }}" {% if a == project.audience %}selected{% endif %}>{{ a }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    {# ---- Data tab ----------------------------------------------------- #}
    <div class="tab-panel" x-show="active === 'data'" x-cloak>
      <div class="form-row">
        <label for="data_paths">Data paths</label>
        <textarea id="data_paths" name="data_paths" rows="4"
                  placeholder="data/file1.csv&#10;data/file2.parquet">{{ data_paths_text }}</textarea>
        <span class="form-help">One path per line. Stored under <code>[project].data_paths</code>.</span>
      </div>

      <div class="form-row">
        <label for="success_criteria">Success criteria</label>
        <textarea id="success_criteria" name="success_criteria" rows="4"
                  placeholder="rmse_max=0.5&#10;r2_min=0.8">{{ success_criteria_text }}</textarea>
        <span class="form-help">One <code>key=value</code> pair per line. Values stored as strings.</span>
      </div>
    </div>

    {# ---- Models tab --------------------------------------------------- #}
    {# Always-three-columns layout (Agent / Endpoint / Model) per mode,
       mirroring the global Models tab:
         open    → Endpoint cell shows literal "open" (read-only); a
                   hidden ``endpoint[<agent>]=open`` carries the value.
                   Model column is a cloud-models <select>.
         private → Endpoint cell shows literal "private" (read-only);
                   the Model column ("Model (Endpoint)") is a <select>
                   of named private endpoints — picking one sets BOTH
                   ``endpoint[<agent>]`` (the endpoint name) AND
                   ``model[<agent>]`` (its default_model) via hidden
                   inputs Alpine-bound to local state.
         hybrid  → Endpoint cell is a UI category <select> (open /
                   private), NOT submitted directly. Model column
                   swaps:
                     cat=open    → cloud-models <select>
                     cat=private → named-private-endpoint <select>
                   Hidden ``endpoint[<agent>]`` and ``model[<agent>]``
                   inputs carry the resolved values via Alpine
                   :value bindings.
       Field names remain on the existing scheme (``model[<agent>]`` /
       ``endpoint[<agent>]``) — the project-settings API is unchanged. #}
    <div class="tab-panel" x-show="active === 'models'" x-cloak>
      <div class="form-row">
        <label for="runtime_model">Project-wide model override</label>
        {% if project_privacy_mode in ["open", "hybrid"] %}
          {# Cloud project → dropdown of known Claude models. The
             empty option means "inherit the global per-mode default". #}
          <select id="runtime_model" name="runtime_model">
            <option value="" {% if not runtime_model %}selected{% endif %}>(inherit global default: {{ runtime_model_placeholder }})</option>
            {% for m in known_cloud_models %}
              <option value="{{ m }}"
                      {% if m == runtime_model %}selected{% endif %}>{{ m }}</option>
            {% endfor %}
          </select>
        {% else %}
          {# Private mode → free-text (local server model names vary). #}
          <input type="text" id="runtime_model" name="runtime_model"
                 value="{{ runtime_model }}"
                 placeholder="{{ runtime_model_placeholder }}">
        {% endif %}
        <span class="form-help">Sets <code>[runtime].model</code>. Leave blank to inherit the global per-mode default.</span>
      </div>

      {% if project_privacy_mode == "open" %}
        {# Open mode: Endpoint cell = literal "open" + hidden input.
           Model cell = cloud-models <select>. #}
        <table class="models-grid">
          <thead>
            <tr>
              <th>Agent</th>
              <th>Endpoint</th>
              <th>Model</th>
            </tr>
          </thead>
          <tbody>
            {% for row in model_rows %}
            <tr>
              <td><code>{{ row.agent }}</code></td>
              <td>
                <span>open</span>
                <input type="hidden" name="endpoint[{{ row.agent }}]" value="open">
              </td>
              <td>
                <select name="model[{{ row.agent }}]">
                  <option value="" {% if not row.model %}selected{% endif %}>(inherit{% if row.placeholder_model %}: {{ row.placeholder_model }}{% endif %})</option>
                  {% for m in known_cloud_models %}
                    <option value="{{ m }}"
                            {% if m == row.model %}selected{% endif %}>{{ m }}</option>
                  {% endfor %}
                </select>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      {% elif project_privacy_mode == "private" %}
        {# Private mode: Endpoint cell = literal "private". Model cell
           = <select> of named private endpoints; two hidden inputs
           carry the bundled endpoint name + its default_model. #}
        {% if private_endpoint_options %}
          <table class="models-grid">
            <thead>
              <tr>
                <th>Agent</th>
                <th>Endpoint</th>
                <th>Model (Endpoint)</th>
              </tr>
            </thead>
            <tbody>
              {% for row in model_rows %}
              {% set initial_ep = row.endpoint if row.endpoint in private_endpoint_options|map(attribute='name')|list else private_endpoint_options[0].name %}
              <tr x-data='{ ep: "{{ initial_ep }}", opts: {{ private_endpoint_options | tojson }} }'>
                <td><code>{{ row.agent }}</code></td>
                <td><span>private</span></td>
                <td>
                  <select x-model="ep">
                    {% for opt in private_endpoint_options %}
                      <option value="{{ opt.name }}"
                              {% if opt.name == initial_ep %}selected{% endif %}>{{ opt.default_model }} ({{ opt.name }})</option>
                    {% endfor %}
                  </select>
                  <input type="hidden" name="endpoint[{{ row.agent }}]"
                         :value="ep">
                  <input type="hidden" name="model[{{ row.agent }}]"
                         :value="(opts.find(o => o.name === ep) || {}).default_model || ''">
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        {% else %}
          <p class="form-help">
            No private endpoints with a default model are defined yet.
            <a href="#" @click.prevent="active = 'privacy'">Configure endpoints</a>
            on the Privacy tab first — give each one a default model so
            it can be selected here.
          </p>
        {% endif %}
      {% else %}
        {# Hybrid mode: Endpoint cell = UI category <select> (open /
           private), NOT submitted directly. Model cell swaps based on
           the chosen category. Hidden inputs carry the resolved
           [endpoint] + [model] values via Alpine :value bindings.
           data_agent: locked to "private" (only option, disabled).
           tool_builder: defaults to "private" but user-switchable. #}
        <table class="models-grid models-grid--hybrid">
          <thead>
            <tr>
              <th style="width: 20%;">Agent</th>
              <th style="width: 40%;">Endpoint</th>
              <th style="width: 40%;">Model (Endpoint)</th>
            </tr>
          </thead>
          <tbody>
            {% for row in model_rows %}
            {% set is_locked = row.agent == "data_agent" %}
            {% set defaults_private = row.agent in ["data_agent", "tool_builder"] %}
            {# Initial UI category. #}
            {% if is_locked %}
              {% set initial_cat = "private" %}
            {% elif row.endpoint == "open" %}
              {% set initial_cat = "open" %}
            {% elif row.endpoint and row.endpoint != "inherit" and row.endpoint in private_endpoint_options|map(attribute='name')|list %}
              {% set initial_cat = "private" %}
            {% elif defaults_private %}
              {% set initial_cat = "private" %}
            {% else %}
              {% set initial_cat = "open" %}
            {% endif %}
            {# Initial chosen private endpoint (used when cat=private). #}
            {% if row.endpoint in private_endpoint_options|map(attribute='name')|list %}
              {% set initial_ep = row.endpoint %}
            {% elif private_endpoint_options %}
              {% set initial_ep = private_endpoint_options[0].name %}
            {% else %}
              {% set initial_ep = "" %}
            {% endif %}
            {# Initial chosen cloud model (used when cat=open). Empty
               string means "inherit global per-mode default". #}
            {% set initial_cloud_model = row.model or "" %}
            <tr x-data='{ cat: "{{ initial_cat }}", ep: "{{ initial_ep }}", cloud_model: "{{ initial_cloud_model }}", opts: {{ private_endpoint_options | tojson }} }'>
              <td>
                <code>{{ row.agent }}</code>
                {% if is_locked %}
                  <span class="form-help" style="display:block;">locked: data_agent must use a private endpoint</span>
                {% endif %}
              </td>
              <td>
                {# UI category select — NOT submitted directly (no name=).
                   data_agent: only "private" + disabled (locked).
                   tool_builder + others: both options. #}
                <select x-model="cat" {% if is_locked %}disabled{% endif %}>
                  {% if not is_locked %}
                    <option value="open" {% if initial_cat == "open" %}selected{% endif %}>open</option>
                  {% endif %}
                  <option value="private" {% if initial_cat == "private" %}selected{% endif %}>private</option>
                </select>
                <input type="hidden" name="endpoint[{{ row.agent }}]"
                       :value="cat === 'open' ? 'open' : ep">
              </td>
              <td>
                {# Cloud variant: free dropdown of known cloud models.
                   No name= — the hidden [model] input below carries it. #}
                <select x-show="cat === 'open'" x-model="cloud_model">
                  <option value="" {% if not row.model %}selected{% endif %}>(inherit{% if row.placeholder_model %}: {{ row.placeholder_model }}{% endif %})</option>
                  {% for m in known_cloud_models %}
                    <option value="{{ m }}"
                            {% if m == row.model %}selected{% endif %}>{{ m }}</option>
                  {% endfor %}
                </select>
                {# Private variant: <select> of named private endpoints. #}
                <select x-show="cat === 'private'" x-cloak x-model="ep">
                  {% for opt in private_endpoint_options %}
                    <option value="{{ opt.name }}"
                            {% if opt.name == initial_ep %}selected{% endif %}>{{ opt.default_model }} ({{ opt.name }})</option>
                  {% endfor %}
                </select>
                <input type="hidden" name="model[{{ row.agent }}]"
                       :value="cat === 'open' ? cloud_model : ((opts.find(o => o.name === ep) || {}).default_model || '')">
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}
      <span class="form-help">Per-agent overrides are written to <code>[runtime.models.&lt;agent&gt;]</code>.  Placeholders show the global per-mode default for the project's current mode.</span>
    </div>

    {# ---- Privacy tab (editable, mode is required) -------------------- #}
    <div class="tab-panel" x-show="active === 'privacy'" x-cloak
         x-data="{ pmode: '{{ project_privacy_mode }}' }">
      <div class="form-row">
        <label>Privacy mode for this project</label>
        <div class="radio-group">
          <label class="checkbox-row">
            <input type="radio" name="project_privacy_mode" value="open"
                   x-model="pmode"
                   {% if project_privacy_mode == "open" %}checked{% endif %}>
            <span>Open</span>
          </label>
          <label class="checkbox-row">
            <input type="radio" name="project_privacy_mode" value="private"
                   x-model="pmode"
                   {% if project_privacy_mode == "private" %}checked{% endif %}>
            <span>Private</span>
          </label>
          <label class="checkbox-row">
            <input type="radio" name="project_privacy_mode" value="hybrid"
                   x-model="pmode"
                   {% if project_privacy_mode == "hybrid" %}checked{% endif %}>
            <span>Hybrid</span>
          </label>
        </div>
        <span class="form-help">
          Mode is required and is set at project creation
          (<code>urika new</code>).  Switching modes here writes a fresh
          <code>[privacy]</code> block to <code>urika.toml</code>.
        </span>
      </div>

      {# Open block #}
      <div class="privacy-block" x-show="pmode === 'open'" x-cloak>
        <h4>Open mode</h4>
        <div class="form-row">
          <label for="project_privacy_open_model">Cloud model</label>
          <select id="project_privacy_open_model" name="project_privacy_open_model">
            {% for m in cloud_models %}
              <option value="{{ m }}"
                      {% if m == project_privacy_open_model %}selected{% endif %}>{{ m }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      {# Private block.  Wrapped in its own Alpine scope so the Test
         button can read the *live* URL + key-env values (not whatever
         is saved in urika.toml).  Inputs use x-model to keep the
         scope's ``ep`` mirror in sync with what the user types. #}
      <div class="privacy-block" x-show="pmode === 'private'" x-cloak
           x-data='{
             ep: {
               base_url: {{ project_privacy_private_url | tojson }},
               api_key_env: {{ project_privacy_private_key_env | tojson }}
             },
             testing: false,
             result: null,
             testEndpoint() {
               this.testing = true;
               this.result = null;
               const fd = new FormData();
               fd.append("base_url", this.ep.base_url || "");
               fd.append("api_key_env", this.ep.api_key_env || "");
               fetch("/api/settings/test-endpoint", { method: "POST", body: fd })
                 .then(r => r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)))
                 .then(d => { this.result = d; this.testing = false; })
                 .catch(e => {
                   this.result = { reachable: false, details: e.message, api_key_set: false };
                   this.testing = false;
                 });
             }
           }'>
        <h4>Private mode</h4>
        {% if inherited_endpoint and inherited_endpoint.private %}
          <p class="form-help privacy-inherits"
             data-inherits-mode="private">
            Inherits global endpoint:
            <strong>{{ inherited_endpoint.private.name }}</strong>
            (<code>{{ inherited_endpoint.private.base_url }}</code>).
            Leave the URL blank to use it; type a URL to override
            for this project.
          </p>
        {% endif %}
        <div class="form-row">
          <label for="project_privacy_private_url">Endpoint URL</label>
          <input type="text" id="project_privacy_private_url"
                 name="project_privacy_private_url"
                 x-model="ep.base_url"
                 value="{{ project_privacy_private_url }}"
                 placeholder="http://localhost:11434">
        </div>
        <div class="form-row">
          <label for="project_privacy_private_key_env">API key env var</label>
          <input type="text" id="project_privacy_private_key_env"
                 name="project_privacy_private_key_env"
                 x-model="ep.api_key_env"
                 value="{{ project_privacy_private_key_env }}"
                 placeholder="e.g. URIKA_API_KEY">
          <span class="form-help text-muted" style="font-size: var(--fs-xs);">
            Enter the <strong>name</strong> of an environment variable (e.g.
            <code>URIKA_API_KEY</code>), not the key itself. Leave blank if the
            endpoint doesn't require auth.
          </span>
        </div>
        <div class="form-row">
          <label for="project_privacy_private_model">Model name</label>
          <input type="text" id="project_privacy_private_model"
                 name="project_privacy_private_model"
                 value="{{ project_privacy_private_model }}"
                 placeholder="qwen3:14b">
        </div>
        {# Test endpoint button — Alpine state is shared with the inputs above.
           Uses .endpoint-test (centered, natural-width) instead of .form-row
           (which would stretch the button to full width). #}
        <div class="endpoint-test">
          <button type="button" class="btn btn--small btn--primary"
                  @click="testEndpoint()"
                  :disabled="testing || !ep.base_url">
            <span class="running-dot" x-show="testing"></span>
            <span x-text="testing ? 'Testing…' : 'Test endpoint'">Test endpoint</span>
          </button>
          <div x-show="result" x-cloak class="endpoint-test-result"
               style="font-size: var(--fs-xs);">
            <div :class="result?.reachable ? 'endpoint-test-result--ok' : 'endpoint-test-result--fail'">
              <span x-text="result?.reachable ? '✓ Reachable' : '✗ Unreachable'"></span>
              <span class="text-muted" x-show="result?.details" x-text="': ' + result?.details"></span>
            </div>
            <div class="text-muted" x-show="result?.api_key_env">
              API key
              <code x-text="result?.api_key_env"></code>:
              <span :class="result?.api_key_set ? 'endpoint-test-result--ok' : 'endpoint-test-result--fail'"
                    x-text="result?.api_key_set ? '✓ set' : '✗ unset'"></span>
            </div>
          </div>
        </div>
      </div>

      {# Hybrid block.  Same Alpine pattern as the Private block —
         scoped state mirrors the private URL + key-env inputs so the
         Test button probes whatever the user has typed. #}
      <div class="privacy-block" x-show="pmode === 'hybrid'" x-cloak
           x-data='{
             ep: {
               base_url: {{ project_privacy_hybrid_private_url | tojson }},
               api_key_env: {{ project_privacy_hybrid_private_key_env | tojson }}
             },
             testing: false,
             result: null,
             testEndpoint() {
               this.testing = true;
               this.result = null;
               const fd = new FormData();
               fd.append("base_url", this.ep.base_url || "");
               fd.append("api_key_env", this.ep.api_key_env || "");
               fetch("/api/settings/test-endpoint", { method: "POST", body: fd })
                 .then(r => r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)))
                 .then(d => { this.result = d; this.testing = false; })
                 .catch(e => {
                   this.result = { reachable: false, details: e.message, api_key_set: false };
                   this.testing = false;
                 });
             }
           }'>
        <h4>Hybrid mode</h4>
        {% if inherited_endpoint and inherited_endpoint.hybrid %}
          <p class="form-help privacy-inherits"
             data-inherits-mode="hybrid">
            Inherits global endpoint:
            <strong>{{ inherited_endpoint.hybrid.name }}</strong>
            (<code>{{ inherited_endpoint.hybrid.base_url }}</code>).
            Leave the private URL blank to use it; type a URL to
            override for this project.
          </p>
        {% endif %}
        <div class="form-row">
          <label for="project_privacy_hybrid_cloud_model">Cloud model (most agents)</label>
          <select id="project_privacy_hybrid_cloud_model"
                  name="project_privacy_hybrid_cloud_model">
            {% for m in cloud_models %}
              <option value="{{ m }}"
                      {% if m == project_privacy_hybrid_cloud_model %}selected{% endif %}>{{ m }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-row">
          <label for="project_privacy_hybrid_private_url">Private endpoint URL (data agents)</label>
          <input type="text" id="project_privacy_hybrid_private_url"
                 name="project_privacy_hybrid_private_url"
                 x-model="ep.base_url"
                 value="{{ project_privacy_hybrid_private_url }}"
                 placeholder="http://localhost:11434">
        </div>
        <div class="form-row">
          <label for="project_privacy_hybrid_private_key_env">Private API key env var</label>
          <input type="text" id="project_privacy_hybrid_private_key_env"
                 name="project_privacy_hybrid_private_key_env"
                 x-model="ep.api_key_env"
                 value="{{ project_privacy_hybrid_private_key_env }}"
                 placeholder="e.g. URIKA_API_KEY">
          <span class="form-help text-muted" style="font-size: var(--fs-xs);">
            Enter the <strong>name</strong> of an environment variable (e.g.
            <code>URIKA_API_KEY</code>), not the key itself.
          </span>
        </div>
        <div class="form-row">
          <label for="project_privacy_hybrid_private_model">Private model name</label>
          <input type="text" id="project_privacy_hybrid_private_model"
                 name="project_privacy_hybrid_private_model"
                 value="{{ project_privacy_hybrid_private_model }}"
                 placeholder="qwen3:14b">
        </div>
        {# Test endpoint button — probes the private URL the user typed.
           Uses .endpoint-test wrapper (centered, natural width). #}
        <div class="endpoint-test">
          <button type="button" class="btn btn--small btn--primary"
                  @click="testEndpoint()"
                  :disabled="testing || !ep.base_url">
            <span class="running-dot" x-show="testing"></span>
            <span x-text="testing ? 'Testing…' : 'Test endpoint'">Test endpoint</span>
          </button>
          <div x-show="result" x-cloak class="endpoint-test-result"
               style="font-size: var(--fs-xs);">
            <div :class="result?.reachable ? 'endpoint-test-result--ok' : 'endpoint-test-result--fail'">
              <span x-text="result?.reachable ? '✓ Reachable' : '✗ Unreachable'"></span>
              <span class="text-muted" x-show="result?.details" x-text="': ' + result?.details"></span>
            </div>
            <div class="text-muted" x-show="result?.api_key_env">
              API key
              <code x-text="result?.api_key_env"></code>:
              <span :class="result?.api_key_set ? 'endpoint-test-result--ok' : 'endpoint-test-result--fail'"
                    x-text="result?.api_key_set ? '✓ set' : '✗ unset'"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    {# ---- Notifications tab (2-state: enabled / disabled) ------------- #}
    <div class="tab-panel" x-show="active === 'notifications'" x-cloak>
      <p class="form-help" style="margin-bottom: var(--space-3);">
        Tick a channel to enable it for this project. New projects are
        pre-seeded from the global Notifications settings (each channel
        with <em>Auto-enable on new projects</em> turned on starts ticked
        here). Channel connection details — SMTP host, Slack channel, etc.
        — are shared globally.
      </p>

      {# Email #}
      <div class="channel-block">
        <h4>Email</h4>
        <div class="form-row">
          <label class="checkbox-row">
            <input type="checkbox" name="project_notif_email_enabled" value="on"
                   {% if notif_email_enabled %}checked{% endif %}>
            <span>Enabled for this project</span>
          </label>
        </div>
        <div class="form-row">
          <label for="project_notif_email_extra_to">Extra recipients (comma-separated)</label>
          {# Canonical key is ``to`` — the loader merges these into the
             global ``to`` list. Older TOML files used ``extra_to``;
             prefer the canonical key but fall back so existing files
             still populate the field. #}
          <input type="text" id="project_notif_email_extra_to"
                 name="project_notif_email_extra_to"
                 value="{% set _to = notif_email.get('to', notif_email.get('extra_to', [])) %}{% if _to is iterable and _to is not string %}{{ _to | join(', ') }}{% else %}{{ _to or '' }}{% endif %}"
                 placeholder="alice@example.com, bob@example.com">
          <span class="form-help">Project-specific addresses appended to the global <code>to</code> list.</span>
        </div>
      </div>

      {# Slack #}
      <div class="channel-block">
        <h4>Slack</h4>
        <div class="form-row">
          <label class="checkbox-row">
            <input type="checkbox" name="project_notif_slack_enabled" value="on"
                   {% if notif_slack_enabled %}checked{% endif %}>
            <span>Enabled for this project</span>
          </label>
        </div>
      </div>

      {# Telegram #}
      <div class="channel-block">
        <h4>Telegram</h4>
        <div class="form-row">
          <label class="checkbox-row">
            <input type="checkbox" name="project_notif_telegram_enabled" value="on"
                   {% if notif_telegram_enabled %}checked{% endif %}>
            <span>Enabled for this project</span>
          </label>
        </div>
        <div class="form-row">
          <label for="project_notif_telegram_override_chat_id">Override chat ID</label>
          {# Canonical key is ``chat_id`` (loader does cfg.update so the
             project key must match the channel-readable key). Legacy
             TOML files used ``override_chat_id``; fall back so they
             still populate the field. #}
          <input type="text" id="project_notif_telegram_override_chat_id"
                 name="project_notif_telegram_override_chat_id"
                 value="{{ notif_telegram.get('chat_id', notif_telegram.get('override_chat_id', '')) }}"
                 placeholder="(use a different chat than the global one)">
        </div>
      </div>
    </div>

    {# ---- Secrets tab -------------------------------------------------- #}
    {# Per-project secrets: the list shows BOTH project-level and global
       secrets in one place, with origin badges per row. Project secrets
       live in <project>/.urika/secrets.env and override globals for
       this project. #}
    <div class="tab-panel" x-show="active === 'secrets'" x-cloak
         x-data="projectSecretsTab('{{ project.name }}')" x-init="loadSecrets()">
      <p class="form-help" style="margin-bottom: var(--space-3);">
        Project-tier secrets override global secrets for this project
        only. Saved values live in
        <code>{{ project.name }}/.urika/secrets.env</code> (chmod 0600).
        Process environment variables always take precedence — exports
        in your shell are never overwritten.
      </p>

      <div style="margin-bottom: var(--space-3);">
        <button type="button" class="btn btn--secondary"
                @click="openAddForm()">
          + Add project secret
        </button>
      </div>

      <div class="privacy-block" x-show="formOpen" x-cloak
           style="margin-bottom: var(--space-3);"
           @keydown.enter.prevent="saveSecret()">
        <h4 x-text="formTitle"></h4>
        <div class="form-row">
          <label>Name</label>
          <input type="text" x-model="form.name"
                 :disabled="formMode !== 'add'"
                 pattern="[A-Z][A-Z0-9_]*"
                 title="Uppercase letters, digits, underscores only"
                 placeholder="e.g. HUGGINGFACE_HUB_TOKEN">
          <small class="form-help">
            Same name your agent / tool reads via
            <code>os.environ.get(NAME)</code>.
          </small>
        </div>
        <div class="form-row">
          <label>Value</label>
          <div style="display: flex; gap: 0.5rem;">
            <input :type="showValue ? 'text' : 'password'"
                   x-model="form.value"
                   style="flex: 1;"
                   placeholder="(leave blank to keep existing value)">
            <button type="button" class="btn btn--ghost"
                    @click="showValue = !showValue">
              <span x-text="showValue ? 'Hide' : 'Show'"></span>
            </button>
          </div>
        </div>
        <div class="form-row">
          <label>Description (optional)</label>
          <input type="text" x-model="form.description"
                 placeholder="What is this for?">
        </div>
        <div class="form-actions">
          <button type="button" class="btn btn--primary"
                  @click="saveSecret()"
                  :disabled="saving">
            <span x-text="saving ? 'Saving…' : 'Save'">Save</span>
          </button>
          <button type="button" class="btn btn--ghost"
                  @click="closeForm()">Cancel</button>
          <span x-show="formError" x-cloak class="text-danger"
                x-text="formError"></span>
        </div>
      </div>

      <div x-show="loading" class="form-help">Loading secrets…</div>
      <div x-show="!loading && secrets.length === 0" x-cloak class="form-help">
        No secrets configured.
      </div>

      {# Three sections, same as the global Secrets tab. The project
         tab's row buttons differ (Override / Use global instead) so
         the per-section blocks can't be DRY'd against the global tab. #}

      {# ── LLM Providers ────────────────────────────────────────────── #}
      <h3 class="form-help" x-show="!loading && providerRows().length"
          x-cloak style="margin-top: var(--space-3); font-size: var(--fs-base); font-weight: 600;">
        LLM Providers
      </h3>
      <template x-for="row in providerRows()" :key="row.name">
        <div class="privacy-block">
          <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2);">
            <div style="flex: 1; min-width: 0;">
              <h4 style="margin: 0 0 var(--space-1) 0;">
                <code x-text="row.name"></code>
                <span x-show="row.provider_display" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); color: var(--text-muted);"
                      x-text="row.provider_display"></span>
                <span x-show="row.origin === 'project'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #cfe2ff; color: #084298; border-radius: 4px;">
                  project
                </span>
                <span x-show="row.origin === 'global' || row.origin === 'keyring' || row.origin === 'file'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #d4edda; color: #155724; border-radius: 4px;"
                      x-text="row.origin === 'keyring' ? 'keyring' : (row.origin === 'file' ? 'file' : 'global')">
                </span>
                <span x-show="row.origin === 'process'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #fff5e0; color: #5a3b00; border-radius: 4px;">
                  process env
                </span>
                <span x-show="row.origin === 'unset' && row.available !== false" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #e9ecef; color: #495057; border-radius: 4px;">
                  unset
                </span>
                <span x-show="row.available === false" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #e9ecef; color: #495057; border-radius: 4px;">
                  coming v0.5
                </span>
              </h4>
              <div class="form-help" x-show="row.description" x-cloak
                   x-text="row.description"></div>
              <div style="margin-top: 4px;" x-show="row.set" x-cloak>
                <code style="font-size: var(--fs-xs);" x-text="row.masked_preview"></code>
              </div>
            </div>
            <div style="display: flex; gap: var(--space-2); flex-shrink: 0;">
              <button type="button" class="btn btn--small"
                      x-show="row.origin === 'project' && row.available !== false" x-cloak
                      @click="openEditForm(row)">Edit</button>
              <button type="button" class="btn btn--small"
                      x-show="(row.origin === 'global' || row.origin === 'keyring' || row.origin === 'file') && row.set && row.available !== false" x-cloak
                      @click="openOverrideForm(row)">Override?</button>
              <button type="button" class="btn btn--small btn--primary"
                      x-show="row.origin === 'unset' && row.available !== false" x-cloak
                      @click="openSetForm(row)">Set</button>
              <button type="button" class="btn btn--small btn--danger"
                      x-show="row.origin === 'project' && row.available !== false" x-cloak
                      @click="deleteSecret(row)"
                      title="Use global value instead">Use global instead</button>
            </div>
          </div>
        </div>
      </template>

      {# ── Used by your config ──────────────────────────────────────── #}
      <h3 class="form-help" x-show="!loading && usedByConfigRows().length"
          x-cloak style="margin-top: var(--space-3); font-size: var(--fs-base); font-weight: 600;">
        Used by your config
      </h3>
      <template x-for="row in usedByConfigRows()" :key="row.name">
        <div class="privacy-block">
          <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2);">
            <div style="flex: 1; min-width: 0;">
              <h4 style="margin: 0 0 var(--space-1) 0;">
                <code x-text="row.name"></code>
                <span x-show="row.origin === 'process'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #fff5e0; color: #5a3b00; border-radius: 4px;">
                  process env
                </span>
                <span x-show="row.origin === 'global' || row.origin === 'keyring' || row.origin === 'file'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #d4edda; color: #155724; border-radius: 4px;"
                      x-text="row.origin === 'keyring' ? 'keyring' : (row.origin === 'file' ? 'file' : 'global')">
                </span>
                <span x-show="row.origin === 'project'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #cfe2ff; color: #084298; border-radius: 4px;">
                  project
                </span>
                <span x-show="row.origin === 'unset'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #e9ecef; color: #495057; border-radius: 4px;">
                  unset
                </span>
              </h4>
              <div class="form-help" x-show="row.referenced_by" x-cloak
                   style="margin-top: 4px;">
                ↳ used by <span x-text="row.referenced_by"></span>
              </div>
              <div class="form-help" x-show="row.description" x-cloak
                   x-text="row.description"></div>
              <div style="margin-top: 4px;" x-show="row.set" x-cloak>
                <code style="font-size: var(--fs-xs);" x-text="row.masked_preview"></code>
              </div>
              <div class="form-help" x-show="row.origin === 'process'" x-cloak
                   style="margin-top: 4px;">
                In shell environment — to clear, run
                <code>unset <span x-text="row.name"></span></code>
                in the shell that launched the dashboard.
              </div>
            </div>
            <div style="display: flex; gap: var(--space-2); flex-shrink: 0;">
              <button type="button" class="btn btn--small"
                      x-show="row.origin === 'project'" x-cloak
                      @click="openEditForm(row)">Edit</button>
              <button type="button" class="btn btn--small"
                      x-show="(row.origin === 'global' || row.origin === 'keyring' || row.origin === 'file') && row.set" x-cloak
                      @click="openOverrideForm(row)">Override?</button>
              <button type="button" class="btn btn--small btn--primary"
                      x-show="row.origin === 'unset'" x-cloak
                      @click="openSetForm(row)">Set</button>
              <button type="button" class="btn btn--small btn--danger"
                      x-show="row.origin === 'project'" x-cloak
                      @click="deleteSecret(row)"
                      title="Use global value instead">Use global instead</button>
            </div>
          </div>
        </div>
      </template>

      {# ── Other Integrations ───────────────────────────────────────── #}
      <h3 class="form-help" x-show="!loading && otherRows().length"
          x-cloak style="margin-top: var(--space-3); font-size: var(--fs-base); font-weight: 600;">
        Other Integrations
      </h3>
      <template x-for="row in otherRows()" :key="row.name">
        <div class="privacy-block">
          <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2);">
            <div style="flex: 1; min-width: 0;">
              <h4 style="margin: 0 0 var(--space-1) 0;">
                <code x-text="row.name"></code>
                <span x-show="row.origin === 'process'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #fff5e0; color: #5a3b00; border-radius: 4px;">
                  process env
                </span>
                <span x-show="row.origin === 'global' || row.origin === 'keyring' || row.origin === 'file'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #d4edda; color: #155724; border-radius: 4px;"
                      x-text="row.origin === 'keyring' ? 'keyring' : (row.origin === 'file' ? 'file' : 'global')">
                </span>
                <span x-show="row.origin === 'project'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #cfe2ff; color: #084298; border-radius: 4px;">
                  project
                </span>
                <span x-show="row.origin === 'unset'" x-cloak
                      style="font-size: var(--fs-xs); margin-left: var(--space-2); padding: 2px 6px; background: #e9ecef; color: #495057; border-radius: 4px;">
                  unset
                </span>
              </h4>
              <div class="form-help" x-show="row.description" x-cloak
                   x-text="row.description"></div>
              <div style="margin-top: 4px;" x-show="row.set" x-cloak>
                <code style="font-size: var(--fs-xs);" x-text="row.masked_preview"></code>
              </div>
              <div class="form-help" x-show="row.origin === 'process'" x-cloak
                   style="margin-top: 4px;">
                In shell environment — to clear, run
                <code>unset <span x-text="row.name"></span></code>
                in the shell that launched the dashboard.
              </div>
            </div>
            <div style="display: flex; gap: var(--space-2); flex-shrink: 0;">
              <button type="button" class="btn btn--small"
                      x-show="row.origin === 'project'" x-cloak
                      @click="openEditForm(row)">Edit</button>
              <button type="button" class="btn btn--small"
                      x-show="(row.origin === 'global' || row.origin === 'keyring' || row.origin === 'file') && row.set" x-cloak
                      @click="openOverrideForm(row)">Override?</button>
              <button type="button" class="btn btn--small btn--primary"
                      x-show="row.origin === 'unset'" x-cloak
                      @click="openSetForm(row)">Set</button>
              <button type="button" class="btn btn--small btn--danger"
                      x-show="row.origin === 'project'" x-cloak
                      @click="deleteSecret(row)"
                      title="Use global value instead">Use global instead</button>
            </div>
          </div>
        </div>
      </template>
    </div>

  {% endcall %}

  <div class="form-actions">
    <button type="submit" class="btn btn--primary">Save</button>
    <span id="settings-feedback" class="text-muted"></span>
  </div>
</form>

{# ---- Project Secrets tab Alpine component --------------------------- #}
{# Mirrors secretsTab() in global_settings.html but routes to the
   per-project /api/projects/<n>/secrets endpoints. #}
<script>
function projectSecretsTab(projectName) {
  const baseUrl = `/api/projects/${encodeURIComponent(projectName)}/secrets`;
  return {
    loading: true,
    secrets: [],
    formOpen: false,
    formMode: 'add',  // 'add' | 'edit' | 'override' | 'set'
    showValue: false,
    saving: false,
    formError: '',
    form: { name: '', value: '', description: '' },

    get formTitle() {
      switch (this.formMode) {
        case 'edit': return 'Edit project secret';
        case 'override': return 'Override global with project value';
        case 'set': return 'Set project secret';
        default: return 'Add project secret';
      }
    },

    // Section filters — same shape as the global Secrets tab.
    providerRows() {
      return this.secrets.filter(r => r.category === 'provider');
    },
    usedByConfigRows() {
      return this.secrets.filter(r => r.category === 'used_by_config');
    },
    otherRows() {
      return this.secrets.filter(
        r => r.category !== 'provider' && r.category !== 'used_by_config'
      );
    },

    async loadSecrets() {
      this.loading = true;
      try {
        const r = await fetch(baseUrl);
        if (!r.ok) {
          this.secrets = [];
          this.loading = false;
          return;
        }
        const body = await r.json();
        this.secrets = body.secrets || [];
      } catch (e) {
        this.secrets = [];
      }
      this.loading = false;
    },

    openAddForm() {
      this.formMode = 'add';
      this.form = { name: '', value: '', description: '' };
      this.showValue = false;
      this.formError = '';
      this.formOpen = true;
    },

    openSetForm(row) {
      this.formMode = 'set';
      this.form = {
        name: row.name,
        value: '',
        description: row.description || '',
      };
      this.showValue = false;
      this.formError = '';
      this.formOpen = true;
    },

    openEditForm(row) {
      this.formMode = 'edit';
      this.form = {
        name: row.name,
        value: '',
        description: row.description || '',
      };
      this.showValue = false;
      this.formError = '';
      this.formOpen = true;
    },

    openOverrideForm(row) {
      this.formMode = 'override';
      this.form = {
        name: row.name,
        value: '',
        description: row.description || '',
      };
      this.showValue = false;
      this.formError = '';
      this.formOpen = true;
    },

    closeForm() {
      this.formOpen = false;
      this.formError = '';
    },

    async saveSecret() {
      this.saving = true;
      this.formError = '';
      if (this.formMode === 'edit' && !this.form.value) {
        this.formError = 'Enter a new value to update, or click Cancel.';
        this.saving = false;
        return;
      }
      if (!this.form.value) {
        this.formError = 'Value is required.';
        this.saving = false;
        return;
      }
      try {
        const fd = new FormData();
        fd.append('name', this.form.name);
        fd.append('value', this.form.value);
        if (this.form.description) fd.append('description', this.form.description);
        const r = await fetch(baseUrl, { method: 'POST', body: fd });
        if (!r.ok) {
          let msg = 'Save failed';
          try {
            const body = await r.json();
            msg = body.detail || msg;
          } catch (_) { /* non-json */ }
          this.formError = msg;
          this.saving = false;
          return;
        }
        this.formOpen = false;
        await this.loadSecrets();
      } catch (e) {
        this.formError = e.message || 'Save failed';
      }
      this.saving = false;
    },

    async deleteSecret(row) {
      if (!confirm(`Remove ${row.name} from this project? The global value (if any) will still apply.`)) return;
      try {
        const r = await fetch(`${baseUrl}/${encodeURIComponent(row.name)}`, {
          method: 'DELETE',
        });
        if (!r.ok && r.status !== 204) {
          let msg = 'Delete failed';
          try { msg = (await r.json()).detail || msg; } catch (_) {}
          alert(msg);
          return;
        }
        await this.loadSecrets();
      } catch (e) {
        alert(e.message || 'Delete failed');
      }
    },
  };
}
</script>

{# ---- Danger zone -----------------------------------------------------
   Lives outside the settings <form> so the type-name confirm input
   doesn't get submitted when the user saves regular settings. The
   Move-to-trash button posts DELETE /api/projects/<name> directly via
   HTMX; on success the server emits HX-Redirect: /projects so the
   user lands back on the (now-shorter) project list.
#}
<section class="card danger-zone">
  <h2>Danger zone</h2>
  <p class="text-muted">
    Moving the project to trash unregisters it from Urika and moves
    the project folder to
    <code>~/.urika/trash/{{ project.name }}-&lt;timestamp&gt;/</code>.
    Files are preserved; empty the trash folder manually when you're sure.
  </p>
  {% if active_lock_path %}
    <p class="text-warning">
      Stop the running process first &mdash; lock file present at
      <code>{{ active_lock_path }}</code>.
    </p>
    <button class="btn btn--danger" type="button" disabled>Move to trash</button>
  {% else %}
    <div x-data="{ typed: '' }" style="display: flex; flex-direction: column; gap: 0.5rem; max-width: 480px;">
      <input
        type="text"
        class="input"
        placeholder="Type the project name to confirm"
        x-model="typed"
        style="font: inherit; padding: 0.4rem;"
      >
      <button
        class="btn btn--danger"
        type="button"
        :disabled="typed !== '{{ project.name }}'"
        hx-delete="/api/projects/{{ project.name }}"
        hx-confirm="Move '{{ project.name }}' to trash? Files are preserved at ~/.urika/trash/."
      >Move to trash</button>
    </div>
  {% endif %}
</section>
{% endblock %}