{# ===========================================================================
   jobs/_row_detail.html  —  DEEP-DIVE TIER (tier 2 of 2)
   ===========================================================================
   Replaces the triage row via outerHTML swap when "Open full detail" is clicked
   (GET /jobs/<key>/detail_inline). This is an INLINE row, NOT a separate page —
   we deliberately keep the repo's existing inline-detail model (the redesign
   README floated a /jobs/<id> route; we did NOT introduce one, to avoid inventing
   a route + view the backend doesn't have). ⚑ See PORT-MANIFEST.

   DESIGN DECISION #1 (deep-dive half): everything the triage tier omits lives
   HERE and ONLY here — full JD, full AI analysis (incl. talking points + resume
   priority skills), sub-score breakdown (repeat OK), pipeline timeline, notes,
   and the full source list. Content is the SAME as the original detail row; it is
   restyled and re-sectioned, nothing dropped.

   PRESERVED contracts:
     • Collapse back to triage -> hx-get jobs.expand, target closest tr, outerHTML.
     • Status select           -> jobs/_status_cell.html (unchanged hx-post).
     • Notes                   -> jobs/_notes_panel.html (unchanged save_notes).
     • Timeline                -> `events` list passed by the detail_inline view.
     • Sources + direct-link badge -> jobs/_direct_link_badge.html include kept.
#}
{% import "components/_score_macros.html" as sm %}
{% set composite = sm.composite(job.sub_scores_json) | int %}
{% set scored = job.sub_scores_json is not none and job.sub_scores_json != '' %}
{% set sub_scores = job.sub_scores_json | from_json if job.sub_scores_json else {} %}
{% set sources_list = job.sources | from_json if job.sources else [] %}
{% set urls_list = job.source_urls | from_json if job.source_urls else [] %}
{# Apply target — apply_url_for() (Jinja global) enforces the precedence:
   strict direct_url (verified company posting) > first source_url (aggregator). #}
{% set apply_url = apply_url_for(job) %}

{# Score band (same 3-band split as the chip). #}
{% set band = 'success' if composite >= 24 else ('warning' if composite >= 17 else 'error') %}
{% set band_text = {'success':'text-emerald-400','warning':'text-amber-400','error':'text-red-400'}[band] %}
{% set band_bg   = {'success':'bg-emerald-400/15','warning':'bg-amber-400/15','error':'bg-red-400/15'}[band] %}
{% set band_bd   = {'success':'border-emerald-400/40','warning':'border-amber-400/40','error':'border-red-400/40'}[band] %}
{% set band_dot  = {'success':'bg-emerald-400','warning':'bg-amber-400','error':'bg-red-400'}[band] %}
{% set band_label= {'success':'Strong fit','warning':'Moderate fit','error':'Weak fit'}[band] %}

{# Classification pill — KEPT as a secondary signal (distinct from the score band). #}
{% set cls = job.classification %}
{% set cls_map = {
  'apply':    ('Apply',    'bg-emerald-900 text-emerald-200 border-emerald-700'),
  'consider': ('Consider', 'bg-amber-900 text-amber-200 border-amber-700'),
  'skip':     ('Skip',     'bg-slate-800 text-slate-300 border-slate-600'),
  'reject':   ('Reject',   'bg-red-900 text-red-200 border-red-700')
} %}

{% set sub_score_dims = [
  ('title_fit','Title fit'), ('location_fit','Location fit'), ('comp_fit','Compensation'),
  ('domain_match','Domain'), ('seniority_match','Seniority'), ('skills_match','Skills')
] %}
{% set jd_key_safe = job.dedup_key | urlencode | replace('%', '') %}

<tr class="border-b border-slate-700 bg-slate-850" data-row-expanded="detail">
  <td colspan="7" class="px-4 pt-5 pb-6">
    <div class="max-w-[1080px] space-y-5">

      {# Back to triage (was "Collapse Full Detail"). #}
      <button type="button"
              hx-get="{{ url_for('jobs.expand', dedup_key=job.dedup_key) }}"
              hx-target="closest tr" hx-swap="outerHTML"
              class="inline-flex items-center gap-1.5 text-[13px] text-slate-400 hover:text-slate-200 transition-colors">
        <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 19l-7-7 7-7"/></svg>
        Back to triage
      </button>

      {# ---- Header: chip + band badge + title + meta · status + Apply ---- #}
      <div class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-700/60 pb-5">
        <div class="min-w-0">
          <div class="flex items-center gap-3 mb-2">
            {% if scored %}
            <div class="grid place-items-center w-11 h-11 rounded-md border {{ band_bg }} {{ band_bd }}">
              <span class="text-xl font-bold leading-none tabular-nums {{ band_text }}">{{ composite }}</span>
            </div>
            <span class="inline-flex items-center gap-1.5 rounded-md border {{ band_bd }} {{ band_bg }} px-2.5 py-1 text-[13px] font-medium {{ band_text }}">
              <span class="w-1.5 h-1.5 rounded-full {{ band_dot }}"></span>{{ band_label }} · {{ composite }}/30
            </span>
            {% else %}
            <span class="inline-flex items-center rounded-md border border-slate-700 bg-slate-800 px-2.5 py-1 text-[13px] text-slate-500">Unscored</span>
            {% endif %}
            {% if cls and cls in cls_map %}
            <span class="inline-block px-2 py-0.5 text-[11px] font-semibold rounded border {{ cls_map[cls][1] }}">{{ cls_map[cls][0] }}</span>
            {% endif %}
          </div>
          <h2 class="text-2xl font-bold tracking-tight text-slate-100 truncate">{{ job.title }}</h2>
          <p class="text-[13px] text-slate-400 mt-1">
            {{ job.company }}
            <span class="text-slate-600">·</span> {{ job.location }}
            {% if job.salary_min or job.salary_max %}
              <span class="text-slate-600">·</span>
              <span class="tabular-nums">
                {% if job.salary_min and job.salary_max %}${{ "{:,}".format(job.salary_min) }} – ${{ "{:,}".format(job.salary_max) }}
                {% elif job.salary_max %}up to ${{ "{:,}".format(job.salary_max) }}
                {% else %}${{ "{:,}".format(job.salary_min) }}+{% endif %}
              </span>
            {% endif %}
          </p>
        </div>
        <div class="flex items-center gap-2 flex-none">
          <div class="w-44">{% include "jobs/_status_cell.html" %}</div>
          {% if apply_url %}
          <a href="{{ apply_url }}" target="_blank" rel="noopener noreferrer"
             class="inline-flex h-9 items-center gap-1.5 rounded-md bg-indigo-600 px-3.5 text-sm font-medium text-white hover:bg-indigo-500 transition-colors">
            Apply
            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 5h5v5M19 5l-7 7M12 5H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-5"/></svg>
          </a>
          {% endif %}
        </div>
      </div>

      {# ---- Body: 2-col grid (read | rail) ---- #}
      <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_320px] gap-x-8 gap-y-6">

        {# ===== LEFT: JD · AI analysis · breakdown · notes ===== #}
        <div class="space-y-5 min-w-0">

          {# Full Job Description — KEPT. Render the longer of jd_full / description. #}
          {% set _jdf = job.jd_full or '' %}
          {% set _desc = job.description or '' %}
          {% set jd_display = _desc if (_desc | length) > (_jdf | length) else _jdf %}
          {% if jd_display %}
          <section>
            <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2">Job description</h3>
            <div class="rounded-lg border border-slate-700 bg-slate-950 p-4 max-h-96 overflow-y-auto">
              <div class="text-[13px] text-slate-300 leading-relaxed whitespace-pre-line">{{ jd_display | format_description }}</div>
            </div>
          </section>
          {% endif %}

          {# AI fit analysis — FULL: strengths · gaps · talking points · resume skills.
             DESIGN DECISION: talking points + resume skills live HERE (moved out of
             triage). Resume skills render as indigo (accent) chips. #}
          {% if job.fit_analysis %}
            {% set analysis = job.fit_analysis | from_json %}
            {% if analysis.strengths or analysis.gaps or analysis.talking_points or analysis.resume_priority_skills %}
            <section class="space-y-3">
              <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500">AI fit analysis</h3>
              {% if analysis.strengths %}
              <div>
                <h4 class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-emerald-400 mb-1.5"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>Strengths</h4>
                <ul class="space-y-1">{% for s in analysis.strengths %}<li class="flex gap-2 text-[13px] text-slate-300 leading-snug"><span class="text-emerald-400/70 mt-px">+</span>{{ s }}</li>{% endfor %}</ul>
              </div>
              {% endif %}
              {% if analysis.gaps %}
              <div>
                <h4 class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-amber-400 mb-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>Gaps</h4>
                <ul class="space-y-1">{% for g in analysis.gaps %}<li class="flex gap-2 text-[13px] text-slate-300 leading-snug"><span class="text-amber-400/70 mt-px">&minus;</span>{{ g }}</li>{% endfor %}</ul>
              </div>
              {% endif %}
              {% if analysis.talking_points %}
              <div>
                <h4 class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-sky-400 mb-1.5"><span class="w-1.5 h-1.5 rounded-full bg-sky-400"></span>Talking points</h4>
                <ul class="space-y-1">{% for t in analysis.talking_points %}<li class="flex gap-2 text-[13px] text-slate-300 leading-snug"><span class="text-sky-400/70 mt-px">&bull;</span>{{ t }}</li>{% endfor %}</ul>
              </div>
              {% endif %}
              {% if analysis.resume_priority_skills %}
              <div>
                <h4 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Resume priority skills</h4>
                <div class="flex flex-wrap gap-1.5">
                  {% for skill in analysis.resume_priority_skills %}
                    <span class="px-2 py-0.5 rounded text-[13px] bg-indigo-500/15 text-indigo-300 border border-indigo-500/40">{{ skill }}</span>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </section>
            {% endif %}
          {% endif %}

          {# Fit breakdown — repeat of the triage component, in a card. #}
          {% if sub_scores %}
          <section>
            <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2">Fit breakdown</h3>
            <div class="rounded-lg border border-slate-700 bg-slate-800/40 p-4 space-y-2">
              {% for key, label in sub_score_dims %}
                {% set v = sub_scores.get(key, 0) | int %}
                {% set fill = 'bg-emerald-500' if v >= 4 else ('bg-amber-500' if v == 3 else 'bg-red-500') %}
                <div class="grid grid-cols-[110px_1fr_16px] items-center gap-3">
                  <span class="text-xs text-slate-400">{{ label }}</span>
                  <span class="h-1.5 rounded-full bg-slate-950 overflow-hidden"><span class="block h-full rounded-full {{ fill }}" style="width: {{ (v / 5 * 100) }}%"></span></span>
                  <span class="text-xs text-slate-300 text-right tabular-nums">{{ v }}</span>
                </div>
              {% endfor %}
            </div>
          </section>
          {% endif %}

          {# Notes — KEPT (shared partial, unchanged contract). #}
          <section>
            <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2">Notes</h3>
            {% include "jobs/_notes_panel.html" %}
          </section>
        </div>

        {# ===== RIGHT RAIL: timeline · sources · dates ===== #}
        <aside class="space-y-5 min-w-0">

          {# Pipeline timeline — KEPT. Dot colour by whether it's a status change. #}
          <section>
            <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2.5">Pipeline timeline</h3>
            {% if events %}
            <ol class="relative border-l border-slate-700 ml-1.5 space-y-3">
              {% for event in events %}
              <li class="ml-4">
                <div class="absolute -left-1.5 mt-1 h-3 w-3 rounded-full border-2 border-slate-850 {{ 'bg-amber-400' if event.from_status else 'bg-indigo-500' }}"></div>
                <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[13px]">
                  <span class="text-slate-200 font-medium">{{ event.to_status }}</span>
                  {% if event.from_status %}<span class="text-slate-500 text-xs">from {{ event.from_status }}</span>{% endif %}
                  {% if event.source and event.source != 'manual' %}<span class="text-slate-600 text-xs italic">via {{ event.source }}</span>{% endif %}
                </div>
                <span class="text-[11px] font-mono text-slate-500">{{ event.timestamp[:16] | replace("T", " ") }}</span>
              </li>
              {% endfor %}
            </ol>
            {% else %}
            <p class="text-[13px] text-slate-500">No pipeline events yet.</p>
            {% endif %}
          </section>

          {# Sources — FULL list (moved out of triage). KEEP direct-link badge include. #}
          {% if sources_list %}
          <section>
            <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2.5">
              Sources{% if sources_list | length > 1 %} <span class="text-slate-600">· {{ sources_list | length }}</span>{% endif %}
            </h3>
            <div class="flex flex-wrap gap-1.5">
              {% for i in range(sources_list | length) %}
                {% set src_name = sources_list[i] %}
                {% set src_url = urls_list[i] if i < urls_list | length else None %}
                {% if src_url %}
                  <a href="{{ src_url }}" target="_blank" rel="noopener noreferrer"
                     class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-[13px] bg-indigo-500/15 text-indigo-300 hover:text-indigo-200 border border-indigo-500/40">{{ src_name }} &rarr;</a>
                {% else %}
                  <span class="px-2.5 py-1 rounded-md text-[13px] bg-slate-800 text-slate-400 border border-slate-700">{{ src_name }}</span>
                {% endif %}
              {% endfor %}
              {% include "jobs/_direct_link_badge.html" %}
            </div>
          </section>
          {% endif %}

          {# Reference dates. #}
          <section>
            <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2.5">Dates</h3>
            <dl class="space-y-1.5">
              <div class="flex items-baseline gap-3"><dt class="w-20 flex-none text-[11px] uppercase tracking-wider text-slate-500">Posted</dt><dd class="text-[11px] font-mono text-slate-400">{{ (job.posted_date | local_date) if job.posted_date else "—" }}</dd></div>
              <div class="flex items-baseline gap-3"><dt class="w-20 flex-none text-[11px] uppercase tracking-wider text-slate-500">First seen</dt><dd class="text-[11px] font-mono text-slate-400">{{ (job.first_seen | local_date) if job.first_seen else "—" }}</dd></div>
              <div class="flex items-baseline gap-3"><dt class="w-20 flex-none text-[11px] uppercase tracking-wider text-slate-500">Last seen</dt><dd class="text-[11px] font-mono {{ 'text-amber-400' if (job.is_stale or job.expiry_status == 'expired') else 'text-slate-400' }}">{{ (job.last_seen | local_date) if job.last_seen else "—" }}</dd></div>
            </dl>
          </section>
        </aside>
      </div>
    </div>
  </td>
</tr>