{#
  Pure data table. Swapped via HTMX `hx-get` on filter input changes.
  Self-contained — gets re-rendered without the outer page chrome.
#}
<div id="scored-rows" class="overflow-x-auto">
  {% if rows %}
  <table class="w-full text-sm">
    <thead class="border-b border-ink-700/60 bg-ink-900/40 text-left">
      <tr>
        <th class="px-5 py-2.5 text-right font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-slate-500">Score</th>
        <th class="px-5 py-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-slate-500">FQDN</th>
        <th class="px-3 py-2.5 text-right font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-slate-500">Code</th>
        <th class="px-3 py-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-slate-500">Title</th>
        <th class="px-3 py-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-slate-500">Tech</th>
        <th class="px-5 py-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.16em] text-slate-500">Reasoning</th>
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr class="border-b border-ink-700/40 transition hover:bg-ink-800/30">
        {# Score: pill + tiny progress bar #}
        <td class="px-5 py-3 text-right">
          {% if row.score is none %}
            <span class="font-mono text-xs text-slate-600">—</span>
          {% else %}
            <div class="flex items-center justify-end gap-2">
              <div class="hidden h-1 w-16 overflow-hidden rounded-full bg-ink-700 sm:block">
                <div class="h-full rounded-full transition-all
                  {% if row.score >= 70 %}bg-gradient-to-r from-blood-600 to-blood-400
                  {% elif row.score >= 40 %}bg-gradient-to-r from-brand-700 to-brand-500
                  {% else %}bg-gradient-to-r from-emerald-700 to-emerald-500{% endif %}"
                  style="width: {{ row.score }}%"></div>
              </div>
              <span class="inline-flex h-7 min-w-[2.5rem] items-center justify-center rounded-md px-2 font-mono text-xs font-bold ring-1 ring-inset
                {% if row.score >= 70 %}score-high bg-blood-500/15 text-blood-300 ring-blood-500/40
                {% elif row.score >= 40 %}score-medium bg-brand-500/15 text-brand-300 ring-brand-500/40
                {% else %}score-low bg-emerald-500/15 text-emerald-300 ring-emerald-500/40{% endif %}">
                {{ row.score }}
              </span>
            </div>
          {% endif %}
        </td>

        <td class="px-5 py-3 font-mono text-xs text-slate-100">{{ row.fqdn }}</td>

        {# Status code with semantic colour #}
        <td class="px-3 py-3 text-right">
          {% if row.status_code is none %}
            <span class="font-mono text-xs text-slate-600">—</span>
          {% elif row.status_code in [401, 403] %}
            <span class="font-mono text-xs font-semibold text-brand-300">{{ row.status_code }}</span>
          {% elif row.status_code >= 500 %}
            <span class="font-mono text-xs font-semibold text-blood-400">{{ row.status_code }}</span>
          {% elif row.status_code >= 400 %}
            <span class="font-mono text-xs text-slate-400">{{ row.status_code }}</span>
          {% else %}
            <span class="font-mono text-xs text-emerald-400">{{ row.status_code }}</span>
          {% endif %}
        </td>

        <td class="max-w-[16rem] truncate px-3 py-3 text-xs text-slate-300" title="{{ row.title or '' }}">{{ row.title or "—" }}</td>
        <td class="px-3 py-3 font-mono text-[11px] text-slate-500">{{ row.technologies|join(" · ") }}</td>
        {# Full reasoning lives in the title tooltip; the cell truncates to one line so it always fits. #}
        <td class="px-5 py-3 text-xs leading-relaxed text-slate-300">
          <span class="block max-w-md truncate" title="{{ row.reasoning or '' }}">{{ row.reasoning or "—" }}</span>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="mx-auto h-8 w-8 text-slate-700">
      <circle cx="11" cy="11" r="7"/>
      <path d="m21 21-4.3-4.3"/>
    </svg>
    {% if q is defined and q %}
    <p class="mt-3 font-mono text-xs text-slate-500">No subdomains match &ldquo;{{ q }}&rdquo;.</p>
    {% else %}
    <p class="mt-3 font-mono text-xs text-slate-500">No subdomains yet — the scan may still be running.</p>
    {% endif %}
  </div>
  {% endif %}
</div>