<!-- Pending Spawn Verification — Holly's Queue -->
<!-- Task #101 — Modpack Installer -->

<div class="flex items-center justify-between mb-4">
  <h1 class="text-2xl font-bold">🏗️ Pending Spawn Verification</h1>
  <a href="/admin/modpack-installer" class="text-sm text-gray-400 hover:text-gray-200">← Installer</a>
</div>

<p class="text-sm text-gray-400 mb-4">
  After a server is installed, someone needs to log in and confirm the spawn area looks right.
  Click <strong>Mark Verified</strong> once you've checked.
</p>

<div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
  <% if (servers.length === 0) { %>
    <div class="p-6 text-center text-gray-500">
      ✅ All spawns verified! Nothing pending.
    </div>
  <% } else { %>
    <table class="w-full text-sm">
      <thead class="bg-gray-100 dark:bg-gray-800 text-xs uppercase text-gray-500 dark:text-gray-400">
        <tr>
          <th class="px-3 py-2 text-left">Server</th>
          <th class="px-3 py-2 text-left">Node</th>
          <th class="px-3 py-2 text-left">Provider</th>
          <th class="px-3 py-2 text-left">Installed</th>
          <th class="px-3 py-2 text-left">Action</th>
        </tr>
      </thead>
      <tbody>
        <% servers.forEach(function(s) { %>
          <tr class="border-t border-gray-200 dark:border-gray-700">
            <td class="px-3 py-2 font-medium"><%= s.display_name || s.pterodactyl_name %></td>
            <td class="px-3 py-2 text-gray-400 text-xs">
              <%= s.node === 'TX1' ? '🔥' : '❄️' %> <%= s.node %>
            </td>
            <td class="px-3 py-2 text-gray-400 text-xs"><%= s.modpack_provider || '—' %></td>
            <td class="px-3 py-2 text-gray-500 text-xs"><%= new Date(s.created_at).toLocaleString() %></td>
            <td class="px-3 py-2">
              <form method="POST" action="/admin/modpack-installer/verify-spawn/<%= s.server_identifier %>"
                    onsubmit="return confirm('Mark spawn as verified for <%= (s.display_name || '').replace(/'/g, '') %>?')">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-3 py-1 rounded text-xs font-medium">
                  ✅ Mark Verified
                </button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</div>
