{% extends 'base.html' %}
{% block page_title %}Super Admin{% endblock %}
{% block content %}
<div class="mb-4">
  <h4 class="fw-bold mb-1">🛡️ Super Admin Dashboard</h4>
  <p class="text-muted mb-0" style="font-size:0.85rem;">Manage all organisations on the platform</p>
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#1b6b3a,#2e8b57);">
      <div class="d-flex justify-content-between">
        <div><div class="stat-value">{{ stats.orgs }}</div><div class="stat-label">Organisations</div></div>
        <i class="bi bi-building stat-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#0d6efd,#3d8bfd);">
      <div class="d-flex justify-content-between">
        <div><div class="stat-value">{{ stats.users }}</div><div class="stat-label">Total Users</div></div>
        <i class="bi bi-people-fill stat-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#f0a500,#f5c000);">
      <div class="d-flex justify-content-between">
        <div><div class="stat-value">{{ stats.projects }}</div><div class="stat-label">Total Projects</div></div>
        <i class="bi bi-bar-chart-line-fill stat-icon"></i>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#6f42c1,#9c6fe4);">
      <div class="d-flex justify-content-between">
        <div><div class="stat-value">{{ stats.assets }}</div><div class="stat-label">Total Assets</div></div>
        <i class="bi bi-laptop-fill stat-icon"></i>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span class="fw-bold" style="font-size:0.9rem;">All Organisations</span>
    <a href="{{ url_for('register_org') }}" class="btn btn-sm btn-outline-primary" style="font-size:0.78rem;">
      <i class="bi bi-plus-lg me-1"></i>Add Organisation
    </a>
  </div>
  <div class="card-body p-0">
    <table class="table table-hover mb-0">
      <thead><tr>
        <th class="ps-3">Organisation</th>
        <th>Country</th>
        <th>Users</th>
        <th>Projects</th>
        <th>Registered</th>
        <th>Status</th>
        <th>Action</th>
      </tr></thead>
      <tbody>
      {% for org in orgs %}
      <tr>
        <td class="ps-3">
          <div class="fw-bold" style="font-size:0.87rem;">{{ org.name }}</div>
          <div style="font-size:0.72rem;color:#999;">{{ org.email }}</div>
        </td>
        <td style="font-size:0.85rem;">{{ org.country }}</td>
        <td style="font-size:0.85rem;">{{ org.users|length }}</td>
        <td style="font-size:0.85rem;">{{ org.projects|length }}</td>
        <td style="font-size:0.82rem;color:#888;">{{ org.created_at.strftime('%d %b %Y') }}</td>
        <td>
          {% if org.is_active %}
          <span class="badge badge-active" style="font-size:0.7rem;">Active</span>
          {% else %}
          <span class="badge badge-suspended" style="font-size:0.7rem;">Suspended</span>
          {% endif %}
        </td>
        <td>
          <form method="POST" action="{{ url_for('superadmin_toggle_org', org_id=org.id) }}" class="d-inline">
            <button class="btn btn-sm {% if org.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}"
                    style="font-size:0.75rem;">
              {% if org.is_active %}Suspend{% else %}Activate{% endif %}
            </button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="7" class="text-center py-4 text-muted">No organisations yet.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}