<!-- Install History — Task #101 -->

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

<form method="get" class="flex gap-2 mb-4">
  <select name="status" onchange="this.form.submit()" class="bg-gray-800 text-gray-200 text-xs rounded px-2 py-1 border border-gray-700">
    <option value="">All statuses</option>
    <option value="queued"  <%= filters.status === 'queued'  ? 'selected' : '' %>>Queued</option>
    <option value="running" <%= filters.status === 'running' ? 'selected' : '' %>>Running</option>
    <option value="success" <%= filters.status === 'success' ? 'selected' : '' %>>Success</option>
    <option value="failed"  <%= filters.status === 'failed'  ? 'selected' : '' %>>Failed</option>
  </select>
  <% if (filters.status) { %><a href="/admin/modpack-installer/history" class="text-xs text-cyan-400 hover:underline ml-2">Clear</a><% } %>
</form>

<div class="bg-white dark:bg-darkcard rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
  <% if (jobs.length === 0) { %>
    <div class="p-6 text-center text-gray-500">No install history yet.</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">Type</th>
          <th class="px-3 py-2 text-left">Version</th>
          <th class="px-3 py-2 text-left">By</th>
          <th class="px-3 py-2 text-left">Status</th>
          <th class="px-3 py-2 text-left">Duration</th>
          <th class="px-3 py-2 text-left">Started</th>
        </tr>
      </thead>
      <tbody>
        <% jobs.forEach(function(j) { %>
          <tr class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/40 cursor-pointer"
              onclick="location.href='/admin/modpack-installer/status/<%= j.id %>'">
            <td class="px-3 py-2"><%= j.server_name || j.server_identifier || '—' %></td>
            <td class="px-3 py-2 text-gray-400 text-xs"><%= j.job_type %></td>
            <td class="px-3 py-2 font-mono text-xs text-gray-400"><%= (j.target_version_id || '').substring(0, 20) %></td>
            <td class="px-3 py-2 text-gray-400 text-xs"><%= j.triggered_by %></td>
            <td class="px-3 py-2">
              <span class="text-xs font-semibold px-2 py-0.5 rounded-full
                <% if (j.status === 'success') { %>bg-green-900 text-green-300
                <% } else if (j.status === 'failed') { %>bg-red-900 text-red-300
                <% } else if (j.status === 'running') { %>bg-cyan-900 text-cyan-300
                <% } else { %>bg-gray-700 text-gray-300<% } %>">
                <%= j.status %>
              </span>
            </td>
            <td class="px-3 py-2 text-gray-500 text-xs"><%= j.duration_seconds ? j.duration_seconds + 's' : '—' %></td>
            <td class="px-3 py-2 text-gray-500 text-xs"><%= new Date(j.started_at).toLocaleString() %></td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</div>
