{% extends "layouts/dashboard.html" %}
{% block extra_head %}
{% include "rep/partials/quill_head.html" %}
{% include "components/select2_auto_init.html" %}
{% 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">Post a job</span>
</nav>
{% endblock %}

{% block content %}
<div class="">

  <header class="mb-6">
    <p class="ed-eyebrow">Career · New listing</p>
    <h1 class="mt-1 ed-title text-[clamp(2rem,3vw,2.875rem)]">Post a position</h1>
    <p class="mt-1.5 max-w-[60ch] text-sm leading-relaxed text-ruforum-text-muted">
      Share an opportunity with researchers, fellows, and scholars across the RUFORUM network.
    </p>
    <div class="mt-4 flex flex-wrap items-center gap-4 font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">
      <span><span class="font-display text-ruforum-text font-semibold text-sm tabular-nums">175</span> member universities</span>
      <span>·</span>
      <span><span class="font-display text-ruforum-text font-semibold text-sm tabular-nums">40</span> countries</span>
      <span>·</span>
      <span>Active scholars</span>
    </div>
  </header>

  <form method="post" id="rep-job-create-form" class="space-y-5">
    {% csrf_token %}

    {# ── Section 1: The role ─────────────────────────────────── #}
    <section class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
      <div class="flex items-center gap-2.5 border-b border-ruforum-border px-5 py-3">
        <svg class="h-4 w-4 shrink-0 text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z"/>
        </svg>
        <h2 class="font-meta text-xs font-semibold uppercase tracking-wider text-ruforum-text-muted">The role</h2>
      </div>
      <div class="space-y-5 px-5 py-5">

        {# Title — full width #}
        <div>
          <label class="field-label" for="{{ form.title.id_for_label }}">Position title</label>
          {{ form.title }}
          <p class="field-hint">Be specific — "Research Fellow in Soil Science" performs better than "Researcher".</p>
          {% if form.title.errors %}<p class="field-error">{{ form.title.errors|join:", " }}</p>{% endif %}
        </div>

        {# Job type + Sector — 2-col #}
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
          <div>
            <label class="field-label" for="{{ form.job_type.id_for_label }}">{{ form.job_type.label }}</label>
            {{ form.job_type }}
            {% if form.job_type.errors %}<p class="field-error">{{ form.job_type.errors|join:", " }}</p>{% endif %}
          </div>
          <div>
            <label class="field-label" for="{{ form.sector.id_for_label }}">{{ form.sector.label }}</label>
            {{ form.sector }}
            {% if form.sector.errors %}<p class="field-error">{{ form.sector.errors|join:", " }}</p>{% endif %}
          </div>
        </div>

        {# Minimum qualification — SRS FRREP-TS002 filter facet #}
        <div class="border-t border-ruforum-border/60 pt-5">
          <label class="field-label" for="{{ form.min_qualification.id_for_label }}">{{ form.min_qualification.label }}</label>
          {{ form.min_qualification }}
          <p class="field-hint">Used to power the job board's qualification filter.</p>
          {% if form.min_qualification.errors %}<p class="field-error">{{ form.min_qualification.errors|join:", " }}</p>{% endif %}
        </div>
      </div>
    </section>

    {# ── Section 2: Organisation ──────────────────────────────── #}
    <section class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
      <div class="flex items-center gap-2.5 border-b border-ruforum-border px-5 py-3">
        <svg class="h-4 w-4 shrink-0 text-ruforum-primary" 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>
        <h2 class="font-meta text-xs font-semibold uppercase tracking-wider text-ruforum-text-muted">Organisation</h2>
      </div>
      <div class="grid grid-cols-1 gap-5 px-5 py-5 sm:grid-cols-2">
        <div>
          <label class="field-label" for="{{ form.company.id_for_label }}">{{ form.company.label }}</label>
          {{ form.company }}
          {% if form.company.errors %}<p class="field-error">{{ form.company.errors|join:", " }}</p>{% endif %}
        </div>
        <div>
          <label class="field-label" for="{{ form.location.id_for_label }}">{{ form.location.label }}</label>
          {{ form.location }}
          <p class="field-hint">City, or "Remote".</p>
          {% if form.location.errors %}<p class="field-error">{{ form.location.errors|join:", " }}</p>{% endif %}
        </div>
        <div>
          <label class="field-label" for="{{ form.country.id_for_label }}">{{ form.country.label }}</label>
          {{ form.country }}
          <p class="field-hint">Used to power the job board's country filter.</p>
          {% if form.country.errors %}<p class="field-error">{{ form.country.errors|join:", " }}</p>{% endif %}
        </div>
      </div>
    </section>

    {# ── Section 3: Role description ──────────────────────────── #}
    <section class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
      <div class="flex items-center gap-2.5 border-b border-ruforum-border px-5 py-3">
        <svg class="h-4 w-4 shrink-0 text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
        </svg>
        <h2 class="font-meta text-xs font-semibold uppercase tracking-wider text-ruforum-text-muted">Role description</h2>
      </div>
      <div class="space-y-5 px-5 py-5">

        <div>
          <label class="field-label" for="{{ form.description.id_for_label }}">Description</label>
          <div id="quill-job-description"></div>
          <textarea name="{{ form.description.html_name }}" id="{{ form.description.id_for_label }}" class="hidden">{{ form.description.value|default_if_none:""|safe }}</textarea>
          <p class="field-hint">Describe the role, responsibilities, and what success looks like.</p>
          {% if form.description.errors %}<p class="field-error">{{ form.description.errors|join:", " }}</p>{% endif %}
        </div>

        <div class="border-t border-ruforum-border/60 pt-5">
          <label class="field-label" for="{{ form.requirements.id_for_label }}">Requirements</label>
          <div id="quill-job-requirements"></div>
          <textarea name="{{ form.requirements.html_name }}" id="{{ form.requirements.id_for_label }}" class="hidden">{{ form.requirements.value|default_if_none:""|safe }}</textarea>
          <p class="field-hint">Qualifications, experience, and skills required. Be honest — overly long lists discourage strong candidates.</p>
          {% if form.requirements.errors %}<p class="field-error">{{ form.requirements.errors|join:", " }}</p>{% endif %}
        </div>
      </div>
    </section>

    {# ── Section 4: Compensation & timeline ───────────────────── #}
    <section class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
      <div class="flex items-center gap-2.5 border-b border-ruforum-border px-5 py-3">
        <svg class="h-4 w-4 shrink-0 text-ruforum-primary" 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>
        <h2 class="font-meta text-xs font-semibold uppercase tracking-wider text-ruforum-text-muted">Compensation &amp; timeline</h2>
      </div>
      <div class="grid grid-cols-1 gap-5 px-5 py-5 sm:grid-cols-2">
        <div>
          <label class="field-label" for="{{ form.salary_range.id_for_label }}">Salary range</label>
          {{ form.salary_range }}
          <p class="field-hint">Listings with a salary range attract significantly more applicants.</p>
          {% if form.salary_range.errors %}<p class="field-error">{{ form.salary_range.errors|join:", " }}</p>{% endif %}
        </div>
        <div>
          <label class="field-label" for="{{ form.closes_at.id_for_label }}">Application deadline</label>
          {{ form.closes_at }}
          <p class="field-hint">Applications close at midnight on this date.</p>
          {% if form.closes_at.errors %}<p class="field-error">{{ form.closes_at.errors|join:", " }}</p>{% endif %}
        </div>
      </div>
    </section>

    <div class="flex items-center justify-between gap-4 rounded-2xl border border-ruforum-border bg-ruforum-surface-warm px-5 py-4">
      <p class="font-meta text-[11px] text-ruforum-text-muted">
        This listing will be visible to all active members immediately after posting.
      </p>
      <div class="flex shrink-0 items-center gap-3">
        <a href="{% url 'rep_career:job_board' %}" class="btn-secondary">Cancel</a>
        <button type="submit" class="btn-primary">Post listing</button>
      </div>
    </div>
  </form>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/vendor/quill.min.js"></script>
<script>
(function() {
  const toolbarCompact = [['bold','italic'],[{'list':'ordered'},{'list':'bullet'}],['clean']];
  const q1 = new Quill('#quill-job-description', {
    theme: 'snow',
    placeholder: 'Describe the role and responsibilities…',
    modules: { toolbar: toolbarCompact }
  });
  const q2 = new Quill('#quill-job-requirements', {
    theme: 'snow',
    placeholder: 'Qualifications and experience required…',
    modules: { toolbar: toolbarCompact }
  });
  const f1 = document.getElementById('{{ form.description.id_for_label }}');
  const f2 = document.getElementById('{{ form.requirements.id_for_label }}');
  if (f1 && f1.value) q1.root.innerHTML = f1.value;
  if (f2 && f2.value) q2.root.innerHTML = f2.value;
  document.getElementById('rep-job-create-form').addEventListener('submit', function() {
    f1.value = q1.root.innerHTML;
    f2.value = q2.root.innerHTML;
  });
})();
</script>
{% endblock %}