{% extends "base.html" %}

{% block title %}Scan #{{ scan.id }} — {{ domain_name }}{% endblock %}

{% block content %}

{# ─── Header ──────────────────────────────────────────────────────────── #}
<header class="mb-8 flex flex-wrap items-end justify-between gap-6">
  <div>
    <a href="/ui" class="inline-flex items-center gap-1.5 font-mono text-[11px] uppercase tracking-[0.16em] text-slate-500 transition hover:text-brand-400">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
        <path d="M19 12H5M12 19l-7-7 7-7"/>
      </svg>
      back to scans
    </a>
    <h1 class="mt-2 flex items-center gap-3 font-mono text-3xl font-semibold tracking-tight text-slate-50">
      {{ domain_name }}
      <span class="font-mono text-base font-normal text-slate-600">#{{ scan.id }}</span>
    </h1>
    <p class="mt-1.5 font-mono text-xs text-slate-500">
      {{ scan.started_at.strftime("%Y-%m-%d %H:%M UTC") }}
      {% if scan.finished_at %}
        <span class="mx-1.5 text-slate-700">→</span>
        {{ scan.finished_at.strftime("%H:%M UTC") }}
        {% set dur = (scan.finished_at - scan.started_at).total_seconds() %}
        <span class="ml-2 rounded-md bg-ink-800 px-1.5 py-0.5 text-[10px] text-slate-400">{{ "%.1f"|format(dur) }}s</span>
      {% endif %}
    </p>
  </div>

  <div class="flex flex-wrap items-center gap-3">
    {% include "partials/_scan_status.html" %}
    {% if previous_scan_id %}
      <a href="/ui/scans/{{ previous_scan_id }}/diff/{{ scan.id }}"
         class="inline-flex items-center gap-2 rounded-lg border border-ink-600 bg-ink-800/60 px-3.5 py-2 font-mono text-xs font-medium text-slate-300 transition hover:border-brand-500/40 hover:bg-ink-700 hover:text-slate-100">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
          <path d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/>
        </svg>
        Diff vs #{{ previous_scan_id }}
      </a>
    {% endif %}
  </div>
</header>

{# ─── KPI strip ──────────────────────────────────────────────────────── #}
{% set total = rows|length %}
{% set scored_count = rows|selectattr("score", "ne", None)|list|length %}
{% set high_count = rows|selectattr("score", "ne", None)|selectattr("score", "ge", 70)|list|length %}
{% set probed_count = rows|selectattr("status_code", "ne", None)|list|length %}

<section class="mb-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
  {% set kpi_cards = [
    ('Subdomains', total, 'M3 7h18M3 12h18M3 17h18', 'slate'),
    ('Scored', scored_count, 'M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11', 'brand'),
    ('High-score (≥70)', high_count, 'm12 2 2.4 7.4H22l-6 4.6 2.3 7.4L12 17l-6.3 4.4 2.3-7.4-6-4.6h7.6Z', 'blood'),
    ('Probed', probed_count, 'M22 12h-4l-3 9L9 3l-3 9H2', 'emerald'),
  ] %}
  {% for label, value, icon_d, tint in kpi_cards %}
  <div class="rounded-xl border border-ink-700/60 bg-ink-900/60 p-4 shadow-card">
    <div class="flex items-center justify-between">
      <span class="font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-slate-500">{{ label }}</span>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
           class="h-4 w-4 {% if tint == 'brand' %}text-brand-500
                  {% elif tint == 'blood' %}text-blood-500
                  {% elif tint == 'emerald' %}text-emerald-400
                  {% else %}text-slate-500{% endif %}">
        <path d="{{ icon_d }}"/>
      </svg>
    </div>
    <p class="mt-1.5 font-display text-2xl font-semibold tabular-nums {% if tint == 'blood' and value > 0 %}text-blood-400{% else %}text-slate-50{% endif %}">{{ value }}</p>
  </div>
  {% endfor %}
</section>

{# ─── Filter + export bar ────────────────────────────────────────────── #}
<section class="rounded-xl border border-ink-700/60 bg-ink-900/60 shadow-card">
  <div class="flex flex-wrap items-center justify-between gap-3 border-b border-ink-700/60 p-4">
    <div class="relative">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
           class="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-500">
        <circle cx="11" cy="11" r="7"/>
        <path d="m21 21-4.3-4.3"/>
      </svg>
      <input
        type="search"
        name="q"
        placeholder="filter by fqdn, title, tech…"
        hx-get="/ui/scans/{{ scan.id }}/rows"
        hx-trigger="input changed delay:200ms, search"
        hx-target="#scored-rows"
        hx-swap="outerHTML"
        class="w-72 rounded-lg border border-ink-600 bg-ink-950/60 py-2 pl-9 pr-3 font-mono text-xs text-slate-100 placeholder:text-slate-600 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/30"
      />
    </div>

    <div class="flex flex-wrap items-center gap-1.5 text-xs">
      <span class="mr-1 font-mono text-[10px] uppercase tracking-[0.16em] text-slate-500">export</span>
      {% for fmt in ["json", "csv", "txt", "md"] %}
        <a
          href="/scans/{{ scan.id }}/export?format={{ fmt }}"
          class="rounded-md border border-ink-600 bg-ink-800/60 px-2.5 py-1 font-mono text-[11px] font-medium text-slate-300 transition hover:border-brand-500/40 hover:bg-ink-700 hover:text-slate-100"
        >.{{ fmt }}</a>
      {% endfor %}
    </div>
  </div>

  {% include "partials/_scored_rows.html" %}
</section>

{# ─── Screenshots grid ───────────────────────────────────────────────── #}
{% if screenshots_by_fqdn %}
<section
  class="mt-8 rounded-xl border border-ink-700/60 bg-ink-900/60 shadow-card"
  x-data="{ open: null }"
>
  <h2 class="flex items-center gap-2 border-b border-ink-700/60 px-5 py-3.5 font-mono text-xs font-medium uppercase tracking-[0.16em] text-slate-300">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-brand-500">
      <rect x="3" y="3" width="18" height="18" rx="2"/>
      <circle cx="9" cy="9" r="2"/>
      <path d="m21 15-5-5L5 21"/>
    </svg>
    Screenshots
    <span class="ml-1 rounded-full bg-ink-800 px-2 py-0.5 text-[10px] text-slate-400">{{ screenshots_by_fqdn|length }}</span>
  </h2>

  <div class="grid grid-cols-2 gap-3 p-4 sm:grid-cols-3 lg:grid-cols-4">
    {% for fqdn, shot_id in screenshots_by_fqdn.items()|sort %}
    <button
      type="button"
      @click="open = {{ shot_id }}"
      class="group rounded-lg border border-ink-700/60 bg-ink-950/40 p-2 text-left transition hover:border-brand-500/40 hover:bg-ink-900 focus:outline-none focus:ring-2 focus:ring-brand-500/40"
    >
      <img
        src="/screenshots/{{ shot_id }}/thumbnail"
        loading="lazy"
        alt="Screenshot of {{ fqdn }}"
        class="aspect-video w-full rounded object-cover object-top"
      />
      <p class="mt-2 truncate font-mono text-[11px] text-slate-300 group-hover:text-brand-300">{{ fqdn }}</p>
    </button>
    {% endfor %}
  </div>

  {# Lightbox #}
  <template x-teleport="body">
    <div
      x-show="open !== null"
      x-cloak
      x-transition.opacity
      @keydown.escape.window="open = null"
      @click.self="open = null"
      class="fixed inset-0 z-50 flex items-center justify-center bg-ink-950/90 p-6 backdrop-blur-sm"
    >
      <div class="max-h-full max-w-5xl overflow-auto rounded-xl border border-ink-600 bg-ink-900 p-3 shadow-2xl">
        <img
          :src="open ? '/screenshots/' + open + '/image' : ''"
          alt=""
          class="block max-h-[80vh] w-auto rounded"
        />
        <div class="mt-2 flex justify-end">
          <button
            type="button"
            @click="open = null"
            class="rounded-md bg-ink-800 px-3 py-1.5 font-mono text-[11px] font-medium text-slate-300 transition hover:bg-ink-700"
          >
            close · esc
          </button>
        </div>
      </div>
    </div>
  </template>
</section>
{% endif %}

{% endblock %}