{# The secrets tab: .env is write-only.  A control can set a value or clear it,
   and the page only ever learns *whether* one is set - the value itself never
   travels back to a browser.  The admin password has its own "set a new
   password" flow because web_admin.password_hash resolves it and a hash is not
   something an operator types. #}
<div id="ce-secrets" class="card">
  <div class="card-header">
    <span><span class="card-header-icon">🔑</span> {{ _('Secrets and credentials') }}</span>
    <span class="toolbar-spacer"></span>
    <span class="badge badge-warning">{{ _('write-only: values are never shown') }}</span>
  </div>
  <div class="card-body">
    <p class="muted-copy" style="margin-top:0;">
      {{ _('Credentials live in .env next to config.toml. Saving writes the variable and reloads the runtime; an empty field leaves the current value untouched, and no value is ever sent back to this page.') }}
    </p>

    {% for row in env_rows %}
      {% if row.is_password %}
      <div class="ce-row" data-env-key="{{ row.key }}"
           style="border:1px solid var(--color-border);border-radius:4px;padding:8px 10px;margin-bottom:6px;">
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
          <code style="font-size:12px;">{{ row.key }}</code>
          <span class="badge {{ 'badge-success' if row.set else 'badge-muted' }}">
            {{ _('set') if row.set else _('not set') }}
          </span>
          <span class="muted-copy" style="font-size:11px;">{{ _('resolves web_admin.password_hash') }}</span>
        </div>
        <form hx-post="/admin/config/editor/password" hx-target="#ce-result" hx-swap="innerHTML"
              style="display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input class="form-input" type="password" name="password" autocomplete="new-password"
                 placeholder="{{ _('New admin password') }}" style="max-width:220px;">
          <input class="form-input" type="password" name="password_confirm" autocomplete="new-password"
                 placeholder="{{ _('Repeat it') }}" style="max-width:220px;">
          <button class="btn btn-primary btn-sm" type="submit">{{ _('Set a new password') }}</button>
          <span class="muted-copy" style="font-size:11px;">{{ _('Hashed here; the hash is never displayed.') }}</span>
        </form>
      </div>
      {% elif row.editable %}
      <div class="ce-row" data-env-key="{{ row.key }}"
           style="border:1px solid var(--color-border);border-radius:4px;padding:8px 10px;margin-bottom:6px;">
        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
          <code style="font-size:12px;">{{ row.key }}</code>
          <span class="badge {{ 'badge-success' if row.set else 'badge-muted' }}">
            {{ _('set') if row.set else _('not set') }}
          </span>
        </div>
        <form hx-post="/admin/config/editor/env" hx-target="#ce-result" hx-swap="innerHTML"
              style="display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="key" value="{{ row.key }}">
          <input class="form-input" type="password" name="value" autocomplete="new-password"
                 placeholder="{{ _('New value') }}" style="flex:1;min-width:220px;">
          <button class="btn btn-ghost btn-sm" type="submit">{{ _('Save to .env') }}</button>
        </form>
        {% if row.set %}
        <form hx-post="/admin/config/editor/env/clear" hx-target="#ce-result" hx-swap="innerHTML"
              style="display:flex;gap:6px;align-items:center;margin-top:6px;">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="key" value="{{ row.key }}">
          <button class="btn btn-ghost btn-sm" type="submit"
                  hx-confirm="{{ _('Clear this variable? Notifications or integrations using it stop working.') }}">
            {{ _('Clear') }}
          </button>
        </form>
        {% endif %}
      </div>
      {% endif %}
    {% endfor %}

    <p class="muted-copy" style="margin-bottom:0;">
      {{ _('ANTEUMBRA_SECRET_KEY is deliberately not editable here: rotating it signs every session out.') }}
    </p>
  </div>
</div>