{% extends "base.html" %}

{% block title %}{{ job.title }} — {{ job.company }} — karyab{% endblock %}

{% block content %}
<a href="/" class="btn" style="margin-bottom:1rem;display:inline-block">← Back to listings</a>

{% if flash %}
<div class="flash-banner" style="background:var(--badge-hi,#d1fae5);border:1px solid #6ee7b7;border-radius:6px;padding:0.6rem 1rem;margin-bottom:1rem;font-size:0.9rem">
  {{ flash }}
</div>
{% endif %}

<div class="job-header">
  <div>
    <h1 style="margin-bottom:0.25rem">{{ job.title }}</h1>
    <div class="job-meta">
      <span>{{ job.company }}</span>
      {% if job.location %}<span>{{ job.location }}</span>{% endif %}
      {% if job.remote %}<span>🏠 Remote</span>{% endif %}
      <span>{{ work_mode }}</span>
      {% if job.salary %}<span>{{ job.salary }}</span>{% endif %}
    </div>
  </div>
  {% if job.fit_score is not none %}
  <span class="badge {{ score_badge_class }}" style="font-size:1.2rem;padding:0.4rem 0.8rem">
    {{ job.fit_score }}/100
  </span>
  {% endif %}
</div>

<p>
  <a href="{{ job.url }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary">
    View job posting ↗
  </a>
</p>

{% if job.fit_score is not none %}
<h2>Fit assessment</h2>
<div class="fit-reasons">
  {% if fit_reasons_html %}{{ fit_reasons_html }}{% else %}<p style="color:var(--muted)">No reasoning recorded for this ranking.</p>{% endif %}
</div>
{% endif %}

<h2>Application status</h2>
{% if current_status %}
<p>Current status: <span class="status-badge status-{{ current_status.value }}">{{ current_status.value|status_label }}</span></p>
{% else %}
<p style="color:var(--muted);font-size:0.9rem">Not tracked yet.</p>
<form method="post" action="/job/{{ job.id }}/apply" style="margin-bottom:0.75rem">
  <button type="submit" class="btn btn-primary">Mark applied</button>
</form>
{% endif %}

<form method="post" action="/job/{{ job.id }}/status" style="margin-top:0.75rem">
  <div style="display:flex;flex-wrap:wrap;gap:0.5rem;align-items:flex-start">
    <select name="status" style="padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg)">
      {% for st in all_statuses %}
      <option value="{{ st }}" {% if current_status and current_status.value == st %}selected{% endif %}>{{ st|status_label }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="btn">Update status</button>
  </div>
  <textarea name="note" placeholder="Optional note..." rows="2"
    style="margin-top:0.4rem;width:100%;padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);resize:vertical;font-size:0.9rem"></textarea>
</form>

<div style="display:flex;gap:0.5rem;margin-top:0.5rem">
  <form method="post" action="/job/{{ job.id }}/status">
    <input type="hidden" name="status" value="withdrawn">
    <button type="submit" class="btn" style="font-size:0.85rem">I reject</button>
  </form>
  <form method="post" action="/job/{{ job.id }}/status">
    <input type="hidden" name="status" value="closed">
    <button type="submit" class="btn" style="font-size:0.85rem">No longer accepting</button>
  </form>
</div>

<h2>Notes</h2>
{% if notes %}
<ul style="list-style:none;padding:0;margin:0 0 0.75rem">
  {% for n in notes %}
  <li style="padding:0.5rem 0;border-bottom:1px solid var(--border)">
    <span style="color:var(--muted);font-size:0.8rem">{{ n.created_at }}</span>
    <p style="margin:0.2rem 0 0;white-space:pre-line;font-size:0.9rem">{{ n.body }}</p>
  </li>
  {% endfor %}
</ul>
{% else %}
<p style="color:var(--muted);font-size:0.9rem">No notes yet.</p>
{% endif %}
<form method="post" action="/job/{{ job.id }}/note">
  <textarea name="note" placeholder="Add a note..." rows="2"
    style="width:100%;padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);resize:vertical;font-size:0.9rem"></textarea>
  <button type="submit" class="btn" style="margin-top:0.35rem">Add note</button>
</form>

{% if packet_html %}
<div class="packet-section">
  <h2>Application packet</h2>
  <div class="packet-content">{{ packet_html }}</div>
</div>
{% endif %}

{% if history and history|length > 1 %}
<h2>Previous appearances</h2>
<ul style="list-style:none;padding:0;margin:0 0 1rem">
  {% for entry in history %}
  <li style="padding:0.4rem 0;border-bottom:1px solid var(--border);font-size:0.9rem">
    <a href="{{ entry.url }}" target="_blank" rel="noopener noreferrer">{{ entry.source }}</a>
    {% set date = (entry.first_seen or entry.posted_at or "")[:10] %}
    {% if date %}<span style="color:var(--muted);margin-left:0.5rem">{{ date }}</span>{% endif %}
    {% if entry.status %}
    <span class="status-badge status-{{ entry.status.value }}" style="margin-left:0.5rem">{{ entry.status.value|status_label }}</span>
    {% endif %}
    {% if entry.job_id != job.id %}
    — <a href="/job/{{ entry.job_id }}">View detail</a>
    {% else %}
    <span style="color:var(--muted);font-size:0.8rem;margin-left:0.5rem">(this posting)</span>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endif %}

{% if siblings %}
<h2>Also listed on</h2>
<ul>
  {% for sib in siblings %}
  <li>
    <a href="{{ sib.url }}" target="_blank" rel="noopener noreferrer">{{ sib.source }}</a>
    — <a href="/job/{{ sib.id }}">View detail</a>
  </li>
  {% endfor %}
</ul>
{% endif %}

{% if job.cover_letter %}
<h2>Cover letter</h2>
<div style="padding:1rem;border:1px solid var(--border);border-radius:6px;white-space:pre-line;font-size:0.9rem;line-height:1.7;max-height:30rem;overflow-y:auto">{{ job.cover_letter }}</div>
{% endif %}

{% if job.suggestions %}
<h2>Tailoring suggestions</h2>
<div style="padding:1rem;border:1px solid var(--border);border-radius:6px;white-space:pre-line;font-size:0.9rem;line-height:1.7;max-height:30rem;overflow-y:auto">{{ job.suggestions }}</div>
{% endif %}

<h2>Generate</h2>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem">
  <form method="post" action="/job/{{ job.id }}/generate-letter" style="display:inline">
    <button type="submit" class="btn">Generate cover letter</button>
  </form>
  <form method="post" action="/job/{{ job.id }}/generate-suggestions" style="display:inline">
    <button type="submit" class="btn">Generate suggestions</button>
  </form>
</div>

<h2>CV</h2>
<div style="display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-bottom:0.75rem">
  <form method="post" action="/job/{{ job.id }}/cv/tailor" style="display:inline">
    <button type="submit" class="btn">Tailor CV</button>
  </form>
  <form method="post" action="/job/{{ job.id }}/cv/render" style="display:inline">
    <input type="hidden" name="fmt" value="pdf">
    <button type="submit" class="btn">Render PDF</button>
  </form>
  <form method="post" action="/job/{{ job.id }}/cv/render" style="display:inline">
    <input type="hidden" name="fmt" value="docx">
    <button type="submit" class="btn">Render DOCX</button>
  </form>
  {% if cv_pdf_exists %}
  <a href="/job/{{ job.id }}/cv/download?fmt=pdf" class="btn btn-primary">Download PDF</a>
  {% endif %}
  {% if cv_docx_exists %}
  <a href="/job/{{ job.id }}/cv/download?fmt=docx" class="btn btn-primary">Download DOCX</a>
  {% endif %}
</div>

<h2>Description</h2>
{% if job.description %}
<div style="padding:1rem;border:1px solid var(--border);border-radius:6px;white-space:pre-line;font-size:0.9rem;line-height:1.7;max-height:40rem;overflow-y:auto">
  {{ job.description }}
</div>
{% else %}
<p style="color:var(--muted);font-size:0.9rem">No description yet.</p>
{% endif %}

<h3 style="margin-top:1rem">Paste job description</h3>
<form method="post" action="/job/{{ job.id }}/paste-description">
  <textarea name="description" rows="6" placeholder="Paste the full job description here..."
    style="width:100%;padding:0.35rem 0.5rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--fg);resize:vertical;font-size:0.9rem"></textarea>
  <button type="submit" class="btn" style="margin-top:0.35rem">Save description</button>
  <span style="color:var(--muted);font-size:0.8rem;margin-left:0.5rem">Note: clears existing rank score — re-rank via Rank action or MCP.</span>
</form>

{% if related %}
<h2>Related jobs</h2>
<ul style="list-style:none;padding:0;margin:0 0 1rem">
  {% for rj in related %}
  <li style="padding:0.4rem 0;border-bottom:1px solid var(--border);font-size:0.9rem">
    <a href="/job/{{ rj.id }}">{{ rj.company }} — {{ rj.title }}</a>
    {% if rj.fit_score is not none %}
    <span class="badge {{ rj.fit_score | score_badge_class }}" style="margin-left:0.4rem">{{ rj.fit_score }}</span>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endif %}
{% endblock %}