{% extends "layouts/dashboard.html" %}
{% block extra_head %}
{% include "rep/partials/quill_head.html" %}
<style>
  .job-prose { line-height: 1.75; color: #1c1610; }
  .job-prose p  { margin-top: 0.75em; margin-bottom: 0.75em; font-size: 0.9375rem; }
  .job-prose ul { margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 1.25rem; list-style-type: disc; }
  .job-prose ol { margin-top: 0.5em; margin-bottom: 0.5em; padding-left: 1.25rem; list-style-type: decimal; }
  .job-prose li { margin-top: 0.3em; font-size: 0.9375rem; }
  .job-prose strong { font-weight: 600; }
  .job-prose a { color: #6b5317; text-decoration: underline; }
  .job-prose > *:first-child { margin-top: 0; }
  .job-prose > *:last-child  { margin-bottom: 0; }
</style>
{% endblock %}

{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  {% include "components/crumb_sep.html" %}
  <span class="opacity-60">REP</span>
  {% include "components/crumb_sep.html" %}
  <a href="{% url 'rep_career:job_board' %}" class="hover:text-ruforum-primary transition-colors">Job board</a>
  {% include "components/crumb_sep.html" %}
  <span class="text-ruforum-text">{{ listing.title|truncatechars:40 }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="mx-auto w-full max-w-7xl">
  <div class="grid grid-cols-1 gap-6 lg:grid-cols-3 lg:gap-8">

    {# Main column #}
    <div class="min-w-0 space-y-5 lg:col-span-2">

      {# ── Header ─────────────────────────────────────────────── #}
      <header class="rounded-xl border border-ruforum-border bg-white px-6 pb-6 pt-5 shadow-card">

        <div class="flex items-start justify-between gap-3">
          <p class="ed-eyebrow">Career · Position</p>
          {% if user.is_authenticated %}
          <form method="post" action="{% url 'rep_career:job_save_toggle' listing.pk %}">
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ request.get_full_path }}">
            <button type="submit"
                    class="btn-secondary btn-sm inline-flex items-center gap-1.5 {% if is_saved %}!border-ruforum-primary !text-ruforum-primary{% endif %}"
                    aria-pressed="{% if is_saved %}true{% else %}false{% endif %}">
              {% include "components/icon.html" with name="bookmark" css="h-3.5 w-3.5 shrink-0" %}
              {% if is_saved %}Saved{% else %}Save job{% endif %}
            </button>
          </form>
          {% endif %}
        </div>

        {# Badges #}
        <div class="mt-2 flex flex-wrap items-center gap-2">
          <span class="score-muted">{{ listing.get_job_type_display }}</span>
          {% if listing.sector %}<span class="score-muted">{{ listing.sector }}</span>{% endif %}
          {% if listing.country %}<span class="score-muted">{{ listing.country }}</span>{% endif %}
          {% if listing.min_qualification %}<span class="score-muted">{{ listing.get_min_qualification_display }}+</span>{% endif %}
          {% if listing.closes_soon %}<span class="score-warn">Closing soon</span>{% endif %}
        </div>

        {# Title #}
        <h1 class="mt-3 ed-title text-[clamp(2rem,3vw,2.875rem)]">
          {{ listing.title }}
        </h1>

        {# Company + location #}
        <div class="mt-3 flex flex-wrap items-center gap-x-5 gap-y-1.5">
          <span class="flex items-center gap-1.5 text-sm font-semibold text-ruforum-text">
            <svg class="h-4 w-4 shrink-0 text-ruforum-primary/70" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21"/>
            </svg>
            {{ listing.company }}
          </span>
          {% if listing.location %}
          <span class="flex items-center gap-1.5 text-sm text-ruforum-text-muted">
            <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
            </svg>
            {{ listing.location }}
          </span>
          {% endif %}
        </div>

        {# Meta strip: posted + deadline #}
        <div class="mt-4 flex flex-wrap items-center gap-x-5 gap-y-1 border-t border-ruforum-border/60 pt-4 font-meta text-xs text-ruforum-text-muted">
          <span class="flex items-center gap-1.5">
            <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
            Posted {{ listing.created_at|date:"j F Y" }}
          </span>
          {% if listing.closes_at %}
          <span class="flex items-center gap-1.5 {% if listing.closes_soon %}text-amber-700 font-semibold{% endif %}">
            <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>
            </svg>
            Closes {{ listing.closes_at|date:"j F Y" }}
          </span>
          {% endif %}
          {% if listing.salary_range %}
          <span class="flex items-center gap-1.5">
            <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
            {{ listing.salary_range }}
          </span>
          {% endif %}
        </div>
      </header>

      {# ── Content card: description + requirements ─────────── #}
      <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">

        <div class="px-6 py-6">
          <h2 class="form-section-label mb-5">Job description</h2>
          <div class="job-prose">{{ listing.description|safe }}</div>
        </div>

        {% if listing.requirements %}
        <div class="border-t border-ruforum-border bg-ruforum-surface/40 px-6 py-6">
          <h2 class="form-section-label mb-5">Requirements</h2>
          <div class="job-prose">{{ listing.requirements|safe }}</div>
        </div>
        {% endif %}
      </div>

    </div>{# /main column #}

    {# Sidebar #}
    <aside>
      <div class="sticky top-20 space-y-4">

        {# ── Details fact sheet ──────────────────────────────── #}
        <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
          <div class="border-b border-ruforum-border bg-ruforum-surface px-5 py-3">
            <h2 class="font-meta text-xs font-semibold uppercase tracking-wider text-ruforum-text-muted">Position details</h2>
          </div>
          <div class="divide-y divide-ruforum-border/70">

            {% if listing.salary_range %}
            <div class="flex items-start gap-3 px-5 py-3.5">
              <svg class="mt-0.5 h-4 w-4 shrink-0 text-ruforum-primary/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
              </svg>
              <div class="min-w-0">
                <p class="font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted">Salary</p>
                <p class="mt-0.5 text-sm font-medium text-ruforum-text">{{ listing.salary_range }}</p>
              </div>
            </div>
            {% endif %}

            {% if listing.closes_at %}
            <div class="flex items-start gap-3 px-5 py-3.5">
              <svg class="mt-0.5 h-4 w-4 shrink-0 {% if listing.closes_soon %}text-amber-600{% else %}text-ruforum-primary/60{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"/>
              </svg>
              <div class="min-w-0">
                <p class="font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted">Deadline</p>
                <p class="mt-0.5 text-sm {% if listing.closes_soon %}font-semibold text-amber-700{% else %}text-ruforum-text{% endif %}">
                  {{ listing.closes_at|date:"j F Y" }}
                  {% if listing.closes_soon %}<span class="ml-1 score-warn">Soon</span>{% endif %}
                </p>
              </div>
            </div>
            {% endif %}

            {% if listing.posted_by %}
            <div class="flex items-start gap-3 px-5 py-3.5">
              <svg class="mt-0.5 h-4 w-4 shrink-0 text-ruforum-primary/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
              </svg>
              <div class="min-w-0">
                <p class="font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted">Posted by</p>
                <p class="mt-0.5 text-sm text-ruforum-text">
                  {{ listing.posted_by.get_full_name|default:listing.posted_by.email }}
                </p>
              </div>
            </div>
            {% endif %}

            {% if can_view_applications %}
            <div class="px-5 py-4">
              <div class="flex items-start gap-3">
                <svg class="mt-0.5 h-4 w-4 shrink-0 text-ruforum-primary/60" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z"/>
                </svg>
                <div class="min-w-0 flex-1">
                  <p class="font-meta text-xs font-semibold uppercase tracking-wide text-ruforum-text-muted">Applications</p>
                  <p class="mt-0.5 text-sm text-ruforum-text">
                    {{ listing_application_count }} received
                  </p>
                </div>
              </div>
              <a href="{% url 'rep_career:job_applications' listing.pk %}"
                 class="mt-3 btn-primary btn-sm w-full justify-center">
                Review applications
              </a>
              {% if can_edit_listing %}
              <a href="{% url 'rep_career:job_edit' listing.pk %}"
                 class="mt-2 btn-secondary btn-sm w-full justify-center">
                Edit listing
              </a>
              {% endif %}
            </div>
            {% endif %}

          </div>
        </div>

        {# ── Application card ────────────────────────────────── #}
        <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">

          {% if already_applied %}

          <div class="px-5 py-5">
            <div class="flex items-start gap-3 rounded-lg bg-emerald-50 px-4 py-3.5">
              <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-emerald-600">
                <svg class="h-3.5 w-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                </svg>
              </span>
              <div>
                <p class="text-sm font-semibold text-emerald-800">Application submitted</p>
                <p class="mt-0.5 font-meta text-xs text-emerald-700/80">You'll be notified of any updates to your application.</p>
              </div>
            </div>
          </div>

          {% else %}

          <div class="border-b border-ruforum-border bg-ruforum-surface px-5 py-3">
            <h3 class="font-meta text-xs font-semibold uppercase tracking-wider text-ruforum-text-muted">Apply for this position</h3>
          </div>

          <form method="post" id="rep-job-apply-form" enctype="multipart/form-data" class="px-5 py-5 space-y-4">
            {% csrf_token %}

            <div>
              <label class="field-label" for="{{ form.cover_letter.id_for_label }}">Cover letter</label>
              <div id="quill-cover-letter"></div>
              <textarea name="{{ form.cover_letter.html_name }}" id="{{ form.cover_letter.id_for_label }}" class="hidden">{{ form.cover_letter.value|default_if_none:""|safe }}</textarea>
              {% if form.cover_letter.errors %}
              <p class="field-error">{{ form.cover_letter.errors|join:", " }}</p>
              {% endif %}
            </div>

            <div>
              <label class="field-label" for="{{ form.cover_letter_file.id_for_label }}">Cover letter file</label>
              {{ form.cover_letter_file }}
              <p class="field-hint">Optional PDF or Word document.</p>
              {% if form.cover_letter_file.errors %}
              <p class="field-error">{{ form.cover_letter_file.errors|join:", " }}</p>
              {% endif %}
            </div>

            <button type="submit" class="btn-primary w-full justify-center mt-1">Apply now</button>
          </form>

          {% endif %}

          {# CV profile link — always shown #}
          <div class="border-t border-ruforum-border/60 px-5 py-3.5">
            <a href="{% url 'rep_career:cv_builder' %}"
               class="flex items-center gap-2 text-xs font-medium text-ruforum-primary transition-colors hover:text-ruforum-primary-hover">
              <svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125"/>
              </svg>
              Update your CV profile
            </a>
          </div>

        </div>{# /application card #}

      </div>{# /sticky #}
    </aside>

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

{% block extra_js %}
<script src="/static/js/vendor/quill.min.js"></script>
<script>
(function() {
  const form = document.getElementById('rep-job-apply-form');
  if (!form) return;
  const toolbarCompact = [['bold','italic'],[{'list':'ordered'},{'list':'bullet'}],['clean']];
  const quill = new Quill('#quill-cover-letter', {
    theme: 'snow',
    placeholder: 'Optional cover letter…',
    modules: { toolbar: toolbarCompact }
  });
  const field = document.getElementById('{{ form.cover_letter.id_for_label }}');
  if (field && field.value) quill.root.innerHTML = field.value;
  form.addEventListener('submit', function() {
    field.value = quill.root.innerHTML;
  });
})();
</script>
{% endblock %}