{# Plugin accordion sections — rendered both on initial settings load
   and as HTMX swap target when a plugin is toggled or settings change. #}
<div id="plugin-sections">
{% for p in plugins %}
  <h3 id="acc-head-plugin-{{ p.name }}">
    <button type="button"
            class="acc-toggle flex items-center justify-between w-full px-5 py-4 font-medium text-sm text-app-text bg-app-surface-alt hover:bg-app-surface-hover border-b border-app-border gap-3"
            data-target="#acc-body-plugin-{{ p.name }}" aria-expanded="false">
      <span class="flex items-center gap-2">
        {% if p.icon %}<span class="text-base">{{ p.icon }}</span>{% endif %}
        {{ p.display_name }}
        {% if p.enabled %}
        <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-800">ON</span>
        {% else %}
        <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-app-surface text-app-text-muted">OFF</span>
        {% endif %}
      </span>
      <svg class="acc-arrow w-3 h-3 shrink-0 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 10 6"><path d="M1 1 5 5 9 1"/></svg>
    </button>
  </h3>
  <div id="acc-body-plugin-{{ p.name }}" class="hidden" aria-labelledby="acc-head-plugin-{{ p.name }}">
    <div class="px-5 py-4 bg-app-surface border-b border-app-border">
      {% if p.description %}
      <p class="text-xs text-app-text-muted mb-3">{{ p.description }}</p>
      {% endif %}

      {# Enable/disable toggle #}
      <div class="flex items-center justify-between mb-4">
        <label class="text-sm font-medium text-app-text-subtle">Enabled</label>
        <button type="button"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 {{ 'bg-app-primary' if p.enabled else 'bg-app-surface-alt border border-app-border' }}"
                hx-post="/api/plugins/{{ p.name }}/toggle"
                hx-target="#plugin-sections"
                hx-swap="outerHTML">
          <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200 {{ 'translate-x-6' if p.enabled else 'translate-x-1' }}"></span>
        </button>
      </div>

      {# Auto-generated fields from schema #}
      {% if p.fields %}
      <form class="space-y-3"
            hx-post="/api/plugins/{{ p.name }}/settings"
            hx-target="#plugin-sections"
            hx-swap="outerHTML"
            hx-trigger="change">
        {% for f in p.fields %}
          <div>
            <label class="block text-sm font-medium text-app-text-subtle mb-1">{{ f.title }}</label>
            {% if f.type == 'boolean' %}
              <label class="relative inline-flex items-center cursor-pointer">
                <input type="hidden" name="{{ f.key }}" value="false">
                <input type="checkbox" name="{{ f.key }}" value="true"
                       class="sr-only peer"
                       {{ 'checked' if p.config.get(f.key, f.default) }}>
                <div class="w-9 h-5 bg-app-surface-alt border border-app-border rounded-full peer peer-checked:bg-app-primary after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full"></div>
              </label>
            {% elif f.enum %}
              <select name="{{ f.key }}"
                      class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
                {% for opt in f.enum %}
                <option value="{{ opt }}" {{ 'selected' if p.config.get(f.key, f.default) == opt }}>{{ opt }}</option>
                {% endfor %}
              </select>
            {% elif f.type in ('integer', 'number') %}
              <input type="number" name="{{ f.key }}"
                     value="{{ p.config.get(f.key, f.default or '') }}"
                     {% if f.minimum is not none %}min="{{ f.minimum }}"{% endif %}
                     {% if f.maximum is not none %}max="{{ f.maximum }}"{% endif %}
                     class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
            {% elif f.ui_type == 'password' %}
              <input type="password" name="{{ f.key }}"
                     value="{{ p.config.get(f.key, '') }}"
                     placeholder="{{ f.placeholder }}"
                     class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
            {% else %}
              <input type="text" name="{{ f.key }}"
                     value="{{ p.config.get(f.key, f.default or '') }}"
                     placeholder="{{ f.placeholder }}"
                     class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
            {% endif %}
            {% if f.description %}
            <p class="mt-1 text-xs text-app-text-muted">{{ f.description }}</p>
            {% endif %}
          </div>
        {% endfor %}
      </form>
      {% endif %}
      {% if p.name == 'stats' %}
      <div class="mt-3">
        <a hx-get="/plugins/stats/report" hx-target="body" hx-swap="innerHTML"
           href="/plugins/stats/report"
           class="text-sm text-app-primary hover:underline">View stats →</a>
      </div>
      {% endif %}
    </div>
  </div>
{% endfor %}
</div>