{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
/plugins/ — the installed plugin list.

The list comes from /plugins/fetchPlugins, which is gated on pluginManager
server side. Nothing on this page is rendered from plugin-supplied HTML: a
plugin's name and description are author-controlled strings and are bound with
ng-bind only, never ng-bind-html.
{% endcomment %}

{% block title %}Plugins{% endblock %}

{% block styles %}
  {% include "pluginHolder/_styles.html" %}
{% endblock %}

{% block content %}
<div ng-controller="pluginListController">

  {{ hookCatalog|json_script:"cpPluginHooks" }}
  {{ pluginsRoot|json_script:"cpPluginsRoot" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Plugins</h1>
      <p class="cp-plugin-muted mb-0 small">
        Code that extends CloudPanel by attaching to panel events.
        Running CloudPanel {{ panelVersion }} &middot;
        <span class="cp-plugin-mono">{{ pluginsRoot }}</span>
      </p>
    </div>
    <div class="d-flex gap-2">
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="load()" ng-disabled="busy">
        <i class="fas fa-rotate me-1" aria-hidden="true"></i>Refresh
      </button>
      <a href="/plugins/available" class="btn btn-primary btn-sm">
        <i class="fas fa-plus me-1" aria-hidden="true"></i>Add a plugin
      </a>
    </div>
  </div>

  {% include "pluginHolder/_warning.html" %}

  <div class="alert alert-danger py-2 px-3 mt-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-circle-exclamation me-1" aria-hidden="true"></i>
    <span ng-bind="errorMessage"></span>
  </div>
  <div class="alert alert-success py-2 px-3 mt-3" ng-show="okMessage" ng-cloak role="status">
    <i class="fas fa-circle-check me-1" aria-hidden="true"></i>
    <span ng-bind="okMessage"></span>
  </div>

  <div class="cp-plugin-card p-3 p-md-4 mt-3">

    <div class="row g-2 align-items-center mb-3">
      <div class="col-md-6">
        <div class="input-group">
          <span class="input-group-text"><i class="fas fa-magnifying-glass" aria-hidden="true"></i></span>
          <input type="search" class="form-control" ng-model="search"
                 placeholder="Search by name, slug or author…"
                 aria-label="Search installed plugins">
        </div>
      </div>
      <div class="col-md-6 text-md-end cp-plugin-muted small" ng-cloak>
        <span ng-bind="plugins.length"></span> installed &middot;
        <span ng-bind="enabledCount()"></span> enabled
      </div>
    </div>

    <div class="cp-plugin-empty" ng-show="!busy && plugins.length === 0" ng-cloak>
      <i class="fas fa-puzzle-piece fa-2x mb-3" aria-hidden="true"></i>
      <p class="mb-2">No plugins are installed.</p>
      <a href="/plugins/available" class="btn btn-outline-primary btn-sm">Browse available plugins</a>
    </div>

    <div class="table-responsive" ng-show="plugins.length > 0" ng-cloak>
      <table class="table table-hover align-middle mb-0">
        <thead>
          <tr>
            <th scope="col">Plugin</th>
            <th scope="col">Version</th>
            <th scope="col">Hooks</th>
            <th scope="col">State</th>
            <th scope="col">Source</th>
            <th scope="col" class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="plugin in plugins | filter:matches">
            <td>
              <a class="fw-semibold text-decoration-none"
                 ng-href="/plugins/detail/{$ plugin.slug $}" ng-bind="plugin.name"></a>
              <div class="small cp-plugin-muted">
                <span class="cp-plugin-mono" ng-bind="plugin.slug"></span>
                <span ng-show="plugin.author"> &middot; <span ng-bind="plugin.author"></span></span>
              </div>
              <div class="small text-danger mt-1" ng-show="plugin.loadError" ng-bind="plugin.loadError"></div>
            </td>
            <td>
              <span ng-bind="plugin.version"></span>
              <div class="small cp-plugin-muted" ng-bind="plugin.compatibility"></div>
            </td>
            <td>
              <span class="cp-plugin-chip" ng-repeat="hook in plugin.liveHooks" ng-bind="hook"></span>
              <span class="cp-plugin-chip cp-plugin-chip--info"
                    ng-repeat="hook in plugin.declaredHooks"
                    ng-show="plugin.liveHooks.indexOf(hook) === -1"
                    title="Declared in the manifest but not currently bound">
                <span ng-bind="hook"></span> (declared)
              </span>
              <span class="cp-plugin-muted small"
                    ng-show="!plugin.liveHooks.length && !plugin.declaredHooks.length">none</span>
            </td>
            <td>
              <span class="cp-plugin-dot"
                    ng-class="{'cp-plugin-dot--live': plugin.loaded,
                               'cp-plugin-dot--bad': plugin.enabled && !plugin.loaded}"></span>
              <span ng-bind="stateLabel(plugin)"></span>
            </td>
            <td><span class="small cp-plugin-muted" ng-bind="plugin.sourceLabel"></span></td>
            <td class="text-end">
              <div class="btn-group btn-group-sm" role="group" aria-label="Plugin actions">
                <button type="button" class="btn btn-outline-primary"
                        ng-show="!plugin.enabled" ng-disabled="busy"
                        ng-click="enable(plugin)">Enable</button>
                <button type="button" class="btn btn-outline-secondary"
                        ng-show="plugin.enabled" ng-disabled="busy"
                        ng-click="disable(plugin)">Disable</button>
                <a class="btn btn-outline-secondary" ng-href="/plugins/settings/{$ plugin.slug $}">Settings</a>
                <a class="btn btn-outline-secondary" ng-href="/plugins/detail/{$ plugin.slug $}">Details</a>
                <button type="button" class="btn btn-outline-danger"
                        ng-disabled="busy" ng-click="uninstall(plugin)">Uninstall</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="cp-plugin-card p-3 p-md-4 mt-4">
    <h2 class="h6 mb-1">Hook points</h2>
    <p class="cp-plugin-muted small">
      The {{ hookCount }} events a plugin can attach to. Full payload documentation is in
      <span class="cp-plugin-mono">docs/PLUGINS.md</span>.
    </p>
    <div class="cp-plugin-hook" ng-repeat="hook in hooks" ng-cloak>
      <div class="d-flex flex-wrap justify-content-between gap-2">
        <code class="fw-semibold" ng-bind="hook.name"></code>
        <span class="cp-plugin-muted small">
          <span ng-bind="hook.bound.length"></span> callable(s) bound
        </span>
      </div>
      <div class="small mt-1" ng-bind="hook.summary"></div>
      <div class="small cp-plugin-muted">Fires <span ng-bind="hook.fires"></span></div>
      <div class="mt-2">
        <span class="cp-plugin-chip" ng-repeat="field in hook.context">
          <code ng-bind="field.key"></code>
        </span>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'pluginHolder/pluginHolder.js' %}"></script>
{% endblock %}