{# ===========================================================================
   jobs/_row_expanded.html  —  TRIAGE TIER (tier 1 of 2)
   ===========================================================================
   Inserted into the placeholder <tr> when a compact row is clicked
   (GET /jobs/<key>/expand → outerHTML swap of nextElementSibling).

   DESIGN DECISION #1 — "two expansion tiers, distinct (no content overlap)":
     The OLD accordion crammed EVERYTHING in here (full JD, full AI analysis incl.
     talking points + resume skills, all sources, every action). The redesign
     splits triage from deep-dive:
       • THIS tier answers ONE question — "is this worth my time?" — and shows
         only: low-fit nudge · fit breakdown · tight strengths/gaps (≤4 each) ·
         a decision rail (status + apply + overflow) · reference dates.
       • The DEEP DIVE (jobs/_row_detail.html, reached via "View Full Detail")
         owns the full JD, full AI analysis (+ talking points + resume skills),
         pipeline timeline, notes, and all sources.
     Talking points, resume skills, JD body, timeline, notes, source list were
     all MOVED OUT of this file ON PURPOSE — they are NOT deleted, they live one
     tier down. Do not re-add them here.

   PRESERVED behaviors / contracts (keep exact):
     • "View Full Detail"  -> hx-get jobs.detail_inline, target closest tr, outerHTML.
     • "Re-score"          -> hx-post jobs.rescore,       target closest tr, outerHTML
                              (its response carries the OOB score-cell swap that
                              drives the client re-sort — unchanged).
     • "Archive"           -> hx-post jobs.update_status hx-vals pipeline_status=archived,
                              target #status-cell-<key>, hx-on::after-request="archiveRow(this)".
     • "Collapse"          -> hx-get jobs.collapse, target closest tr, outerHTML.
     • Unscored job        -> the JD paste/save/score form is KEPT (a job can only
                              be triaged once scored) — see the {% else %} branch.
#}

{% 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 analysis = job.fit_analysis | from_json if job.fit_analysis else {} %}

{# Band — same 3-band split as the score chip (⚑ see _score_cell.html FLAG). #}
{% set band = 'success' if composite >= 24 else ('warning' if composite >= 17 else 'error') %}

{# 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) %}

{% set first_seen_date = (job.first_seen | local_date) if job.first_seen else "—" %}
{% set last_seen_date  = (job.last_seen  | local_date) if job.last_seen  else "—" %}
{% set _pd_approx = job.posted_date and job.posted_date_precision in ('approximate', 'proxy') %}
{% set posted_date     = (('~' if _pd_approx else '') ~ (job.posted_date | local_date)) if job.posted_date else "—" %}
{% set jd_key_safe = job.dedup_key | urlencode | replace('%', '') %}

{# DESIGN DECISION: the expanded panel sits on slate-850 (one plane lighter than
   the table's slate-800) so the open row reads as a distinct surface. #}
<tr class="border-b border-slate-700 bg-slate-850" data-row-expanded="triage">
  <td colspan="7" class="px-4 pt-5 pb-5">

    {# Error banner (from paste_jd / rescore) — KEPT. #}
    {% if error %}
    <div class="bg-red-900/50 border border-red-700/50 rounded-md px-3 py-2 text-xs text-red-300 mb-4">{{ error }}</div>
    {% endif %}

    {# Low-fit nudge — DESIGN DECISION: now driven by the SCORE BAND (weak = ≤16),
       not job.classification, so the triage signal matches the chip the user just
       saw. Only shown for scored + weak rows. #}
    {% if scored and band == 'error' %}
    <div class="flex items-start gap-2 rounded-md border border-red-400/40 bg-red-400/10 px-3 py-2 mb-5">
      <span class="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-400 flex-none"></span>
      <p class="text-[13px] text-red-400">Low fit ({{ composite }}/30). Likely a skip — scan the gaps below before spending time here.</p>
    </div>
    {% endif %}

    <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_300px] gap-x-10 gap-y-6">

      {# ===================== LEFT — "the read" ===================== #}
      <div class="space-y-5 min-w-0">
      {% if scored %}
        {# Fit breakdown — 6 sub-scores as thin tracks. DESIGN DECISION: 3 fill
           colours (≥4 emerald / =3 amber / ≤2 red); the old extra orange-for-2
           tier was dropped to match the chip's 3-band language. #}
        <section>
          <h4 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2.5">Fit breakdown</h4>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2">
            {% for key, label in [
              ('title_fit','Title fit'), ('location_fit','Location'), ('comp_fit','Compensation'),
              ('domain_match','Domain'), ('seniority_match','Seniority'), ('skills_match','Skills')
            ] %}
              {% 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-[84px_1fr_16px] items-center gap-2.5">
                <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>

        {# Strengths / Gaps — DESIGN DECISION: capped at 4 each (triage glance).
           Talking points + resume skills intentionally NOT here (deep-dive tier). #}
        {% if analysis.strengths or analysis.gaps %}
        <section class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
          <div>
            <h4 class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-emerald-400 mb-2">
              <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 or [])[:4] %}
              <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>
          <div>
            <h4 class="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-amber-400 mb-2">
              <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 or [])[:4] %}
              <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>
        </section>
        {% endif %}

      {% else %}
        {# ---- UNSCORED branch — KEPT from the original accordion ----
           A row can't be triaged until it's scored, so the JD paste/save/score
           affordance lives here (NOT deleted). Routes + targets preserved:
             save_jd / paste_jd -> target "closest tr", outerHTML. #}
        <section>
          <h4 class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2">Not scored yet</h4>
          <p class="text-[13px] text-slate-400 mb-2">Paste the job description to score this listing, then expand again to triage it.</p>
          <form>
            <textarea name="jd_text" rows="4" placeholder="Paste the full job description here..."
                      class="w-full bg-slate-950 border border-slate-600 rounded-md px-3 py-2 text-[13px] text-slate-100 focus:border-indigo-500 focus:outline-none resize-y"></textarea>
            <div class="flex gap-2 mt-2">
              <button type="button"
                      hx-post="{{ url_for('jobs.save_jd', dedup_key=job.dedup_key) }}"
                      hx-target="closest tr" hx-swap="outerHTML" hx-include="closest form" hx-disable-elt="this"
                      class="px-3 h-8 inline-flex items-center bg-slate-750 border border-slate-600 hover:bg-slate-700 text-slate-200 text-[13px] rounded-md transition-colors disabled:opacity-50">Save JD</button>
              <button type="button"
                      hx-post="{{ url_for('jobs.paste_jd', dedup_key=job.dedup_key) }}"
                      hx-target="closest tr" hx-swap="outerHTML" hx-include="closest form" hx-disable-elt="this"
                      class="px-3 h-8 inline-flex items-center gap-1.5 bg-indigo-600 hover:bg-indigo-500 text-white text-[13px] font-medium rounded-md transition-colors disabled:opacity-50">
                Score with JD
                <span class="htmx-indicator inline-block w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
              </button>
            </div>
          </form>
        </section>
      {% endif %}
      </div>

      {# ===================== RIGHT — "the decision rail" ===================== #}
      <aside class="lg:border-l lg:border-slate-700/60 lg:pl-8 flex flex-col">
        <span class="block text-[11px] font-semibold uppercase tracking-wider text-slate-500 mb-2">Status &amp; actions</span>

        {# Actions row: status (fills) + Apply + overflow. Single line, never wraps. #}
        <div class="flex items-center gap-2">
          <div class="flex-1 min-w-0">{% include "jobs/_status_cell.html" %}</div>

          {# Apply — opens the listing in a new tab (target chosen by apply_url_for). #}
          {% if apply_url %}
          <a href="{{ apply_url }}" target="_blank" rel="noopener noreferrer"
             class="inline-flex h-9 flex-none 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>
          {% else %}
          <span class="inline-flex h-9 flex-none items-center rounded-md bg-slate-800 px-3.5 text-sm font-medium text-slate-600 cursor-not-allowed" title="No listing URL on file">Apply</span>
          {% endif %}

          {# Overflow menu — DESIGN DECISION: Re-score / Archive / Research company
             collapsed behind a ⋯ button to declutter the rail. Native <details>
             (no extra JS); opens upward. Each item keeps its original HTMX contract. #}
          <details class="jc-menu relative flex-none">
            <summary class="list-none inline-flex items-center justify-center w-9 h-9 rounded-md border border-slate-600 bg-slate-750 text-slate-300 hover:bg-slate-700 hover:text-slate-100 transition-colors cursor-pointer"
                     aria-label="More actions">
              <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h.01M12 12h.01M19 12h.01"/></svg>
            </summary>
            <div class="absolute right-0 bottom-full mb-1.5 w-48 rounded-lg border border-slate-700 bg-slate-800 shadow-[0_12px_32px_-8px_rgba(0,0,0,0.55)] py-1 z-30">
              {# Re-score — KEEP target/swap: response carries the OOB score-cell swap. #}
              {% if job.jd_full %}
              <button type="button"
                      hx-post="{{ url_for('jobs.rescore', dedup_key=job.dedup_key) }}"
                      hx-target="closest tr" hx-swap="outerHTML" hx-disable-elt="this"
                      class="flex w-full items-center gap-2.5 px-3 py-2 text-[13px] text-slate-300 hover:bg-slate-750 hover:text-slate-100 transition-colors">
                <svg class="w-4 h-4 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4v5h.582M20 20v-5h-.581M4.582 9A8 8 0 0118.418 7M19.418 15A8 8 0 015.582 17"/></svg>
                Re-score
              </button>
              {% endif %}
              {# Archive — KEEP exact: status OOB target + archiveRow() fade-out. #}
              <button type="button"
                      aria-label="Archive this job"
                      hx-post="{{ url_for('jobs.update_status', dedup_key=job.dedup_key) }}"
                      hx-vals='{"pipeline_status": "archived"}'
                      hx-target="#status-cell-{{ jd_key_safe }}" hx-swap="innerHTML"
                      hx-confirm="Archive this job?" hx-disable-elt="this"
                      hx-on::after-request="archiveRow(this)"
                      class="flex w-full items-center gap-2.5 px-3 py-2 text-[13px] text-slate-300 hover:bg-slate-750 hover:text-slate-100 transition-colors">
                <svg class="w-4 h-4 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 8h14M5 8a2 2 0 01-2-2V5a1 1 0 011-1h16a1 1 0 011 1v1a2 2 0 01-2 2M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8M10 12h4"/></svg>
                Archive
              </button>
              {# Research company — KEEP: only when company_id present. #}
              {% if job.company_id %}
              <button type="button"
                      hx-post="{{ url_for('companies.research', company_id=job.company_id) }}"
                      hx-target="this" hx-swap="outerHTML" hx-disable-elt="this"
                      class="flex w-full items-center gap-2.5 px-3 py-2 text-[13px] text-slate-300 hover:bg-slate-750 hover:text-slate-100 transition-colors">
                <svg class="w-4 h-4 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 21l-4.35-4.35M11 17a6 6 0 100-12 6 6 0 000 12z"/></svg>
                Research company
              </button>
              {% endif %}
              {# Track careers page (WP6) — gated on job.company (raw name),
                 NOT company_id: most jobs lack the FK; tracking is by name.
                 is_company_tracked is a Jinja global (single-point check —
                 every render site of this partial gets it for free). #}
              {% if job.company %}
                {% with company_name = job.company, dedup_key = job.dedup_key, ui = 'menu', tracked = is_company_tracked(job.company) %}
                  {% include "companies/_track_button.html" %}
                {% endwith %}
              {% endif %}
            </div>
          </details>
        </div>

        {# Open full detail — its own full-width row. Reaches the deep-dive tier. #}
        <button type="button"
                hx-get="{{ url_for('jobs.detail_inline', dedup_key=job.dedup_key) }}"
                hx-target="closest tr" hx-swap="outerHTML" hx-disable-elt="this"
                class="mt-2 inline-flex h-9 w-full items-center justify-between gap-1.5 rounded-md border border-slate-600 bg-slate-750 px-3.5 text-sm font-medium text-slate-200 hover:bg-slate-700 hover:text-slate-100 transition-colors disabled:opacity-50">
          Open full detail
          <svg class="w-3.5 h-3.5 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg>
        </button>

        {# Reference dates — centered in the rail's leftover space. DESIGN DECISION:
           freshness signal driven by job.is_stale / job.expiry_status (server-
           computed) — last-seen turns amber + a "may be expired" line.
           ⚑ The design mock showed an exact "· Nd ago" day count; the schema has
           no precomputed delta, so we surface the boolean signal instead. PORTER:
           pass a `days_since_last_seen` if you want the literal count back. #}
        <dl class="my-auto space-y-1.5 pt-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">{{ posted_date }}</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">{{ first_seen_date }}</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' }}">
              {{ last_seen_date }}
            </dd>
          </div>
          {% if job.expiry_status == 'expired' %}
            <p class="text-[11px] text-amber-400/90 pt-0.5">Marked expired — this listing may be gone.</p>
          {% elif job.is_stale %}
            <p class="text-[11px] text-amber-400/90 pt-0.5">Not seen recently — may be expired.</p>
          {% endif %}
        </dl>

        {# Bottom collapse — KEPT (reachable without scrolling up). Fires the
           HX-Trigger-After-Settle 'job-collapsed' → smooth scroll-back. #}
        <div class="flex justify-end border-t border-slate-700/60 pt-3 mt-3">
          <button type="button"
                  hx-get="{{ url_for('jobs.collapse', dedup_key=job.dedup_key) }}"
                  hx-target="closest tr" hx-swap="outerHTML" hx-disable-elt="this"
                  class="px-3 h-8 inline-flex items-center gap-1.5 bg-slate-750 border border-slate-600 hover:bg-slate-700 text-slate-300 text-[13px] rounded-md transition-colors disabled:opacity-50">
            Collapse
          </button>
        </div>
      </aside>

    </div>
  </td>
</tr>