{% if alerts %}
<table class="min-w-full text-xs">
  <thead class="bg-gray-50">
    <tr>
      <th class="px-3 py-2 text-left text-gray-500 font-semibold">Detected</th>
      <th class="px-3 py-2 text-left text-gray-500 font-semibold">Type</th>
      <th class="px-3 py-2 text-left text-gray-500 font-semibold">IP</th>
      <th class="px-3 py-2 text-left text-gray-500 font-semibold hidden sm:table-cell">Location</th>
      <th class="px-3 py-2 text-left text-gray-500 font-semibold">Detail</th>
      <th class="px-3 py-2 text-left text-gray-500 font-semibold hidden sm:table-cell">Profile</th>
      <th class="px-3 py-2 text-right text-gray-500 font-semibold">Action</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-50">
    {% for alert in alerts %}
    <tr class="hover:bg-yellow-50/30">
      <td class="px-3 py-2 font-mono text-gray-500 whitespace-nowrap">{{ alert.detected_at|date:"M d H:i" }}</td>
      <td class="px-3 py-2">
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
          {% if alert.alert_type == 'rate_limit' %}bg-red-100 text-red-700{% else %}bg-yellow-100 text-yellow-700{% endif %}">
          {% if alert.alert_type == 'rate_limit' %}🚨{% else %}⚠️{% endif %}
          {{ alert.get_alert_type_display }}
        </span>
      </td>
      <td class="px-3 py-2 font-mono text-gray-700">{{ alert.remote_addr }}</td>
      <td class="px-3 py-2 text-gray-500 hidden sm:table-cell">
        {% if alert.city or alert.country %}{{ alert.city }}{% if alert.city and alert.country %}, {% endif %}{{ alert.country }}{% else %}—{% endif %}
      </td>
      <td class="px-3 py-2 text-gray-600 max-w-xs truncate" title="{{ alert.detail }}">{{ alert.detail }}</td>
      <td class="px-3 py-2 text-gray-400 hidden sm:table-cell text-xs">{{ alert.profile.name }}</td>
      <td class="px-3 py-2 text-right">
        <button
          hx-post="{% url 'nginxmon-dismiss-alert' alert.pk %}"
          hx-confirm="Dismiss this alert?"
          hx-swap="outerHTML"
          hx-target="closest tr"
          class="inline-flex items-center px-2 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200 text-xs">
          Dismiss
        </button>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% else %}
<div class="px-4 py-8 text-center text-sm text-gray-400">
  <i class="fas fa-check-circle text-green-400 text-xl mb-2 block"></i>
  No active threat alerts
</div>
{% endif %}