{{ define "content" }}
<h1>{{ T "plugins.manage.title" }}</h1>

<div class="card" style="margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem">
  <form method="get" action="/plugins" style="display:flex; gap:.5rem; flex:1">
    <input type="text" name="q" placeholder="{{ T "plugins.manage.search" }}" style="flex:1; max-width:320px">
    <button class="btn secondary" type="submit">{{ T "plugins.manage.search_btn" }}</button>
  </form>
  <a class="btn" href="/plugins/store">{{ T "plugins.manage.store_link" }}</a>
</div>

<div id="manage-msg" class="muted" style="min-height:1.4rem; margin-bottom:.5rem" aria-live="polite"></div>

<div id="plugin-manager"
     x-data='JSON.parse(document.getElementById("plugins-data").textContent || "{}")'>
  <script id="plugins-data" type="application/json">{{ .pluginsJSON }}</script>

  <template x-if="!items || items.length === 0">
    <div class="card"><p class="empty">{{ T "plugins.manage.empty" }}</p></div>
  </template>

  <div class="grid" style="grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem">
    <template x-for="p in items" :key="p.id">
      <div class="card">
        <div style="display:flex; justify-content:space-between; align-items:baseline">
          <h3 style="margin:.2rem 0" x-text="p.name"></h3>
          <span class="tag" x-text="'v' + p.version"></span>
        </div>
        <p class="muted" x-text="p.id" style="font-size:.8rem; word-break:break-all"></p>
        <div style="display:flex; gap:.4rem; align-items:center; margin-bottom:.6rem; flex-wrap:wrap">
          <span class="tag" x-show="p.enabled" style="background:rgba(34,197,94,.2); color:#15803d">{{ T "plugins.manage.enabled" }}</span>
          <span class="tag" x-show="!p.enabled" style="background:rgba(148,163,184,.3); color:#475569">{{ T "plugins.manage.disabled" }}</span>
          <span class="tag" x-text="p.trust"></span>
          <span class="tag" x-show="p.hasUpdate" style="background:rgba(251,146,60,.25); color:#c2410c" x-text="'{{ T "plugins.manage.update_available" }} v' + p.latest"></span>
        </div>
        <div style="display:flex; gap:.5rem; flex-wrap:wrap">
          <a class="btn secondary" x-show="p.enabled" :href="'/plugins/' + encodeURIComponent(p.id) + '/settings'">{{ T "plugins.settings.title" }}</a>
          <button class="btn secondary" x-show="p.enabled"
                  @click="act('/api/plugins/' + p.id + '/disable', 'POST')">{{ T "plugins.manage.action.disable" }}</button>
          <button class="btn" x-show="!p.enabled"
                  @click="act('/api/plugins/' + p.id + '/enable', 'POST')">{{ T "plugins.manage.action.enable" }}</button>
          <button class="btn" x-show="p.hasUpdate"
                  @click="act('/api/plugins/' + p.id + '/update', 'POST')">{{ T "plugins.manage.action.update" }}</button>
          <a class="btn secondary"
             :href="'/api/plugins/' + encodeURIComponent(p.id) + '/export?version=' + encodeURIComponent(p.version)"
             :download="p.id + '-' + p.version + '.tar.gz'">{{ T "plugins.manage.action.export" }}</a>
          <button class="btn danger"
                  @click="if (confirm('{{ T "plugins.manage.confirm_uninstall" }} ' + p.name + '?')) act('/api/plugins/' + p.id + '/uninstall', 'POST')">{{ T "plugins.manage.action.uninstall" }}</button>
        </div>
      </div>
    </template>
  </div>
</div>

<div class="card" style="margin-top:1.5rem">
  <h2>{{ T "plugins.manage.import_title" }}</h2>
  <p class="muted">{{ T "plugins.manage.import_help" }}</p>
  <form id="import-form" enctype="multipart/form-data" style="display:flex; gap:.5rem; align-items:center; flex-wrap:wrap">
    <input type="file" name="plugin_file" accept=".tar.gz,.zip" required>
    <button class="btn" type="submit">{{ T "plugins.manage.import_btn" }}</button>
  </form>
</div>

<script>
(function () {
  var msg = document.getElementById('manage-msg');
  window.act = function (url, method) {
    msg.textContent = '⏳ …';
    fetch(url, { method: method }).then(function (res) {
      return res.json().catch(function () { return {}; }).then(function (j) {
        if (res.ok && j.success !== false) { window.location.reload(); return; }
        msg.textContent = '✗ ' + (j.message || ('HTTP ' + res.status));
      });
    }).catch(function (e) { msg.textContent = '✗ ' + e; });
  };

  document.getElementById('import-form').addEventListener('submit', function (ev) {
    ev.preventDefault();
    var fd = new FormData(ev.target);
    msg.textContent = '⏳ import…';
    fetch('/api/plugins/import-from-file', { method: 'POST', body: fd }).then(function (res) {
      return res.text().then(function (t) {
        if (res.ok) { window.location.reload(); return; }
        msg.textContent = '✗ ' + t;
      });
    }).catch(function (e) { msg.textContent = '✗ ' + e; });
  });
})();
</script>
{{ end }}