{% extends "base.html" %}
{% block title %}Plugins — {{ app_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>Plugin manager</h1>
    <p class="subtitle">Check, install, and uninstall optional training / data-prep extras</p>
  </div>
  <div class="page-header-actions">
    <button type="button" class="btn btn-secondary" id="refresh-plugins-btn">Refresh</button>
  </div>
</div>

<div class="action-card" style="margin-bottom:1.25rem" id="plugin-manager-status">
  <div class="section-toolbar">
    <h3 style="margin:0">Manager status</h3>
    <label class="toggle-row" style="margin:0">
      <input type="checkbox" id="auto-install-toggle" disabled>
      <span>Auto-install on train</span>
    </label>
  </div>
  <p class="muted" id="plugin-status-summary" style="margin:.5rem 0 0">Loading…</p>
</div>

<div id="plugin-extras-grid" class="action-grid" style="grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem">
  <div class="muted">Loading extras…</div>
</div>

<pre id="plugin-log" class="muted" style="margin-top:1.25rem;white-space:pre-wrap;font-size:.8rem;background:rgba(0,0,0,.04);padding:1rem;border-radius:10px;min-height:3rem">—</pre>
{% endblock %}
{% block scripts %}
<script src="/static/js/plugins_ui.js"></script>
{% endblock %}