{% import "components/_score_macros.html" as fit %}
{% set composite = fit.composite(job.sub_scores_json) | int %}
{% set score_color = fit.badge_class(composite) %}
{% set salary_text = "" %}
{% if job.salary_min and job.salary_max %}
  {% set salary_text = "$" ~ (job.salary_min // 1000) ~ "k–$" ~ (job.salary_max // 1000) ~ "k" %}
{% elif job.salary_min %}
  {% set salary_text = "$" ~ (job.salary_min // 1000) ~ "k+" %}
{% endif %}

<div class="kanban-card bg-slate-700 rounded-lg border-l-4
            {% if job.pipeline_status == 'rejected' %}border-red-600
            {% elif job.pipeline_status == 'offer' or job.pipeline_status == 'accepted' %}border-emerald-500
            {% elif job.pipeline_status == 'reviewing' or job.pipeline_status == 'applied' %}border-blue-500
            {% elif job.pipeline_status == 'phone_screen' or job.pipeline_status == 'technical' or job.pipeline_status == 'onsite' %}border-amber-500
            {% else %}border-slate-500{% endif %}
            px-3 py-2 cursor-grab active:cursor-grabbing hover:bg-slate-600/70 transition-colors"
     data-job-id="{{ job.dedup_key }}">

  <!-- Title row -->
  <a href="{{ url_for('jobs.detail', dedup_key=job.dedup_key) }}"
     class="block text-slate-100 text-sm font-medium leading-snug hover:text-emerald-400 transition-colors mb-1"
     onclick="event.stopPropagation()">
    {{ job.title | truncate(45, true) }}
  </a>

  <!-- Company -->
  <p class="text-slate-400 text-xs mb-2 truncate">{{ job.company }}</p>

  <!-- Score + metadata row -->
  <div class="flex items-center gap-2 flex-wrap">

    <!-- Fit composite badge (sum of 6 sub-scores, 6-30) -->
    <span class="text-xs font-semibold px-1.5 py-0.5 rounded {{ score_color }}">
      {{ composite if composite > 0 else "—" }}
    </span>

    <!-- Salary -->
    {% if salary_text %}
      <span class="text-xs text-slate-400">{{ salary_text }}</span>
    {% endif %}

    <!-- Location -->
    {% if job.location %}
      <span class="text-xs text-slate-500 truncate max-w-[100px]">{{ job.location }}</span>
    {% endif %}

    <!-- Days in stage (pushed to right) -->
    <span class="ml-auto text-xs text-slate-500">{{ job.days_in_stage }}d</span>

  </div>

</div>