<!-- htmlhint doctype-first:false -->
<div class="space-y-6">
  <!-- Plugin Overview Card -->
  <div
    class="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-lg shadow-lg p-6 text-white"
  >
    <h2 class="text-2xl font-bold mb-4 flex items-center">
      <svg
        class="h-8 w-8 mr-3"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
        />
      </svg>
      Plugin Management
    </h2>

    {% if not plugins_enabled %}
    <div
      class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded mb-4"
    >
      <p class="font-bold">Plugins are currently disabled</p>
      <p class="text-sm">
        Set PLUGINS_ENABLED=true in your environment to enable plugin
        functionality.
      </p>
    </div>
    {% else %}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="text-center">
        <div class="text-3xl font-bold">{{ stats.total_plugins }}</div>
        <div class="text-purple-100 text-sm">Total Plugins</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ stats.enabled_plugins }}</div>
        <div class="text-purple-100 text-sm">Enabled</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">{{ stats.disabled_plugins }}</div>
        <div class="text-purple-100 text-sm">Disabled</div>
      </div>
      <div class="text-center">
        <div class="text-3xl font-bold">
          {{ stats.plugins_by_mode.enforce | default(0) }}
        </div>
        <div class="text-purple-100 text-sm">Enforce Mode</div>
      </div>
    </div>
    {% endif %}
  </div>

  {% if plugins_enabled %}
  <!-- Plugin Statistics Cards -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <!-- Hooks Distribution -->
    <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
      <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
        <svg
          class="h-6 w-6 mr-2 text-indigo-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"
          />
        </svg>
        Hook Points
      </h3>
      <div class="space-y-2">
        <div
          class="flex justify-between items-center p-2 bg-indigo-50 rounded dark:bg-indigo-900/20 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-colors border border-indigo-200 dark:border-indigo-800"
          onclick="filterByHook('')"
        >
          <span
            class="text-sm font-medium text-indigo-700 dark:text-indigo-300"
            >All Hooks</span
          >
          <span
            class="bg-indigo-200 text-indigo-900 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-indigo-800 dark:text-indigo-100"
          >
            {{ stats.total_plugins }}
          </span>
        </div>
        {% for hook, count in stats.plugins_by_hook.items() %}
        <div
          class="flex justify-between items-center p-2 bg-gray-50 rounded dark:bg-gray-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors"
          onclick="filterByHook('{{ hook }}')"
        >
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
            >{{ hook.replace('_', ' ').title() }}</span
          >
          <span
            class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-200"
          >
            {{ count }}
          </span>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Top Tags -->
    <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
      <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
        <svg
          class="h-6 w-6 mr-2 text-indigo-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
          />
        </svg>
        Popular Tags
      </h3>
      <div class="flex flex-wrap gap-2">
        <span
          class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 cursor-pointer hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors border border-indigo-300 dark:border-indigo-700"
          onclick="filterByTag('')"
        >
          All Tags
          <span class="ml-1 text-xs text-indigo-600 dark:text-indigo-300"
            >({{ stats.total_plugins }})</span
          >
        </span>
        {% for tag, count in stats.plugins_by_tag.items() %}
        <span
          class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
          onclick="filterByTag('{{ tag }}')"
        >
          {{ tag }}
          <span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
            >({{ count }})</span
          >
        </span>
        {% endfor %}
      </div>
    </div>

    <!-- Authors -->
    <div class="bg-white rounded-lg shadow p-6 dark:bg-gray-800">
      <h3 class="text-lg font-medium mb-4 dark:text-gray-200 flex items-center">
        <svg
          class="h-6 w-6 mr-2 text-indigo-600"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
          />
        </svg>
        Authors
      </h3>
      <div class="flex flex-wrap gap-2">
        <span
          class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 cursor-pointer hover:bg-indigo-200 dark:hover:bg-indigo-800 transition-colors border border-indigo-300 dark:border-indigo-700"
          onclick="filterByAuthor('')"
        >
          All Authors
          <span class="ml-1 text-xs text-indigo-600 dark:text-indigo-300"
            >({{ stats.total_plugins }})</span
          >
        </span>
        {% for author, count in stats.plugins_by_author.items() %}
        <span
          class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
          onclick="filterByAuthor('{{ author }}')"
        >
          {{ author }}
          <span class="ml-1 text-xs text-gray-500 dark:text-gray-400"
            >({{ count }})</span
          >
        </span>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Search and Filter Controls -->
  <div class="bg-white rounded-lg shadow p-4 dark:bg-gray-800">
    <div class="flex flex-col md:flex-row gap-4">
      <div class="flex-1">
        <input
          type="text"
          id="plugin-search"
          placeholder="Search plugins by name, description, or author..."
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
          oninput="filterPlugins()"
        />
      </div>
      <div class="flex gap-2">
        <select
          id="plugin-mode-filter"
          onchange="filterPlugins()"
          class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
        >
          <option value="">All Modes</option>
          <option value="enforce">Enforce</option>
          <option value="permissive">Permissive</option>
          <option value="disabled">Disabled</option>
        </select>
        <select
          id="plugin-status-filter"
          onchange="filterPlugins()"
          class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
        >
          <option value="">All Status</option>
          <option value="enabled">Enabled</option>
          <option value="disabled">Disabled</option>
        </select>
        <select
          id="plugin-hook-filter"
          onchange="filterPlugins()"
          class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
        >
          <option value="">All Hooks</option>
        </select>
        <select
          id="plugin-tag-filter"
          onchange="filterPlugins()"
          class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
        >
          <option value="">All Tags</option>
        </select>
        <select
          id="plugin-author-filter"
          onchange="filterPlugins()"
          class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
        >
          <option value="">All Authors</option>
        </select>
      </div>
    </div>
  </div>

  <!-- Plugin Grid -->
  <div
    class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
    id="plugin-grid"
  >
    {% for plugin in plugins %}
    <div
      class="plugin-card bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow dark:bg-gray-800"
      data-name="{{ plugin.name | lower }}"
      data-description="{{ plugin.description | lower }}"
      data-author="{{ plugin.author | lower }}"
      data-mode="{{ plugin.mode }}"
      data-status="{{ plugin.status }}"
      data-hooks="{{ plugin.hooks | join(',') if plugin.hooks else '' }}"
      data-tags="{{ plugin.tags | join(',') if plugin.tags else '' }}"
    >
      <!-- Plugin Header -->
      <div class="flex justify-between items-start mb-3">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
          {{ plugin.name }}
        </h3>
        <span class="text-xs text-gray-500 dark:text-gray-400"
          >v{{ plugin.version }}</span
        >
      </div>

      <!-- Description -->
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-2">
        {{ plugin.description[:100] }}{% if plugin.description|length > 100
        %}...{% endif %}
      </p>

      <!-- Author and Priority -->
      <div class="text-xs text-gray-500 dark:text-gray-400 mb-3">
        <div>Author: {{ plugin.author }}</div>
        <div>Priority: {{ plugin.priority }}</div>
      </div>

      <!-- Status and Mode -->
      <div class="flex items-center gap-2 mb-4 flex-wrap">
        <!-- Status Indicator -->
        <div class="flex items-center">
          {% if plugin.status == 'enabled' %}
          <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
          <span class="text-sm text-green-600 dark:text-green-400"
            >Enabled</span
          >
          {% else %}
          <span class="w-2 h-2 bg-gray-400 rounded-full mr-2"></span>
          <span class="text-sm text-gray-500 dark:text-gray-400">Disabled</span>
          {% endif %}
        </div>

        <!-- Mode Badge -->
        {% if plugin.mode == 'enforce' %}
        <span
          class="px-2 py-1 bg-red-100 text-red-800 text-xs font-medium rounded dark:bg-red-900 dark:text-red-200"
        >
          Enforce
        </span>
        {% elif plugin.mode == 'permissive' %}
        <span
          class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded dark:bg-blue-900 dark:text-blue-200"
        >
          Permissive
        </span>
        {% else %}
        <span
          class="px-2 py-1 bg-gray-100 text-gray-800 text-xs font-medium rounded dark:bg-gray-700 dark:text-gray-300"
        >
          Disabled
        </span>
        {% endif %}

        <!-- Implementation Badge -->
        {% if plugin.implementation == 'Rust' %}
        <span
          class="px-2 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded dark:bg-orange-900 dark:text-orange-200"
          title="Rust-accelerated implementation (5-100x faster)"
        >
          🦀 Rust
        </span>
        {% elif plugin.implementation == 'Python' %}
        <span
          class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded dark:bg-blue-900 dark:text-blue-200"
          title="Pure Python implementation"
        >
          🐍 Python
        </span>
        {% endif %}
      </div>

      <!-- Tags -->
      {% if plugin.tags %}
      <div class="flex flex-wrap gap-1 mb-4">
        {% for tag in plugin.tags[:3] %}
        <span
          class="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded dark:bg-gray-700 dark:text-gray-300"
        >
          {{ tag }}
        </span>
        {% endfor %} {% if plugin.tags|length > 3 %}
        <span class="px-2 py-1 text-gray-500 text-xs">
          +{{ plugin.tags|length - 3 }} more
        </span>
        {% endif %}
      </div>
      {% endif %}

      <!-- Hooks -->
      {% if plugin.hooks %}
      <div class="text-xs text-gray-500 dark:text-gray-400 mb-4">
        <div class="font-medium mb-1">Hooks:</div>
        <div class="flex flex-wrap gap-1">
          {% for hook in plugin.hooks[:2] %}
          <span class="text-xs">{{ hook.replace('_', ' ') }}</span>
          {% if not loop.last %}<span>,</span>{% endif %} {% endfor %} {% if
          plugin.hooks|length > 2 %}
          <span>... ({{ plugin.hooks|length }} total)</span>
          {% endif %}
        </div>
      </div>
      {% endif %}

      <!-- Action Button -->
      <button
        onclick="showPluginDetails('{{ plugin.name }}')"
        class="w-full mt-4 px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors"
      >
        View Details →
      </button>
    </div>
    {% endfor %}
  </div>

  {% if not plugins %}
  <div class="bg-gray-50 rounded-lg p-8 text-center dark:bg-gray-800">
    <svg
      class="mx-auto h-12 w-12 text-gray-400"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
      />
    </svg>
    <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-gray-100">
      No plugins found
    </h3>
    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
      No plugins are currently loaded in the system.
    </p>
  </div>
  {% endif %} {% endif %}
</div>

<!-- Plugin Details Modal (hidden by default) -->
<div
  id="plugin-details-modal"
  class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
>
  <div
    class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white dark:bg-gray-800"
  >
    <div class="mt-3">
      <div class="flex justify-between items-start mb-4">
        <h3
          class="text-lg font-medium text-gray-900 dark:text-gray-100"
          id="modal-plugin-name"
        >
          Plugin Details
        </h3>
        <button
          onclick="closePluginDetails()"
          class="text-gray-400 hover:text-gray-500"
        >
          <svg
            class="h-6 w-6"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
      <div
        id="modal-plugin-content"
        class="mt-2 text-sm text-gray-500 dark:text-gray-400"
      >
        <!-- Content will be loaded here -->
      </div>
    </div>
  </div>
</div>
