{% extends 'base.html' %}

{% block content %}
<div class="max-w-4xl mx-auto px-4 py-8">
  <!-- Breadcrumb -->
  <div class="flex items-center gap-2 text-sm text-gray-400 mb-4">
    <a href="{% url 'netscan-dashboard' %}" class="hover:text-gray-600">NetScan</a>
    <span>/</span>
    <a href="{% url 'netscan-run-list' run.profile.pk %}" class="hover:text-gray-600">{{ run.profile.name }}</a>
    <span>/</span>
    <span class="text-gray-600">Run #{{ run.pk }}</span>
  </div>

  <!-- Header -->
  <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 mb-6">
    <div class="flex items-start justify-between flex-wrap gap-4">
      <div>
        <h1 class="text-xl font-bold text-gray-900">{{ run.profile.name }} — Run #{{ run.pk }}</h1>
        <p class="text-gray-500 text-sm mt-1">
          Started {{ run.started_at|date:"N j, Y H:i:s" }}
          {% if run.duration_seconds is not None %}· {{ run.duration_seconds }}s{% endif %}
          · Triggered by <strong>{{ run.triggered_by }}</strong>
        </p>
      </div>
      <div class="flex items-center gap-3">
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm 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>
        <form method="post" action="{% url 'netscan-trigger' run.profile.pk %}">
          {% csrf_token %}
          <button type="submit"
                  class="inline-flex items-center px-3 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 font-medium text-sm">
            <i class="fas fa-redo mr-1.5"></i> Re-run
          </button>
        </form>
      </div>
    </div>

    <!-- Summary badges -->
    <div class="flex flex-wrap gap-3 mt-4 pt-4 border-t border-gray-100">
      {% if run.summary.critical %}
      <div class="flex items-center gap-1.5 bg-red-50 text-red-700 px-3 py-1.5 rounded-lg text-sm font-semibold">
        🔴 {{ run.summary.critical }} Critical
      </div>
      {% endif %}
      {% if run.summary.warning %}
      <div class="flex items-center gap-1.5 bg-yellow-50 text-yellow-700 px-3 py-1.5 rounded-lg text-sm font-semibold">
        🟡 {{ run.summary.warning }} Warning
      </div>
      {% endif %}
      {% if run.summary.ok %}
      <div class="flex items-center gap-1.5 bg-green-50 text-green-700 px-3 py-1.5 rounded-lg text-sm font-semibold">
        🟢 {{ run.summary.ok }} OK
      </div>
      {% endif %}
      {% if run.summary.info %}
      <div class="flex items-center gap-1.5 bg-blue-50 text-blue-700 px-3 py-1.5 rounded-lg text-sm font-semibold">
        ℹ️ {{ run.summary.info }} Info
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Critical -->
  {% if critical_findings %}
  <details class="mb-4 open" open>
    <summary class="flex items-center gap-2 cursor-pointer bg-red-50 border border-red-200 rounded-xl px-5 py-3 font-semibold text-red-800 select-none">
      🔴 Critical Findings ({{ critical_findings|length }})
    </summary>
    <div class="mt-2 space-y-3">
      {% for f in critical_findings %}
      <div class="bg-white border border-red-200 rounded-xl p-4">
        <div class="font-medium text-gray-900 mb-1">{{ f.title }}</div>
        <p class="text-sm text-gray-600">{{ f.detail }}</p>
        {% if f.raw %}
        <details class="mt-2">
          <summary class="text-xs text-gray-400 cursor-pointer hover:text-gray-600">View raw data</summary>
          <pre class="mt-2 bg-gray-50 rounded-lg p-3 text-xs overflow-auto text-gray-700">{{ f.raw|pprint }}</pre>
        </details>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </details>
  {% endif %}

  <!-- Warnings -->
  {% if warning_findings %}
  <details class="mb-4">
    <summary class="flex items-center gap-2 cursor-pointer bg-yellow-50 border border-yellow-200 rounded-xl px-5 py-3 font-semibold text-yellow-800 select-none">
      🟡 Warnings ({{ warning_findings|length }})
    </summary>
    <div class="mt-2 space-y-3">
      {% for f in warning_findings %}
      <div class="bg-white border border-yellow-200 rounded-xl p-4">
        <div class="font-medium text-gray-900 mb-1">{{ f.title }}</div>
        <p class="text-sm text-gray-600">{{ f.detail }}</p>
        {% if f.raw %}
        <details class="mt-2">
          <summary class="text-xs text-gray-400 cursor-pointer hover:text-gray-600">View raw data</summary>
          <pre class="mt-2 bg-gray-50 rounded-lg p-3 text-xs overflow-auto text-gray-700">{{ f.raw|pprint }}</pre>
        </details>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </details>
  {% endif %}

  <!-- OK / Info -->
  {% if ok_findings %}
  <details class="mb-4">
    <summary class="flex items-center gap-2 cursor-pointer bg-green-50 border border-green-200 rounded-xl px-5 py-3 font-semibold text-green-800 select-none">
      🟢 OK / Info ({{ ok_findings|length }})
    </summary>
    <div class="mt-2 space-y-3">
      {% for f in ok_findings %}
      <div class="bg-white border border-gray-200 rounded-xl p-4">
        <div class="flex items-center gap-2 font-medium text-gray-900 mb-1">
          {% if f.severity == 'info' %}ℹ️{% else %}🟢{% endif %}
          {{ f.title }}
        </div>
        <p class="text-sm text-gray-600">{{ f.detail }}</p>
        {% if f.raw %}
        <details class="mt-2">
          <summary class="text-xs text-gray-400 cursor-pointer hover:text-gray-600">View raw data</summary>
          <pre class="mt-2 bg-gray-50 rounded-lg p-3 text-xs overflow-auto text-gray-700">{{ f.raw|pprint }}</pre>
        </details>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </details>
  {% endif %}

  {% if not critical_findings and not warning_findings and not ok_findings %}
  <div class="text-center py-12 text-gray-400">
    <i class="fas fa-hourglass-half text-3xl mb-2"></i>
    <p>No findings recorded yet — the scan may still be running.</p>
  </div>
  {% endif %}
</div>
{% endblock %}