{% set type_icons = {"rejection": "✗", "interview": "📅", "confirmation": "✓"} %}
{% set type_labels = {"rejection": "Rejection", "interview": "Interview", "confirmation": "Confirmation"} %}
{% set matched = d.matched_signals | from_json if d.matched_signals else [] %}

<div id="detection-{{ d.id }}"
     class="bg-slate-800 border border-slate-700 rounded-lg p-4">
  <div class="flex items-start justify-between gap-4">

    <!-- Left: icon + detection info -->
    <div class="flex items-start gap-3 min-w-0">
      <!-- Detection type icon -->
      <span class="text-2xl flex-shrink-0 mt-0.5" title="{{ type_labels.get(d.detection_type, d.detection_type) }}">
        {{ type_icons.get(d.detection_type, "?") }}
      </span>

      <div class="min-w-0">
        <!-- Signal count + job title + company -->
        <div class="flex items-center gap-2 flex-wrap">
          <span class="text-xs font-semibold text-amber-400 bg-amber-900/30 border border-amber-700/50 rounded px-2 py-0.5">
            {{ matched | length }}/4 signals
          </span>
          {% if d.job_title %}
            <a href="{{ url_for('jobs.index', expand=d.job_id) }}"
               class="text-sm font-semibold text-slate-100 hover:text-emerald-400 transition-colors truncate max-w-[300px]">
              {{ d.job_title }}
            </a>
          {% else %}
            <span class="text-sm font-semibold text-slate-400">(job not found)</span>
          {% endif %}
          {% if d.job_company %}
            <span class="text-sm text-slate-400">— {{ d.job_company }}</span>
          {% endif %}
        </div>

        <!-- Email snippet -->
        {% if d.snippet %}
          <p class="text-xs text-slate-400 mt-1.5 italic line-clamp-2">
            "{{ d.snippet }}"
          </p>
        {% endif %}

        <!-- Matched signals -->
        {% if matched %}
          <p class="text-xs text-slate-500 mt-1">
            Matched: {{ matched | join(", ") }}
          </p>
        {% endif %}

        <!-- Email subject + from (collapsed) -->
        {% if d.email_subject %}
          <p class="text-xs text-slate-600 mt-1">
            From: {{ d.email_from or "unknown" }}
          </p>
        {% endif %}
      </div>
    </div>

    <!-- Right: Confirm + Dismiss buttons -->
    <div class="flex gap-2 flex-shrink-0">
      <button hx-post="{{ url_for('detections.confirm', detection_id=d.id) }}"
              hx-target="#detection-{{ d.id }}"
              hx-swap="outerHTML"
              class="px-3 py-1.5 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-medium rounded-lg transition-colors">
        Confirm
      </button>
      <button hx-post="{{ url_for('detections.dismiss', detection_id=d.id) }}"
              hx-target="#detection-{{ d.id }}"
              hx-swap="outerHTML"
              class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-300 text-xs font-medium rounded-lg transition-colors">
        Dismiss
      </button>
    </div>

  </div>
</div>