{# roundtable/templates/settings/plugins.html #}
{% extends "base.html" %}
{% block title %}Settings — Plugins — Roundtable{% endblock %}
{% block content %}
{% set active_tab = "plugins" %}
{% include "settings/_tabs.html" %}

{# ── Restart banner ────────────────────────────────────────────────────────── #}
<div id="restart-banner"></div>

{# ── Installed Plugins ─────────────────────────────────────────────────────── #}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
  <div class="section-title">Installed Plugins</div>
  <form method="post" action="/settings/plugins/restart/"
        hx-post="/settings/plugins/restart/"
        hx-target="#restart-banner"
        hx-swap="outerHTML"
        onsubmit="return confirm('Restart the app now? This will briefly interrupt all monitoring.')"
        style="margin:0;">
    <button type="submit" class="btn btn-ghost btn-sm" style="font-size:0.78rem;">Restart App</button>
  </form>
</div>

{% if not discovered_plugins %}
<div class="card" style="color:var(--text-muted);font-size:0.9rem;margin-bottom:1.5rem;">
  No plugins installed. The table awaits new seats.
</div>
{% else %}
<div style="display:grid;gap:0.6rem;max-width:720px;margin-bottom:1.5rem;">
  {% for plugin in discovered_plugins %}
  {% set fail_reason = plugin_failures.get(plugin._dir) %}
  <div class="card" style="padding:0.85rem 1rem;display:flex;align-items:center;gap:0.75rem;">

    {# Status indicator #}
    {% if fail_reason %}
      <span style="width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;" title="{{ fail_reason }}"></span>
    {% elif plugin._enabled %}
      <span style="width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;"></span>
    {% else %}
      <span style="width:8px;height:8px;border-radius:50%;background:var(--border-mid);flex-shrink:0;"></span>
    {% endif %}

    {# Name + version + description #}
    <div style="flex:1;min-width:0;">
      <div style="display:flex;align-items:baseline;gap:0.5rem;flex-wrap:wrap;">
        <span style="font-weight:600;font-size:0.9rem;color:var(--text);">{{ plugin.get('name', plugin._dir) }}</span>
        <span style="font-size:0.75rem;color:var(--text-muted);">v{{ plugin.get('version', '?') }}</span>
        {% if fail_reason %}
          <span style="font-size:0.72rem;padding:0.1em 0.45em;border-radius:3px;
                       background:color-mix(in srgb,var(--red) 15%,var(--bg));
                       color:var(--red);">Error</span>
        {% elif plugin._enabled %}
          <span style="font-size:0.72rem;padding:0.1em 0.45em;border-radius:3px;
                       background:color-mix(in srgb,var(--green) 12%,var(--bg));
                       color:var(--green);">Enabled</span>
        {% else %}
          <span style="font-size:0.72rem;padding:0.1em 0.45em;border-radius:3px;
                       background:var(--bg-elevated);color:var(--text-muted);">Disabled</span>
        {% endif %}
      </div>
      {% if plugin.get('description') %}
      <div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.1rem;
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ plugin.description }}</div>
      {% endif %}
      {% if fail_reason %}
      <div style="font-size:0.77rem;color:var(--red);margin-top:0.1rem;
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
           title="{{ fail_reason }}">{{ fail_reason }}</div>
      {% endif %}
    </div>

    {# Settings button #}
    <a href="/settings/plugins/{{ plugin._dir }}/"
       class="btn btn-ghost btn-sm" style="flex-shrink:0;font-size:0.78rem;">Settings →</a>
  </div>
  {% endfor %}
</div>
{% endif %}

{# ── Plugin Repositories ───────────────────────────────────────────────────── #}
<div style="margin-bottom:2rem;max-width:720px;">
  <div class="section-title" style="margin-bottom:0.75rem;">Plugin Repositories</div>
  <p style="color:var(--text-muted);font-size:0.84rem;margin-bottom:0.75rem;">
    Repositories are remote <code>index.yaml</code> files that Scryer checks for available
    and updated plugins. Add repos from other developers to expand the plugin catalog.
  </p>
  {% include "settings/_plugin_repos.html" %}
</div>

{# ── Plugin Catalog ────────────────────────────────────────────────────────── #}
<div style="max-width:720px;">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
    <div class="section-title">Plugin Catalog</div>
    <button class="btn btn-ghost btn-sm" style="font-size:0.78rem;"
            hx-get="/settings/plugins/catalog/?refresh=1"
            hx-target="#plugin-catalog"
            hx-swap="outerHTML">
      Refresh
    </button>
  </div>

  {% if repos %}
  <div id="plugin-catalog"
       hx-get="/settings/plugins/catalog/"
       hx-trigger="load"
       hx-swap="outerHTML">
    <div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">Loading catalog…</div>
  </div>
  {% else %}
  <div id="plugin-catalog" style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
    Add a plugin repository above to browse available plugins.
  </div>
  {% endif %}
</div>

{% endblock %}