{% extends "layouts/dashboard.html" %}
{% 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" %}
  <a href="{% url 'rep_career:job_board' %}" class="hover:text-ruforum-primary transition-colors">Job board</a>
  {% include "components/crumb_sep.html" %}
  <a href="{% url 'rep_career:job_detail' listing.pk %}" class="hover:text-ruforum-primary transition-colors">{{ listing.title|truncatechars:32 }}</a>
  {% include "components/crumb_sep.html" %}
  <span class="text-ruforum-text">Applications</span>
</nav>
{% endblock %}

{% block content %}
{% with apps_subtitle=listing.title|add:" — "|add:listing.company %}
  {% include "components/page_header.html" with title="Applications" subtitle=apps_subtitle %}
{% endwith %}
<div class="-mt-3 mb-6 flex items-center justify-between gap-3">
  <a href="{% url 'rep_career:job_detail' listing.pk %}" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">← Back to job</a>
  {% if applications %}<span class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted tabular-nums">{{ applications|length }} application{{ applications|length|pluralize }}</span>{% endif %}
</div>

{% if applications %}
<ul class="rounded-2xl border border-ruforum-border bg-white divide-y divide-ruforum-border overflow-hidden" role="list">
  {% for app in applications %}
  <li class="stagger-in flex flex-wrap items-center justify-between gap-4 px-5 py-4 transition-colors hover:bg-ruforum-warm-hover" style="--index: {{ forloop.counter0 }};">
    <div class="flex items-start gap-3 min-w-0 flex-1">
      {% include "components/user_avatar.html" with user=app.applicant size="sm" variant="on_light" only %}
      <div class="min-w-0">
        <p class="font-display text-sm font-semibold text-ruforum-text truncate">{{ app.applicant.get_full_name|default:app.applicant.email }}</p>
        <p class="font-mono text-[11px] text-ruforum-text-muted truncate">{{ app.applicant.email }}</p>
        <p class="mt-1 font-meta text-[11px] text-ruforum-text-muted tabular-nums">
          Applied {{ app.applied_at|date:"j F Y, H:i" }}
        </p>
      </div>
    </div>
    <div class="flex items-center gap-3 shrink-0">
      {% if app.status == "applied" %}<span class="score-muted"><span class="status-pill__dot"></span>Applied</span>
      {% elif app.status == "shortlisted" %}<span class="score-warn"><span class="status-pill__dot"></span>Shortlisted</span>
      {% elif app.status == "hired" %}<span class="score-pass"><span class="status-pill__dot"></span>Hired</span>
      {% elif app.status == "rejected" %}<span class="score-fail"><span class="status-pill__dot"></span>Not selected</span>
      {% else %}<span class="score-muted">{{ app.get_status_display }}</span>{% endif %}
      <a href="{% url 'rep_career:job_application_detail' listing.pk app.pk %}" class="btn-primary btn-sm">Review</a>
    </div>
  </li>
  {% endfor %}
</ul>
{% include "components/pagination.html" %}
{% else %}
{% url 'rep_career:job_detail' listing.pk as listing_back_url %}
{% include "components/empty_state.html" with heading="No applications yet" subtext="Candidates who apply will appear here with their CV snapshot, cover letter, and status. You'll be notified when the first comes in." icon_path="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" primary_url=listing_back_url primary_label="Back to listing" %}
{% endif %}
{% endblock %}