{% extends "admin_base.html" %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

{% block page_title %}Plugins{% endblock %}
{% block admin_content %}
<main class="mx-auto w-full max-w-screen-2xl space-y-6">
  {% if contract_diagnostics %}
  <section class="rounded-xl border border-danger/40 bg-danger/10 p-4 text-danger" role="alert">
    <h2 class="font-semibold">Some plugin definitions need attention</h2>
    <p class="mt-1 text-sm">Their declarative actions are unavailable until these definitions are corrected.</p>
    <ul class="mt-3 list-inside list-disc space-y-1 text-sm">
    {% for diagnostic in contract_diagnostics %}
      <li><strong>{{ diagnostic.plugin }}</strong>: {{ diagnostic.message }}</li>
    {% endfor %}
    </ul>
  </section>
  {% endif %}

  <header class="flex flex-col gap-4 rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-6">
    <div>
      <h1 class="text-xl font-semibold text-foreground">Plugin registry</h1>
      <p class="mt-1 text-sm text-muted">Create and maintain your platform extensions.</p>
    </div>
    <button type="button" data-registry-action="create" class="blocks-button blocks-button-primary min-h-11">
      <i class="fas fa-plus" aria-hidden="true"></i> New plugin
    </button>
  </header>

  <div data-registry-notice class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div>
  <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3" aria-label="Registered plugins">
    <button type="button" data-registry-action="create" class="flex min-h-48 flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed border-divider bg-canvas p-6 text-muted transition-colors hover:border-brand  focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">
      <i class="fas fa-plus-circle text-3xl" aria-hidden="true"></i>
      <span class="font-semibold">Create a plugin</span>
    </button>

    {% for plugin in plugins %}
    <article class="flex min-w-0 flex-col gap-4 rounded-2xl border border-divider bg-surface p-5 shadow-sm transition-shadow hover:shadow-md">
      <div class="flex min-w-0 items-center gap-3">
        <span class="flex size-12 shrink-0 items-center justify-center rounded-xl bg-canvas text-xl text-brand" aria-hidden="true">
          <i class="fas {{ plugin.manifest.icon | default(value='fa-plug') }}"></i>
        </span>
        <div class="min-w-0">
          <h2 class="break-words font-semibold text-foreground">{{ plugin.manifest.name }}</h2>
          <p class="mt-0.5 text-xs text-muted">Version {{ plugin.manifest.version }}</p>
        </div>
      </div>
      <p class="min-w-0 flex-1 break-words text-sm leading-6 text-muted">{{ plugin.manifest.description | default(value="No description provided.") }}</p>
      <div class="flex flex-wrap justify-end gap-2 border-t border-divider pt-3">
        <a href="/plugins/core-plugin-registry/editor/{{ plugin.manifest.name }}" class="blocks-button blocks-button-secondary min-h-10">
          <i class="fas fa-code" aria-hidden="true"></i> Edit code
        </a>
      </div>
    </article>
    {% endfor %}
  </section>
</main>

{{ modal::modal(id="createModal", title="Create New Plugin", body_html='<div data-registry-form-notice class="blocks-workspace-notice" role="status" aria-live="polite" tabindex="-1" hidden></div><div id="create-plugin-form-fields"><div class="text-sm text-muted">Loading…</div></div>') }}
{% endblock %}