{% extends "base.html" %}

{% block title %}
  {% if job %}{{ job.title }} — {{ job.company }}{% else %}Job Not Found{% endif %} — Job Cannon
{% endblock %}

{% block content %}
{% if job is none %}
<div class="max-w-3xl mx-auto py-12 text-center">
  <p class="text-slate-400 text-lg">Job not found.</p>
  <a href="{{ url_for('jobs.index') }}" class="mt-4 inline-block text-indigo-400 hover:text-indigo-300 text-sm">
    &larr; Back to Job Board
  </a>
</div>
{% else %}

{% import "components/_score_macros.html" as fit %}
{% set sources_list = job.sources | from_json if job.sources else [] %}
{% set urls_list = job.source_urls | from_json if job.source_urls else [] %}
{# v3.0 fit = 6-30 composite from sub_scores_json (the legacy 0-100 job.score is dead). #}
{% set composite = fit.composite(job.sub_scores_json) | int %}

<div class="max-w-4xl mx-auto space-y-6">

  <!-- Back link -->
  <a href="{{ url_for('jobs.index') }}" class="text-xs text-slate-500 hover:text-slate-300 flex items-center gap-1">
    &larr; Back to Job Board
  </a>

  <!-- Header card -->
  <div class="bg-slate-800/60 rounded-xl border border-slate-700 p-6">
    <div class="flex items-start justify-between gap-4">
      <div>
        <h1 class="text-2xl font-bold text-slate-100">{{ job.title }}</h1>
        <p class="text-slate-400 mt-1 text-sm">{{ job.company }} &mdash; {{ job.location }}</p>
        {% if job.salary_min or job.salary_max %}
        <p class="text-slate-300 mt-1 text-sm">
          Salary:
          {% 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 %}
        </p>
        {% endif %}
        <div class="flex flex-wrap gap-2 mt-3 text-xs text-slate-500">
          <span>First seen: {{ (job.first_seen | local_date) if job.first_seen else "—" }}</span>
          <span>&bull;</span>
          <span>Last seen: {{ (job.last_seen | local_date) if job.last_seen else "—" }}</span>
          {% if job.posted_date %}
          <span>&bull;</span>
          <span>Posted: {{ job.posted_date | local_date }}</span>
          {% endif %}
        </div>
      </div>
      <!-- Fit composite (sum of 6 sub-scores, 6-30) -->
      <div class="flex flex-col items-center gap-2 shrink-0">
        <span class="text-3xl font-black {{ fit.text_class(composite) }}">
          {{ composite if composite > 0 else "—" }}
        </span>
        <span class="text-xs text-slate-500">fit / 30</span>
      </div>
    </div>

    <!-- Status update -->
    <div class="mt-4 flex items-center gap-3">
      <span class="text-xs text-slate-500">Status:</span>
      <select name="pipeline_status"
              aria-label="Pipeline status"
              hx-post="{{ url_for('jobs.update_status', dedup_key=job.dedup_key) }}"
              hx-trigger="change"
              hx-target="this"
              hx-swap="outerHTML"
              class="appearance-auto bg-slate-700 text-slate-200 text-xs rounded px-2 py-1 border border-slate-600 focus:outline-none focus:border-indigo-500">
        {% for s in pipeline_statuses %}
          <option value="{{ s }}" {% if job.pipeline_status == s %}selected{% endif %}>
            {{ s | replace('_', ' ') | title }}
          </option>
        {% endfor %}
      </select>
    </div>
  </div>

  <!-- Sources -->
  {% if sources_list %}
  <div class="bg-slate-800/40 rounded-lg border border-slate-700 p-4">
    <h2 class="text-sm font-semibold text-slate-300 mb-3">Sources</h2>
    <div class="flex flex-wrap gap-2">
      {% 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-3 py-1.5 rounded-lg bg-indigo-900/40 text-indigo-300 hover:text-indigo-200 border border-indigo-700/50 text-sm">
            {{ src_name }} &rarr;
          </a>
        {% else %}
          <span class="px-3 py-1.5 rounded-lg bg-slate-700 text-slate-400 text-sm">{{ src_name }}</span>
        {% endif %}
      {% endfor %}
      {% include "jobs/_direct_link_badge.html" %}
    </div>
  </div>
  {% endif %}

  <!-- Full description: render the fullest JD available (jd_full is capped at
       write time and the raw `description` is sometimes longer; show whichever
       is longer). -->
  {% 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 %}
  <div class="bg-slate-800/40 rounded-lg border border-slate-700 p-4">
    <h2 class="text-sm font-semibold text-slate-300 mb-3">Description</h2>
    <div class="text-sm text-slate-300 leading-relaxed">{{ jd_display | format_description }}</div>
  </div>
  {% endif %}

  <!-- Pipeline timeline -->
  <div class="bg-slate-800/40 rounded-lg border border-slate-700 p-4">
    <h2 class="text-sm font-semibold text-slate-300 mb-3">Pipeline Timeline</h2>
    {% if events %}
      <ol class="relative border-l border-slate-700 ml-3 space-y-4">
        {% for event in events %}
        <li class="ml-4">
          <div class="absolute -left-1.5 mt-1.5 h-3 w-3 rounded-full bg-indigo-500 border-2 border-slate-900"></div>
          <div class="flex items-center gap-2 text-xs">
            <span class="text-slate-400">{{ event.timestamp[:16] | replace("T", " ") }}</span>
            <span class="text-slate-600">&bull;</span>
            {% if event.from_status %}
              <span class="text-slate-500">{{ event.from_status }}</span>
              <span class="text-slate-600">&rarr;</span>
            {% endif %}
            <span class="text-slate-200 font-medium">{{ event.to_status }}</span>
            {% if event.source != 'manual' %}
              <span class="text-slate-600 italic">via {{ event.source }}</span>
            {% endif %}
          </div>
        </li>
        {% endfor %}
      </ol>
    {% else %}
      <p class="text-xs text-slate-500">No pipeline events yet.</p>
    {% endif %}
  </div>

  <!-- Notes panel -->
  {% include "jobs/_notes_panel.html" %}

</div>
{% endif %}
{% endblock %}