{% extends 'base.html' %}

{% block content %}
<div class="max-w-5xl mx-auto px-4 py-8">
  <div class="flex items-center justify-between mb-6">
    <div>
      <a href="{% url 'netscan-dashboard' %}" class="text-gray-400 hover:text-gray-600 text-sm">
        <i class="fas fa-arrow-left mr-1"></i> NetScan
      </a>
      <h1 class="text-2xl font-bold text-gray-900 mt-1">{{ profile.name }} — Scan History</h1>
    </div>
    <form method="post" action="{% url 'netscan-trigger' profile.pk %}">
      {% csrf_token %}
      <button type="submit"
              class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium text-sm">
        <i class="fas fa-play mr-2"></i> Run Now
      </button>
    </form>
  </div>

  {% if runs %}
  <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
    <table class="min-w-full text-sm">
      <thead class="bg-gray-50 border-b border-gray-100">
        <tr>
          <th class="px-4 py-3 text-left font-semibold text-gray-600">Started</th>
          <th class="px-4 py-3 text-left font-semibold text-gray-600">Duration</th>
          <th class="px-4 py-3 text-left font-semibold text-gray-600">Triggered by</th>
          <th class="px-4 py-3 text-left font-semibold text-gray-600">Status</th>
          <th class="px-4 py-3 text-left font-semibold text-gray-600">Findings</th>
          <th class="px-4 py-3"></th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-50">
        {% for run in runs %}
        <tr class="hover:bg-gray-50">
          <td class="px-4 py-3 text-gray-800 font-mono text-xs">{{ run.started_at|date:"M d, H:i:s" }}</td>
          <td class="px-4 py-3 text-gray-500">
            {% if run.duration_seconds is not None %}{{ run.duration_seconds }}s{% else %}—{% endif %}
          </td>
          <td class="px-4 py-3">
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
              {% if run.triggered_by == 'manual' %}bg-blue-50 text-blue-700{% else %}bg-gray-100 text-gray-600{% endif %}">
              {{ run.triggered_by }}
            </span>
          </td>
          <td class="px-4 py-3">
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
              {% if run.status == 'success' %}bg-green-100 text-green-700
              {% elif run.status == 'failed' %}bg-red-100 text-red-700
              {% elif run.status == 'running' %}bg-blue-100 text-blue-700
              {% else %}bg-gray-100 text-gray-600{% endif %}">
              {{ run.status }}
            </span>
          </td>
          <td class="px-4 py-3">
            <span class="flex items-center gap-2">
              {% if run.summary.critical %}<span class="text-red-600 font-medium">🔴{{ run.summary.critical }}</span>{% endif %}
              {% if run.summary.warning %}<span class="text-yellow-600 font-medium">🟡{{ run.summary.warning }}</span>{% endif %}
              {% if run.summary.ok %}<span class="text-green-600 font-medium">🟢{{ run.summary.ok }}</span>{% endif %}
              {% if run.summary.info %}<span class="text-blue-600 font-medium">ℹ️{{ run.summary.info }}</span>{% endif %}
            </span>
          </td>
          <td class="px-4 py-3">
            <a href="{% url 'netscan-run-detail' run.pk %}"
               class="text-blue-600 hover:text-blue-800 text-xs font-medium">View →</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if is_paginated %}
  <div class="flex justify-center mt-6 gap-2">
    {% if page_obj.has_previous %}
    <a href="?page={{ page_obj.previous_page_number }}"
       class="px-3 py-1.5 bg-white border border-gray-200 rounded-lg text-sm hover:bg-gray-50">← Prev</a>
    {% endif %}
    <span class="px-3 py-1.5 text-sm text-gray-600">
      Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
    </span>
    {% if page_obj.has_next %}
    <a href="?page={{ page_obj.next_page_number }}"
       class="px-3 py-1.5 bg-white border border-gray-200 rounded-lg text-sm hover:bg-gray-50">Next →</a>
    {% endif %}
  </div>
  {% endif %}

  {% else %}
  <div class="text-center py-16 text-gray-400">
    <i class="fas fa-history text-4xl mb-3"></i>
    <p>No scan runs yet. Click <strong>Run Now</strong> to start.</p>
  </div>
  {% endif %}
</div>
{% endblock %}