<table class="w-full text-xs">
  <thead class="bg-gray-50 text-gray-500 sticky top-0">
    <tr>
      <th class="px-3 py-2 text-left">Time</th>
      <th class="px-3 py-2 text-left">Client</th>
      <th class="px-3 py-2 text-left">Domain</th>
      <th class="px-3 py-2 text-left">Type</th>
      <th class="px-3 py-2 text-left">Resolved</th>
      <th class="px-3 py-2 text-left">Geo</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-50">
    {% for q in queries %}
    <tr class="hover:bg-gray-50 {% if q.is_nxdomain %}bg-red-50{% endif %}">
      <td class="px-3 py-2 text-gray-400 whitespace-nowrap font-mono">{{ q.timestamp|date:"H:i:s" }}</td>
      <td class="px-3 py-2 font-mono">
        <button class="text-indigo-600 hover:underline"
                onclick="setQueryFilter('client','{{ q.client_ip|escapejs }}')">{{ q.client_ip }}</button>
        {% if q.client_name %}<span class="text-gray-400 ml-1">{{ q.client_name }}</span>{% endif %}
      </td>
      <td class="px-3 py-2 font-mono text-gray-800 truncate max-w-[200px]">
        <button class="text-indigo-600 hover:underline font-mono text-left truncate max-w-full"
                onclick="setQueryFilter('domain','{{ q.domain|escapejs }}')">{{ q.domain }}</button>
      </td>
      <td class="px-3 py-2 text-gray-500">{{ q.query_type }}</td>
      <td class="px-3 py-2 font-mono">
        {% if q.is_nxdomain %}
          <span class="text-red-500 font-medium">NXDOMAIN</span>
        {% elif q.resolved_ip %}
          <span class="text-gray-600">{{ q.resolved_ip }}</span>
        {% else %}
          <span class="text-gray-300">—</span>
        {% endif %}
      </td>
      <td class="px-3 py-2 text-gray-500">{{ q.geo_display }}</td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="6" class="px-3 py-8 text-center text-gray-400">
        No DNS queries yet. Make sure your router is forwarding syslog to this server.
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
