{% extends "layouts/dashboard.html" %}
{% load math_tags %}
{% 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="text-ruforum-text">Job board</span>
</nav>
{% endblock %}

{% block content %}
{% include "components/page_header.html" with title="Job board" subtitle="Opportunities across the RUFORUM network — 175 universities, 40 countries." %}
{% include "components/ai_callout.html" with label="AI · Profile match" summary="When you sort by relevance, listings are ranked against your CV skills and recent course completions — your visible match score updates as your profile grows." footnote="Sort by 'Closing soon' to override the relevance ranking and prioritise application deadlines." %}
<div class="mt-3 mb-6 flex flex-wrap items-center gap-2">
  <a href="{% url 'rep_career:resource_library' %}" class="btn-secondary btn-sm">Resources</a>
  <a href="{% url 'rep_career:my_applications' %}" class="btn-secondary btn-sm">My applications</a>
  <a href="{% url 'rep_career:my_saved_jobs' %}" class="btn-secondary btn-sm">Saved jobs</a>
  {% if perms.rep_courses.manage_courses or user.is_staff %}
  <a href="{% url 'rep_career:listing_reviews' %}" class="btn-secondary btn-sm">Review listings</a>
  <a href="{% url 'rep_career:job_create' %}" class="btn-primary btn-sm">Post a job</a>
  {% endif %}
</div>

{# ── Filter form ─────────────────────────────────────────────────── #}
<form method="get" id="filter-form" x-data class="mb-6">
  <div class="mb-3 relative">
    <svg class="repo-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
    <input type="search" name="q" value="{{ request.GET.q }}" placeholder="Positions, companies, locations, sectors…" class="repo-search-input" id="job-board-q">
  </div>
  <div class="flex flex-wrap items-center gap-3">
    {% if distinct_sectors %}
    <select name="sector" @change="$el.form.submit()" class="w-auto !py-2 !text-sm" style="min-width:11rem;">
      <option value="">All sectors</option>
      {% for s in distinct_sectors %}<option value="{{ s }}" {% if request.GET.sector == s %}selected{% endif %}>{{ s }}</option>{% endfor %}
    </select>
    {% endif %}
    {% if distinct_countries %}
    <select name="country" @change="$el.form.submit()" class="w-auto !py-2 !text-sm" style="min-width:11rem;">
      <option value="">All countries</option>
      {% for c in distinct_countries %}<option value="{{ c }}" {% if request.GET.country == c %}selected{% endif %}>{{ c }}</option>{% endfor %}
    </select>
    {% endif %}
    <select name="min_qualification" @change="$el.form.submit()" class="w-auto !py-2 !text-sm" style="min-width:11rem;">
      <option value="">Any qualification</option>
      {% for value, label in min_qualification_choices %}<option value="{{ value }}" {% if request.GET.min_qualification == value %}selected{% endif %}>{{ label }}</option>{% endfor %}
    </select>
    <select name="sort" @change="$el.form.submit()" class="w-auto !py-2 !text-sm" style="min-width:11rem;">
      <option value="" {% if not request.GET.sort %}selected{% endif %}>Newest first</option>
      <option value="closing" {% if request.GET.sort == 'closing' %}selected{% endif %}>Closing soon</option>
    </select>
    <div class="flex flex-wrap items-center gap-1.5">
      <span class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted mr-1">Type</span>
      {% with current_type=request.GET.job_type %}
      <label class="facet-chip cursor-pointer {% if not current_type %}facet-chip--active{% endif %}">
        <input type="radio" name="job_type" value="" class="sr-only" {% if not current_type %}checked{% endif %} @change="$el.form.submit()">All
      </label>
      {% for value, label in job_type_choices %}
      <label class="facet-chip cursor-pointer {% if current_type == value %}facet-chip--active{% endif %}">
        <input type="radio" name="job_type" value="{{ value }}" class="sr-only" {% if current_type == value %}checked{% endif %} @change="$el.form.submit()">{{ label }}
      </label>
      {% endfor %}
      {% endwith %}
    </div>
    <button type="submit" class="btn-secondary btn-sm shrink-0">Search</button>
    {% if request.GET.q or request.GET.job_type or request.GET.sector or request.GET.country or request.GET.min_qualification or request.GET.sort %}
    <a href="{% url 'rep_career:job_board' %}" class="ml-auto font-meta text-[11px] font-semibold uppercase tracking-[0.10em] text-ruforum-primary hover:text-ruforum-primary-hover">Clear all</a>
    {% endif %}
  </div>
</form>

<p class="hit-count mb-4">
  <strong>{{ page_obj.paginator.count }}</strong> position{{ page_obj.paginator.count|pluralize }} found
</p>

{# ── Listings ────────────────────────────────────────────────────── #}
{% if listings %}
<div class="rounded-2xl border border-ruforum-border bg-white divide-y divide-ruforum-border overflow-hidden">
  {% for listing in listings %}
  <article class="stagger-in flex items-start gap-5 px-5 py-4 transition-colors hover:bg-ruforum-warm-hover" style="--index: {{ forloop.counter0 }};">
    {# Company monogram — deterministic from listing.pk so it stays stable. #}
    <div class="avatar avatar-{{ listing.pk|modulo:6 }} h-11 w-11 shrink-0 rounded-xl font-display text-[15px] font-semibold leading-none mt-0.5" title="{{ listing.company }}" aria-hidden="true">
      {{ listing.company|slice:":1"|upper }}{% if listing.company|length > 1 %}{{ listing.company|slice:"1:2"|upper }}{% endif %}
    </div>
    <div class="min-w-0 flex-1">
      <div class="flex flex-wrap items-center gap-1.5">
        <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.pk in my_applications %}<span class="score-pass"><span class="status-pill__dot"></span>Applied</span>{% endif %}
        {% if listing.closes_soon %}<span class="score-warn"><span class="status-pill__dot"></span>Closing soon</span>{% endif %}
      </div>
      <a href="{% url 'rep_career:job_detail' listing.pk %}"
         class="mt-2 block font-display text-lg font-semibold leading-snug text-ruforum-text hover:text-ruforum-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ruforum-primary rounded">
        {{ listing.title }}
      </a>
      <p class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 font-meta text-[11px] text-ruforum-text-muted">
        <span class="font-semibold">{{ listing.company }}</span>
        {% if listing.location %}<span>· {{ listing.location }}</span>{% endif %}
        {% if listing.salary_range %}<span>· {{ listing.salary_range }}</span>{% endif %}
        {% if listing.closes_at %}<span>· Closes {{ listing.closes_at|date:"j M Y" }}</span>{% endif %}
      </p>
    </div>
    <div class="shrink-0 flex flex-col items-end gap-2 pt-0.5">
      {% if listing.pk in can_review_applications_for %}
      <a href="{% url 'rep_career:job_applications' listing.pk %}" class="btn-primary btn-sm">Applications</a>
      {% endif %}
      <div class="flex items-center gap-1.5">
        {% 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="flex h-8 w-8 items-center justify-center rounded-lg border border-ruforum-border text-ruforum-text-muted transition-colors hover:border-ruforum-primary hover:text-ruforum-primary {% if listing.pk in my_saved_jobs %}!border-ruforum-primary !text-ruforum-primary{% endif %}"
                  title="{% if listing.pk in my_saved_jobs %}Remove from saved jobs{% else %}Save this job{% endif %}"
                  aria-label="{% if listing.pk in my_saved_jobs %}Remove from saved jobs{% else %}Save this job{% endif %}">
            {% include "components/icon.html" with name="bookmark" css="h-4 w-4" %}
          </button>
        </form>
        {% endif %}
        <a href="{% url 'rep_career:job_detail' listing.pk %}" class="btn-secondary btn-sm">View</a>
      </div>
    </div>
  </article>
  {% endfor %}
</div>

{% if is_paginated %}
<nav class="mt-6 flex items-center justify-center gap-2 font-meta text-xs" aria-label="Pagination">
  {% if page_obj.has_previous %}<a href="?{% querystring page=page_obj.previous_page_number %}" class="btn-secondary btn-sm">← Previous</a>{% endif %}
  <span class="self-center px-2 text-ruforum-text-muted">Page <span class="tabular-nums">{{ page_obj.number }}</span> of <span class="tabular-nums">{{ page_obj.paginator.num_pages }}</span></span>
  {% if page_obj.has_next %}<a href="?{% querystring page=page_obj.next_page_number %}" class="btn-secondary btn-sm">Next →</a>{% endif %}
</nav>
{% endif %}

{% else %}
{# Taste D (de-center sweep): editorial-left empty state. #}
<div class="border-t border-ruforum-border pt-6">
  <p class="font-meta text-[10px] font-semibold uppercase tracking-[0.18em] text-ruforum-text-muted">Job board · Empty</p>
  <h2 class="mt-1 font-display text-2xl font-semibold leading-tight text-ruforum-text">No positions found</h2>
  <p class="mt-2 max-w-[60ch] text-sm leading-relaxed text-ruforum-text-muted">
    {% if request.GET.q or request.GET.job_type or request.GET.sector or request.GET.country or request.GET.min_qualification %}
      No jobs match your current filters. Try adjusting your search or broadening the criteria.
    {% else %}
      Job listings will appear here as they are posted across the RUFORUM network.
    {% endif %}
  </p>
  {% if request.GET.q or request.GET.job_type or request.GET.sector or request.GET.country or request.GET.min_qualification %}
  <a href="{% url 'rep_career:job_board' %}" class="btn-secondary mt-5 inline-flex">Clear filters</a>
  {% endif %}
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
  if (window.Shortcuts) {
    window.Shortcuts.register([
      { keys: ['/'], description: 'Focus search',
        run: () => { const f = document.getElementById('job-board-q'); if (f) { f.focus(); f.select(); } } },
      { keys: ['a'], description: 'My applications', run: () => { window.location.href = "{% url 'rep_career:my_applications' %}"; } },
      { keys: ['r'], description: 'Resource library', run: () => { window.location.href = "{% url 'rep_career:resource_library' %}"; } },
    ]);
  }
</script>
{% endblock %}