{% extends "base.html" %}

{% block title %}Admin • Keywarden{% endblock %}

{% block content %}
  <div class="space-y-6">
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div>
        <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Admin</h1>
        <p class="mt-1 text-sm text-gray-500">Global administrative controls for Keywarden.</p>
      </div>
    </div>

    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <article class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
        <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Users</p>
        <p class="mt-2 text-2xl font-semibold text-gray-900">{{ summary.users }}</p>
      </article>
      <article class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
        <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Servers</p>
        <p class="mt-2 text-2xl font-semibold text-gray-900">{{ summary.servers }}</p>
      </article>
      <article class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
        <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Pending Requests</p>
        <p class="mt-2 text-2xl font-semibold text-amber-700">{{ summary.pending_requests }}</p>
      </article>
      <article class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
        <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">Active Grants</p>
        <p class="mt-2 text-2xl font-semibold text-emerald-700">{{ summary.active_grants }}</p>
      </article>
    </section>

    <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
      <div class="flex items-center justify-between gap-3 border-b border-gray-100 pb-4">
        <div>
          <h2 class="text-lg font-semibold text-gray-900">Access request queue</h2>
          <p class="mt-1 text-sm text-gray-500">Review and decide pending access requests.</p>
        </div>
        <span class="inline-flex items-center rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-800">
          {{ pending_access_requests|length }} pending
        </span>
      </div>
      {% if pending_access_requests %}
        <div class="mt-4 overflow-x-auto rounded-xl border border-gray-200">
          <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="bg-gray-50 text-left text-xs uppercase tracking-wide text-gray-500">
              <tr>
                <th class="px-3 py-2 font-semibold">Requester</th>
                <th class="px-3 py-2 font-semibold">Server</th>
                <th class="px-3 py-2 font-semibold">Requested scopes</th>
                <th class="px-3 py-2 font-semibold">Requested at</th>
                <th class="px-3 py-2 font-semibold text-right">Action</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 text-gray-700">
              {% for req in pending_access_requests %}
                <tr>
                  <td class="px-3 py-2">{{ req.requester.username }}</td>
                  <td class="px-3 py-2">
                    <a href="{% url 'servers:server_admin' req.server.id %}" class="font-medium text-blue-700 hover:underline">
                      {{ req.server.display_name }}
                    </a>
                  </td>
                  <td class="px-3 py-2">
                    <div class="flex flex-wrap gap-1">
                      {% if req.request_shell %}<span class="inline-flex rounded-full bg-blue-50 px-2 py-0.5 text-xs font-semibold text-blue-700">Shell</span>{% endif %}
                      {% if req.request_logs %}<span class="inline-flex rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-semibold text-emerald-700">Logs</span>{% endif %}
                      {% if req.request_users %}<span class="inline-flex rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-semibold text-indigo-700">Users</span>{% endif %}
                    </div>
                  </td>
                  <td class="px-3 py-2">{{ req.requested_at|date:"M j, Y H:i" }}</td>
                  <td class="px-3 py-2 text-right">
                    <div class="inline-flex gap-2">
                      <form method="post" action="{% url 'servers:decide_access_request' req.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="approve">
                        <input type="hidden" name="next" value="{{ request.get_full_path }}">
                        <button type="submit" class="inline-flex items-center rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700">Approve</button>
                      </form>
                      <form method="post" action="{% url 'servers:decide_access_request' req.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="deny">
                        <input type="hidden" name="next" value="{{ request.get_full_path }}">
                        <button type="submit" class="inline-flex items-center rounded-lg bg-rose-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-rose-700">Deny</button>
                      </form>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p class="mt-4 text-sm text-gray-500">No pending access requests.</p>
      {% endif %}
    </section>

    <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
      <div class="border-b border-gray-100 pb-4">
        <h2 class="text-lg font-semibold text-gray-900">Global admin utilities</h2>
        <p class="mt-1 text-sm text-gray-500">Central administrative tooling for Keywarden operations.</p>
      </div>
      <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {% for utility in utilities %}
          <a href="{{ utility.url }}" class="rounded-xl border border-gray-200 bg-gray-50 p-4 transition hover:border-blue-200 hover:bg-blue-50">
            <h3 class="text-sm font-semibold text-gray-900">{{ utility.title }}</h3>
            <p class="mt-1 text-xs text-gray-600">{{ utility.description }}</p>
          </a>
        {% endfor %}
      </div>
    </section>

    <section class="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
      <div class="border-b border-gray-100 pb-4">
        <h2 class="text-lg font-semibold text-gray-900">Server admin pages</h2>
        <p class="mt-1 text-sm text-gray-500">Open per-server administrative controls and user/account views.</p>
      </div>
      {% if servers %}
        <div class="mt-4 overflow-x-auto rounded-xl border border-gray-200">
          <table class="min-w-full divide-y divide-gray-200 text-sm">
            <thead class="bg-gray-50 text-left text-xs uppercase tracking-wide text-gray-500">
              <tr>
                <th class="px-3 py-2 font-semibold">Server</th>
                <th class="px-3 py-2 font-semibold">Hostname / IP</th>
                <th class="px-3 py-2 font-semibold text-right">Admin</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 text-gray-700">
              {% for server in servers %}
                <tr>
                  <td class="px-3 py-2">{{ server.display_name }}</td>
                  <td class="px-3 py-2">{{ server.hostname|default:server.ipv4|default:server.ipv6|default:"Unassigned" }}</td>
                  <td class="px-3 py-2 text-right">
                    <a href="{% url 'servers:server_admin' server.id %}" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-800">
                      Open admin
                    </a>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p class="mt-4 text-sm text-gray-500">No servers available.</p>
      {% endif %}
    </section>
  </div>
{% endblock %}