{% extends "base.html" %}
{% block title %}Plugins{% endblock %}

{% block content %}
<div class="p-6 space-y-6">
  <!-- Header -->
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-gray-900">Plugins</h1>
      <p class="mt-1 text-sm text-gray-500">
        Plugin packages loaded from the
        <code class="bg-gray-100 px-1 py-0.5 rounded text-xs font-mono">plugins/</code>
        directory. Changes require a server restart to take effect.
      </p>
    </div>
    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
      {% if plugins %}bg-blue-100 text-blue-800{% else %}bg-gray-100 text-gray-600{% endif %}">
      <i class="fas fa-circle mr-2 text-xs {% if plugins %}text-blue-500{% else %}text-gray-400{% endif %}"></i>
      {{ plugins|length }} plugin{% if plugins|length != 1 %}s{% endif %} loaded
    </span>
  </div>

  {% if plugins %}
  <!-- Loaded plugin packages -->
  <div class="space-y-4">
    {% for plugin in plugins %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
      <div class="flex items-center justify-between px-5 py-4">
        <div class="flex items-center space-x-3">
          <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
            <i class="fas fa-puzzle-piece text-blue-600 text-sm"></i>
          </div>
          <div>
            <p class="text-sm font-semibold text-gray-900">{{ plugin.name }}</p>
            <p class="text-xs text-gray-400">
              id: <span class="font-mono">{{ plugin.id }}</span>
              {% if plugin.author %} &mdash; {{ plugin.author }}{% endif %}
            </p>
            {% if plugin.description %}
            <p class="text-xs text-gray-500 mt-0.5">{{ plugin.description }}</p>
            {% endif %}
          </div>
        </div>
        <div class="flex items-center space-x-3">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
            v{{ plugin.version }}
          </span>
          <a href="/api/v1/admin/plugins/{{ plugin.id }}/settings"
             class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
            Settings <i class="fas fa-external-link-alt ml-1 text-xs"></i>
          </a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

  {% else %}
  <!-- Empty state -->
  <div class="bg-white rounded-xl shadow-sm border border-dashed border-gray-300 p-12 text-center">
    <div class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
      <i class="fas fa-puzzle-piece text-gray-400 text-2xl"></i>
    </div>
    <h3 class="text-base font-semibold text-gray-900 mb-1">No plugins loaded</h3>
    <p class="text-sm text-gray-500 mb-4 max-w-sm mx-auto">
      Create a Python package in the
      <code class="bg-gray-100 px-1 py-0.5 rounded text-xs">plugins/</code>
      directory and restart the server.
    </p>
    <div class="bg-gray-50 rounded-lg p-4 text-left text-xs font-mono text-gray-600 max-w-md mx-auto">
      <p class="text-gray-400 mb-1"># plugins/my_plugin/__init__.py</p>
      <p>PLUGIN_META = {'{'}{"id": "my-plugin", "name": "My Plugin", "version": "1.0.0"}{'}'}</p>
      <p>&nbsp;</p>
      <p>def register(ctx):</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;from .routes import router</p>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;ctx.include_router(router, prefix="/my-plugin")</p>
    </div>
  </div>
  {% endif %}

  <!-- Reference card -->
  <div class="bg-blue-50 border border-blue-100 rounded-xl p-5">
    <h3 class="text-sm font-semibold text-blue-900 mb-3">
      <i class="fas fa-book mr-2"></i>Plugin API Quick Reference
    </h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs font-mono">
      <div>
        <p class="text-blue-700 font-semibold mb-1 font-sans text-xs">Import path</p>
        <p class="text-gray-700">from app.fastcms_plugin_api import PluginContext</p>
        <p class="text-gray-400 mt-2 font-sans">Used automatically — ctx is passed to register()</p>
      </div>
      <div>
        <p class="text-blue-700 font-semibold mb-1 font-sans text-xs">PluginContext methods</p>
        <p class="text-gray-700">ctx.include_router(router, prefix=...)</p>
        <p class="text-gray-700">ctx.on_record_create(collection, handler)</p>
        <p class="text-gray-700">ctx.add_admin_page(nav_id=..., label=..., icon=..., url=...)</p>
        <p class="text-gray-700">ctx.get_setting(key, default=None)</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}