{% 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>

<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 fit_reasons_html %}
<h2>Fit assessment</h2>
<div class="fit-reasons">{{ fit_reasons_html }}</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.description %}
<h2>Description</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:40rem;overflow-y:auto">
  {{ job.description }}
</div>
{% endif %}
{% endblock %}