<div class="rounded-xl border border-line overflow-x-auto bg-surface">
  <table class="w-full min-w-[640px]">
    <thead>
      <tr class="bg-surface-muted border-b border-line">
        <th class="text-left py-3 px-4 text-foreground-muted font-medium text-2xs uppercase tracking-widest">Time</th>
        <th class="text-left py-3 px-4 text-foreground-muted font-medium text-2xs uppercase tracking-widest">Duration</th>
        <th class="text-left py-3 px-4 text-foreground-muted font-medium text-2xs uppercase tracking-widest">Method</th>
        <th class="text-left py-3 px-4 text-foreground-muted font-medium text-2xs uppercase tracking-widest">URL</th>
        <th class="text-left py-3 px-4 text-foreground-muted font-medium text-2xs uppercase tracking-widest">Status</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-line-subtle">
      <% if (profiles.length === 0) { %>
        <tr>
          <td colspan="5" class="py-16 text-center">
            <p class="text-foreground-muted text-sm mb-1">No requests found</p>
            <p class="text-foreground-faint text-xs">Make HTTP requests to the API to start collecting data.</p>
          </td>
        </tr>
      <% } else { %>
        <% for (const p of profiles) { %>
          <%
            const req = p.entrypoint.data;
            const dur = p.performance.duration;
            const durClass = dur === undefined ? 'dur-none'
              : dur < 100  ? 'dur-fast'
              : dur < 500  ? 'dur-medium'
              : 'dur-slow';
          %>
          <%# The row is the link — no cell owns it. `tabindex` makes it reachable by keyboard. %>
          <tr data-row-href="<%= link(profilerPath + '/' + p.token) %>" tabindex="0"
              class="group cursor-pointer hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-nest transition-colors">
            <td class="py-2.5 px-4 text-foreground-secondary text-xs tabular-nums whitespace-nowrap group-hover:text-nest transition-colors">
              <%= isoDate(p.createdAt) %>
            </td>
            <td class="py-2.5 px-4 text-xs tabular-nums">
              <span class="<%= durClass %>"><%= dur !== undefined ? formatDuration(dur) + 'ms' : '—' %></span>
            </td>
            <td class="py-2.5 px-4">
              <span class="px-2 py-0.5 rounded text-2xs font-bold tracking-wide <%= methodClass(req.method) %>">
                <%= req.method %>
              </span>
            </td>
            <td class="py-2.5 px-4 text-foreground-secondary text-xs max-w-xs">
              <div class="truncate" title="<%= req.url %>"><%= req.url %></div>
              <% if (p.tags && p.tags.length > 0) { %>
                <div class="mt-1 flex flex-wrap gap-1"><%- tagBadges(p.tags) %></div>
              <% } %>
            </td>
            <td class="py-2.5 px-4">
              <% if (p.response) { %>
                <span class="px-2 py-0.5 rounded text-2xs font-bold tracking-wide <%= statusClass(p.response.statusCode) %>">
                  <%= p.response.statusCode %>
                </span>
              <% } else { %>
                <span class="text-foreground-faint text-xs">—</span>
              <% } %>
            </td>
          </tr>
        <% } %>
      <% } %>
    </tbody>
  </table>
</div>
