{# v2.3: Typed configuration form for one plugin's own [plugins.<name>] section.

   The panel could only switch a plugin on and off, so a plugin's real settings -
   SMTP host, webhook URL, poll interval, threshold, cooldown - were reachable
   only by editing config.toml by hand.  This form renders them from the schema
   the plugin declares next to its own `activate()`.

   Two rules this template exists to enforce:

   * Every field shows its EFFECTIVE value AND the source it came from
     (config.toml, .env, or the built-in default).  A value without its source is
     what made the old page unreadable - the reader could not tell which of three
     files was actually in charge.
   * A secret field is write-only.  Its value is never rendered, not even in an
     attribute: the field reports whether one is set, and a new value is written
     to .env through the same writer the CLI uses.

   The controls are HTMX-only on purpose: no data-action, therefore no new
   frontend strings, and the shell already adds X-CSRFToken to every htmx
   request, which is what makes these POSTs CSRF-protected like every other
   settings write. #}
<div data-plugin-config-form="{{ plugin_name }}" data-plugin-section="{{ plugin_section }}"
     style="margin-top:6px;padding:8px;background:#050505;border:1px solid #222;border-radius:3px;">

  <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;">
    <strong style="font-size:11px;color:#8fe38f;">{{ _('Configuration:') }} <code>[plugins.{{ plugin_section }}]</code></strong>
    <span style="color:var(--color-text-muted);font-size:9px;">
      {{ _('%(count)s setting(s), %(changed)s differ from the default', count=field_count, changed=changed_count) }}
    </span>
    {% if filter_name != 'all' %}
    <span class="badge badge-blue" style="font-size:8px;" data-plugin-form-filter="{{ filter_name }}">{{ _('filtered') }}</span>
    {% endif %}
    {# A close affordance, because a form the operator opened must be closable
       without saving.  Nothing here needs a script file: the shell's htmx swaps
       innerHTML, so an inline handler on the element is what runs. #}
    <button class="btn btn-ghost btn-sm" type="button" data-plugin-config-close="1"
            aria-controls="plugin-config-form"
            onclick="var t=document.getElementById('plugin-config-form'); if(t){t.innerHTML='';}"
            style="margin-left:auto;font-size:9px;padding:2px 8px;">{{ _('Close') }}</button>
  </div>

  {% for n in notices %}
  <div data-plugin-notice="{{ n.level }}" style="padding:6px 8px;border-radius:3px;font-size:10px;line-height:1.6;margin-bottom:6px;background:#0a0a0a;border-left:3px solid {{ '#ff4444' if n.level == 'error' else ('#ffaa00' if n.level == 'warning' else ('#00ff41' if n.level == 'success' else '#4a9eff')) }};color:{{ '#ff8888' if n.level == 'error' else ('#ffcc66' if n.level == 'warning' else ('#8fe38f' if n.level == 'success' else 'var(--color-text-secondary)')) }};">{{ n.text }}</div>
  {% endfor %}

  {% if errors.get('form') %}
  <div data-plugin-form-error="1" style="padding:6px 8px;border-radius:3px;margin-bottom:6px;background:rgba(255,68,68,0.08);border-left:3px solid #ff4444;color:#ff8888;font-size:10px;line-height:1.6;">{{ errors.get('form') }}</div>
  {% endif %}

  {% if not has_schema %}
  <p style="color:#ffaa00;font-size:10px;margin:0 0 6px 0;line-height:1.6;">
    {{ _('This plugin declares no schema in this build, so these controls were derived from the keys present in config.toml. Types inferred from a value can be wrong — check the effective value after saving.') }}
  </p>
  {% endif %}

  {% if not shown_count %}
  <p style="color:var(--color-text-muted);font-size:10px;margin:0 0 6px 0;line-height:1.6;" data-plugin-form-empty="1">
    {{ _('No setting is shown: every field is at its default and the readability filter is active.') }}
    {% if changed_count %} {{ _('%(count)s field(s) differ from the default.', count=changed_count) }}{% endif %}
  </p>
  {% endif %}

  {# The form is always rendered, even when the readability filter hides every
     field: a filter must never be a way to lose the ability to save, and the
     endpoint writes only the fields the form actually carried. #}
  <form hx-post="{{ save_url }}" hx-target="#settings-plugins" hx-swap="innerHTML" style="display:grid;gap:6px;">
    <input type="hidden" name="plugin" value="{{ plugin_name }}">

    {% for f in fields %}
    <div data-plugin-field="{{ f.key }}" data-plugin-field-type="{{ f.type }}"
         data-plugin-field-source="{{ f.source }}"
         style="display:grid;gap:4px;padding:6px 8px;background:#0a0a0a;border-radius:3px;border-left:3px solid {{ '#ffaa00' if f.differs_from_default else '#222' }};">

      <div style="display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;">
        <label for="plugin-field-{{ plugin_section }}-{{ f.key }}" style="font-size:11px;color:var(--color-text-primary);">{{ f.label }}</label>
        <code style="font-size:9px;color:var(--color-text-muted);">{{ f.key }}</code>
        <span class="badge {{ 'badge-warning' if f.differs_from_default else 'badge-blue' }}" style="font-size:8px;"
              data-plugin-field-diff="{{ 'true' if f.differs_from_default else 'false' }}"
              data-plugin-field-shipped="{{ 'true' if f.differs_from_shipped else 'false' }}">{{ _('changed from default') if f.differs_from_default else _('default') }}</span>
        <span style="margin-left:auto;color:var(--color-text-muted);font-size:9px;" data-plugin-field-source-label="{{ f.source }}">
          {{ _('effective from:') }} <strong style="color:{{ '#4a9eff' if f.source == 'env' else ('#8fe38f' if f.source == 'config' else 'var(--color-text-muted)') }};">{{ f.source_label }}</strong>
        </span>
      </div>

      {% if f.description %}<div style="color:var(--color-text-secondary);font-size:10px;line-height:1.6;">{{ f.description }}</div>{% endif %}

      {% if f.type == 'secret' %}
        {# Write-only: the stored value is never rendered, and the field reports
           only whether one exists. #}
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
          <span class="badge {{ 'badge-success' if f.secret_set else 'badge-danger' }}" style="font-size:8px;"
                data-plugin-secret-state="{{ 'set' if f.secret_set else 'unset' }}">{{ _('set') if f.secret_set else _('not set') }}</span>
          {% if not f.writable %}
          <span style="color:#ffaa00;font-size:9px;">{{ _('No .env variable is declared for this secret, so it cannot be changed from here.') }}</span>
          {% else %}
          <input type="password" id="plugin-field-{{ plugin_section }}-{{ f.key }}" name="secret__{{ f.key }}"
                 value="" autocomplete="new-password" data-plugin-secret-input="1"
                 placeholder="{{ _('Set a new value (leave blank to keep the stored one)') }}"
                 style="flex:1 1 240px;min-width:0;">
          {% if f.env_var %}<code style="font-size:9px;color:var(--color-text-muted);">.env: {{ f.env_var }}</code>{% endif %}
          {% endif %}
        </div>
        {% if f.secret_original %}
        <div style="color:var(--color-text-muted);font-size:9px;">{{ _('A value is stored; it is never displayed.') }}</div>
        {% else %}
        <div style="color:#ffaa00;font-size:9px;">{{ _('No value is stored yet.') }}</div>
        {% endif %}

      {% elif f.type == 'toggle' %}
        <label style="display:flex;align-items:center;gap:8px;font-size:10px;color:var(--color-text-secondary);">
          <input type="hidden" name="field__{{ f.key }}" value="false">
          <input type="checkbox" id="plugin-field-{{ plugin_section }}-{{ f.key }}" name="field__{{ f.key }}" value="true"
                 {% if f.raw == 'true' %}checked{% endif %}>
          <span>{{ _('Enabled') if f.raw == 'true' else _('Disabled') }}</span>
        </label>

      {% elif f.type == 'number' %}
        <input type="number" id="plugin-field-{{ plugin_section }}-{{ f.key }}" name="field__{{ f.key }}"
               value="{{ f.raw }}" step="{{ f.step }}"
               {% if f.min is not none %}min="{{ f.min }}"{% endif %}
               {% if f.max is not none %}max="{{ f.max }}"{% endif %}
               {% if f.required %}required{% endif %} style="max-width:200px;" data-plugin-number="1">

      {% elif f.type == 'select' %}
        <select id="plugin-field-{{ plugin_section }}-{{ f.key }}" name="field__{{ f.key }}" style="max-width:280px;">
          {% for choice in f.choices %}
          <option value="{{ choice }}" {% if choice == f.raw %}selected{% endif %}>{{ choice }}</option>
          {% endfor %}
        </select>

      {% elif f.type == 'list' %}
        <input type="text" id="plugin-field-{{ plugin_section }}-{{ f.key }}" name="field__{{ f.key }}"
               value="{{ f.raw }}" placeholder="{{ _('comma separated, or a JSON list') }}" style="min-width:0;">

      {% else %}
        <input type="text" id="plugin-field-{{ plugin_section }}-{{ f.key }}" name="field__{{ f.key }}"
               value="{{ f.raw }}" {% if f.required %}required{% endif %} style="min-width:0;">
      {% endif %}

      <div style="color:var(--color-text-muted);font-size:9px;line-height:1.6;">
        {{ _('default:') }} <code>{{ f.default_text }}</code>
        {%- if f.differs_from_shipped %} · {{ _('differs from the shipped config.toml') }}{% endif %}
        {%- if not f.in_config %} · {{ _('not present in config.toml yet') }}{% endif %}
      </div>

      {% if f.unresolved_env %}
      <div data-plugin-field-unresolved="{{ f.key }}" style="color:#ffaa00;font-size:9px;line-height:1.6;">
        {{ _('No value is in effect: config.toml refers to ${%(var)s}, which .env does not define and which has no fallback.', var=f.unresolved_env) }}
      </div>
      {% endif %}

      {% if f.secret_in_config %}
      <div data-plugin-field-inline-secret="{{ f.key }}" style="color:#ffaa00;font-size:9px;line-height:1.6;">
        {{ _('This is a literal value in config.toml, so a value saved to .env will not take effect until config.toml references the variable.') }}
      </div>
      {% endif %}

      {% if errors.get(f.key) %}
      <div data-plugin-field-error="{{ f.key }}" style="padding:4px 6px;border-radius:3px;background:rgba(255,68,68,0.08);border-left:3px solid #ff4444;color:#ff8888;font-size:10px;">{{ errors.get(f.key) }}</div>
      {% endif %}
    </div>
    {% endfor %}

    <div class="page-toolbar" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
      <button class="btn btn-primary btn-sm" type="submit">{{ _('Save plugin settings') }}</button>
      <span class="muted-copy" style="font-size:9px;">{{ _('Written to config.toml with a timestamped backup; secrets go to .env.') }}</span>
      <code style="font-size:9px;color:var(--color-text-muted);margin-left:auto;">{{ config_path }}</code>
    </div>
  </form>
</div>