{% extends 'admin/base.html' %}
{% block content %}

{% if session.admin_role == 'super_admin' %}
{% if is_super %}
<div class="card" style="margin-bottom: 20px;">
  <div class="card-title">Invite New Administrator</div>
  <form method="POST" style="display:flex; gap:10px; flex-wrap:wrap;">
    <input type="email" name="email" placeholder="Admin Email" required style="flex:1; border-radius:8px; border:1px solid var(--border); background:var(--card); color:white; padding:10px;">
    
    <select name="role" style="padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:white;">
      <option value="admin">Site Admin</option>
      <option value="super_admin">Super Admin</option>
    </select>

    <select name="site_id" style="padding:10px; border-radius:8px; border:1px solid var(--border); background:var(--card); color:white;">
      <option value="">All Sites (Super Admin)</option>
      {% for site in sites %}
      <option value="{{ site.id }}">{{ site.name }}</option>
      {% endfor %}
    </select>

    <button type="submit" class="btn btn-green">Send Invitation</button>
  </form>
</div>
{% endif %}
{% endif %}

<div class="card">
  <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;">
    <div class="card-title" style="margin:0;">Current Administrators</div>
    <div>
        <a href="{{ url_for('manage_admins') }}" class="badge blue">All</a>
        <a href="{{ url_for('manage_admins', role_filter='super_admin') }}" class="badge purple">Super Admins Only</a>
    </div>
  </div>

  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Email</th>
          <th>Role</th>
          <th>Status</th>
          {% if session.admin_role == 'super_admin' %}<th>Actions</th>{% endif %}
        </tr>
      </thead>
      <tbody>
  {% for item in admins %}
  <tr>
    <td class="mono">{{ item.admin.email }}</td>
    <td>
        <span class="badge {{ 'purple' if item.admin.role == 'super_admin' else 'blue' }}">
            {{ item.admin.role.replace('_', ' ').title() }}
        </span>
    </td>
    <td>
        <span class="badge online" style="font-size: 10px;">{{ item.site_name }}</span>
    </td>
    <td>
      {% if item.admin.password_hash %}<span class="badge green">Active</span>
      {% else %}<span class="badge amber">Pending</span>{% endif %}
    </td>
    {% if session.admin_role == 'super_admin' %}
    <td>
      {% if item.admin.role != 'super_admin' %}
      <form action="{{ url_for('delete_admin_account', admin_id=item.admin.id) }}" method="POST" onsubmit="return confirm('Remove {{ item.admin.email }}?');">
        <button type="submit" style="background:none; border:none; color:#f87171; cursor:pointer; font-weight:700;">🗑️ Remove</button>
      </form>
      {% else %}<span style="font-size:11px; color:var(--muted);">Protected</span>{% endif %}
    </td>
    {% endif %}
  </tr>
  {% endfor %}
</tbody>
    </table>
  </div>
</div>
{% endblock %}