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

{% block cms_content %}
<div class="cms-section-header">
  <h2><i class="fa-solid fa-code-branch me-2"></i>Version Management</h2>
  <span style="background:rgba(22,81,123,.12);color:#16517b;border:1px solid rgba(22,81,123,.25);border-radius:20px;padding:.3rem .9rem;font-size:.8rem;font-weight:700">
    Current Platform: v{{ cms_version }}
  </span>
</div>

<div class="cms-card mb-3">
  <div class="d-flex align-items-center gap-4 flex-wrap">
    <div>
      <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem">Platform Version</div>
      <div style="font-size:2rem;font-weight:800;color:#16517b;letter-spacing:-.02em">v{{ cms_version }}</div>
      <div style="font-size:.8rem;color:var(--cms-muted);margin-top:.25rem">
        Year <strong style="color:var(--cms-text)">20{{ cms_version|slice:":2" }}</strong>
        &nbsp;&middot;&nbsp;
        Month <strong style="color:var(--cms-text)">{{ cms_version|slice:"3:"|cut:".1"|cut:".2"|cut:".3"|cut:".4" }}</strong>
        &nbsp;&middot;&nbsp;
        Release <strong style="color:var(--cms-text)">{{ cms_version|slice:"-1:" }}</strong>
      </div>
    </div>
    <div style="flex:1;min-width:200px;border-left:1px solid var(--cms-border);padding-left:1.5rem">
      <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem">Tenant Summary</div>
      <div class="d-flex gap-4 flex-wrap">
        <div>
          <div style="font-size:1.4rem;font-weight:700;color:var(--cms-text)">{{ tenants|length }}</div>
          <div style="font-size:.75rem;color:var(--cms-muted)">Total Tenants</div>
        </div>
        <div>
          <div style="font-size:1.4rem;font-weight:700;color:#15803d">{{ up_to_date }}</div>
          <div style="font-size:.75rem;color:var(--cms-muted)">Up to Date</div>
        </div>
        <div>
          <div style="font-size:1.4rem;font-weight:700;color:#c2410c">{{ outdated }}</div>
          <div style="font-size:.75rem;color:var(--cms-muted)">Outdated</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cms-card">
  <table class="cms-table">
    <thead>
      <tr>
        <th>Tenant</th>
        <th>Domain</th>
        <th>Plan</th>
        <th>Panel Version</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for t in tenants %}
      <tr>
        <td>
          {% if t.logo %}
            <img src="{{ t.logo.url }}" alt="" style="height:22px;border-radius:3px;margin-right:6px;">
          {% else %}
            <span style="display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:3px;background:{{ t.accent_colour }};color:#000;font-size:.65rem;font-weight:700;margin-right:6px;">{{ t.name|slice:":2"|upper }}</span>
          {% endif %}
          <strong>{{ t.name }}</strong>
          {% if t.is_master %}<span class="badge-premium ms-1">Master</span>{% endif %}
        </td>
        <td style="font-size:.85rem;color:var(--cms-muted)">
          <a href="https://{{ t.primary_domain }}" target="_blank">{{ t.primary_domain }}</a>
        </td>
        <td style="font-size:.82rem">{{ t.get_plan_display }}</td>
        <td>
          {% if t.cms_version %}
            <code style="font-size:.82rem;color:var(--cms-text)">v{{ t.cms_version }}</code>
          {% else %}
            <span style="color:var(--cms-muted);font-size:.8rem">Not set</span>
          {% endif %}
        </td>
        <td>
          {% if t.cms_version == cms_version %}
            <span class="badge-resolved"><i class="fa-solid fa-circle-check me-1"></i>Up to Date</span>
          {% elif t.cms_version %}
            <span class="badge-open"><i class="fa-solid fa-triangle-exclamation me-1"></i>Outdated</span>
          {% else %}
            <span class="badge-closed">Unknown</span>
          {% endif %}
        </td>
        <td>
          <div class="d-flex gap-2 align-items-center">
            <a href="{% url 'cms_tenant_edit' t.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.75rem">
              <i class="fa-solid fa-pen"></i>
            </a>
            {% if t.cms_version != cms_version %}
            <form method="post" action="{% url 'cms_version_upgrade' t.pk %}">
              {% csrf_token %}
              <button type="submit" class="btn-cms" style="padding:.3rem .8rem;font-size:.75rem">
                <i class="fa-solid fa-arrow-up me-1"></i>Upgrade to v{{ cms_version }}
              </button>
            </form>
            {% endif %}
          </div>
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="6" style="text-align:center;color:var(--cms-muted);padding:2rem">No tenants found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}