<%- include("partials/layout-top", { title }) %>
<section class="card">
  <%- include("partials/page-header", {
    eyebrow: "Extensions",
    pageTitle: "Plugins",
    description: "Install, update, enable, and remove Lumi modules."
  }) %>
  <h2>Installed plugins</h2>
  <% if (!plugins.length) { %>
  <div class="empty-state">No plugins installed.</div>
  <% } else { %>
  <div class="table-wrap">
  <table class="table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Version</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% plugins.forEach((plugin) => { %>
      <tr>
        <td><%= plugin.name %></td>
        <td><%= plugin.version || "-" %></td>
        <td><%= plugin.enabled ? "Enabled" : "Disabled" %></td>
        <td>
          <form method="post" action="/admin/plugins/<%= plugin.id %>/toggle" class="inline-form">
            <input type="hidden" name="enabled" value="<%= plugin.enabled ? 'false' : 'true' %>" />
            <%- include("partials/state-button", {
              type: "submit",
              classes: "subtle",
              states: [
                { id: "idle", text: plugin.enabled ? "Disable" : "Enable" },
                { id: "loading", text: "Saving", spinner: true },
                { id: "success", text: "Saved" }
              ]
            }) %>
          </form>
          <form method="post" action="/admin/plugins/<%= plugin.id %>/update" class="inline-form">
            <%- include("partials/state-button", {
              type: "submit",
              classes: "subtle",
              states: [
                { id: "idle", text: "Update" },
                { id: "loading", text: "Updating", spinner: true },
                { id: "success", text: "Updated" }
              ]
            }) %>
          </form>
          <form method="post" action="/admin/plugins/<%= plugin.id %>/uninstall" class="inline-form" data-confirm-mode="modal" data-confirm-title="Uninstall <%= plugin.name %>?" data-confirm-text="This removes the plugin code and configuration records, then restarts Lumi." data-confirm-label="Uninstall plugin">
            <button type="submit" class="button danger">Uninstall</button>
          </form>
        </td>
      </tr>
      <% }) %>
    </tbody>
  </table>
  </div>
  <% } %>
</section>
<section class="card">
  <h2>Install plugin from ZIP</h2>
  <form method="post" action="/admin/plugins/upload" enctype="multipart/form-data" class="form-grid">
    <div class="field full input-action-row">
      <input type="file" name="plugin_zip" accept=".zip" required />
      <%- include("partials/state-button", {
        type: "submit",
        states: [
          { id: "idle", text: "Upload plugin" },
          { id: "loading", text: "Uploading", spinner: true },
          { id: "success", text: "Uploaded" }
        ]
      }) %>
    </div>
  </form>
</section>
<section class="card">
  <h2>Install plugin from git</h2>
  <form method="post" action="/admin/plugins/install" class="form-grid">
    <div class="field full">
      <label>Repository URL</label>
      <input name="url" placeholder="https://gitea.example.com/org/plugin.git" />
    </div>
    <%- include("partials/state-button", {
      type: "submit",
      states: [
        { id: "idle", text: "Install plugin" },
        { id: "loading", text: "Installing", spinner: true },
        { id: "success", text: "Installed" }
      ]
    }) %>
  </form>
</section>
<section class="card">
  <h2>Create local plugin</h2>
  <form method="post" action="/admin/plugins/create" class="form-grid">
    <div class="field">
      <label>Plugin ID</label>
      <input name="id" placeholder="my-plugin" />
    </div>
    <div class="field">
      <label>Name</label>
      <input name="name" />
    </div>
    <div class="field full">
      <label>Description</label>
      <input name="description" />
    </div>
    <%- include("partials/state-button", {
      type: "submit",
      states: [
        { id: "idle", text: "Create plugin" },
        { id: "loading", text: "Creating", spinner: true },
        { id: "success", text: "Created" }
      ]
    }) %>
  </form>
</section>
<%- include("partials/layout-bottom") %>
