{% extends "cms/base.html" %}
{% block title %}{{ heading }}{% endblock %}
{% block page_title %}{{ heading }}{% endblock %}

{% block extra_head %}
<style>
  .billing-badge {
    display:inline-flex;align-items:center;gap:.3rem;
    border-radius:20px;padding:.2rem .65rem;
    font-size:.7rem;font-weight:700;letter-spacing:.02em;
  }
  .billing-monthly  { background:rgba(109,40,217,.08);color:#6d28d9;border:1px solid rgba(109,40,217,.2); }
  .billing-annual   { background:rgba(3,49,82,.08);color:#033152;border:1px solid rgba(3,49,82,.2); }
  .billing-one-time { background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0; }
</style>
{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>{{ heading }}{% if plugins %} <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ plugins|length }})</span>{% endif %}</h2>
  <a href="{% if is_upgrade %}{% url 'cms_plugin_upgrade_add' %}{% else %}{% url 'cms_plugin_add' %}{% endif %}"
     class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add {% if is_upgrade %}Upgrade{% else %}Plugin{% endif %}</a>
</div>

<div class="cms-card" style="padding:0;overflow:hidden">
  {% if plugins %}
  <table class="cms-table" style="margin:0">
    <thead>
      <tr>
        <th style="width:32px"></th>
        <th style="width:40px">#</th>
        <th style="text-align:left">Title</th>
        <th>Section</th>
        <th>Type</th>
        <th style="text-align:center">Billing</th>
        <th style="text-align:center">Price</th>
        <th style="text-align:center">Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="sort-tbody">
      {% for p in plugins %}
      <tr data-id="{{ p.pk }}">
        <td class="drag-handle" title="Drag to reorder"><i class="fa-solid fa-grip-vertical"></i></td>
        <td>{{ forloop.counter }}</td>
        <td style="text-align:left">
          <div style="font-weight:600">{{ p.title }}</div>
          {% if p.blurb %}<div style="font-size:.7rem;color:var(--cms-muted)">{{ p.blurb }}</div>{% endif %}
        </td>
        <td><span class="badge-source">{{ p.get_section_display }}</span></td>
        <td>
          {% if p.kind %}
            <span style="background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#16517b">{{ p.kind }}</span>
          {% else %}<span style="color:var(--cms-muted);font-size:.8rem">&mdash;</span>{% endif %}
        </td>
        <td style="text-align:center">
          {% if p.price %}<span class="billing-badge billing-monthly"><i class="fa-solid fa-rotate" style="font-size:.6rem"></i>Monthly</span>{% endif %}
          {% if p.annual_price %}<span class="billing-badge billing-annual"><i class="fa-solid fa-calendar" style="font-size:.6rem"></i>Annual</span>{% endif %}
          {% if not p.price and not p.annual_price %}<span class="billing-badge billing-one-time">One time</span>{% endif %}
        </td>
        <td style="text-align:center">
          {% if p.price %}
          <div style="font-weight:600;font-size:.88rem;color:#6d28d9">
            &pound;{{ p.price }}<span style="font-size:.68rem;font-weight:400;color:var(--cms-muted)">/mo</span>
          </div>
          {% endif %}
          {% if p.annual_price %}
          <div style="font-weight:600;font-size:.88rem;color:#033152">
            &pound;{{ p.annual_price }}<span style="font-size:.68rem;font-weight:400;color:var(--cms-muted)">/yr</span>
          </div>
          {% endif %}
          {% if p.price_label %}<div style="font-size:.72rem;color:var(--cms-muted)">{{ p.price_label }}</div>{% endif %}
          {% if not p.price and not p.annual_price and not p.price_label %}&mdash;{% endif %}
        </td>
        <td style="text-align:center">
          {% if p.is_active %}<span class="badge-resolved">Active</span>{% else %}<span class="badge-closed">Off</span>{% endif %}
        </td>
        <td style="white-space:nowrap">
          <a href="{% url 'cms_plugin_toggle_visibility' p.pk %}"
             class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#e0a72e;"
             title="{% if p.is_active %}Hide{% else %}Show{% endif %}">
            <i class="fa-solid {% if p.is_active %}fa-eye{% else %}fa-eye-slash{% endif %}"></i>
          </a>
          <a href="{% url 'cms_plugin_edit' p.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem"><i class="fa-solid fa-pen"></i></a>
          <form method="post" action="{% url 'cms_plugin_delete' p.pk %}" style="display:inline" onsubmit="return confirm('Remove this {% if is_upgrade %}upgrade{% else %}plugin{% endif %}?')">{% csrf_token %}<button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem;font-size:.8rem"><i class="fa-solid fa-trash"></i></button></form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div style="text-align:center;padding:3rem 1rem;color:var(--cms-muted)">
    <i class="fa-solid {% if is_upgrade %}fa-server{% else %}fa-puzzle-piece{% endif %}" style="font-size:2rem;opacity:.15;display:block;margin-bottom:.6rem"></i>
    Nothing here yet.
    <a href="{% if is_upgrade %}{% url 'cms_plugin_upgrade_add' %}{% else %}{% url 'cms_plugin_add' %}{% endif %}">Add the first one.</a>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>initDragSort('#sort-tbody','Plugin','{% url "cms_sort_items" %}','{{ csrf_token }}');</script>
{% endblock %}