{% 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" %}
  <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">My applications</span>
</nav>
{% endblock %}

{% block content %}
{% include "components/page_header.html" with title="Applications you've submitted" subtitle="Track jobs you've applied to across the RUFORUM network. Status updates as employers review." %}
<div class="-mt-3 mb-6 flex">
  <a href="{% url 'rep_career:job_board' %}" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">Browse jobs →</a>
</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 items-start gap-4 px-5 py-4 transition-colors hover:bg-ruforum-warm-hover" style="--index: {{ forloop.counter0 }};">
    <div class="avatar avatar-{{ app.listing.pk|modulo:6 }} h-10 w-10 shrink-0 rounded-xl font-display text-[15px] font-semibold leading-none">
      {{ app.listing.company|slice:":1"|upper }}{% if app.listing.company|length > 1 %}{{ app.listing.company|slice:"1:2"|upper }}{% endif %}
    </div>
    <div class="min-w-0 flex-1">
      <a href="{% url 'rep_career:job_detail' app.listing.pk %}"
         class="font-display text-sm font-semibold text-ruforum-text hover:text-ruforum-primary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ruforum-primary rounded">
        {{ app.listing.title }}
      </a>
      <p class="mt-0.5 font-meta text-[11px] text-ruforum-text-muted">
        {{ app.listing.company }}{% if app.listing.location %} · {{ app.listing.location }}{% endif %}
        {% if app.listing.job_type %} · {{ app.listing.get_job_type_display }}{% endif %}
      </p>
      <p class="mt-1 font-meta text-[11px] text-ruforum-text-muted tabular-nums">Applied {{ app.applied_at|date:"j M Y" }}</p>
    </div>
    <div class="shrink-0 pt-0.5">
      {% 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.status|capfirst }}</span>{% endif %}
    </div>
  </li>
  {% endfor %}
</ul>
{% include "components/pagination.html" %}
{% else %}
{% url 'rep_career:job_board' as jobs_board_url %}
{% include "components/empty_state.html" with heading="No applications yet" subtext="When you apply to a position from the job board, it'll show up here with its current review status. Open roles update in real time." icon_path="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z" primary_url=jobs_board_url primary_label="Browse jobs" %}
{% endif %}
{% endblock %}