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

{% block content %}
{% include "components/page_header.html" with title="Jobs you've saved" subtitle="Bookmarked positions from across the RUFORUM network. Save a listing from the job board to track it here." %}
<div class="-mt-3 mb-6 flex flex-wrap items-center gap-4">
  <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>
  <a href="{% url 'rep_career:my_applications' %}" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">My applications →</a>
</div>

{% if saved_jobs %}
<ul class="rounded-2xl border border-ruforum-border bg-white divide-y divide-ruforum-border overflow-hidden" role="list">
  {% for saved in saved_jobs %}
  <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-{{ saved.listing.pk|modulo:6 }} h-10 w-10 shrink-0 rounded-xl font-display text-[15px] font-semibold leading-none">
      {{ saved.listing.company|slice:":1"|upper }}{% if saved.listing.company|length > 1 %}{{ saved.listing.company|slice:"1:2"|upper }}{% endif %}
    </div>
    <div class="min-w-0 flex-1">
      <a href="{% url 'rep_career:job_detail' saved.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">
        {{ saved.listing.title }}
      </a>
      <p class="mt-0.5 font-meta text-[11px] text-ruforum-text-muted">
        {{ saved.listing.company }}{% if saved.listing.location %} · {{ saved.listing.location }}{% endif %}
        {% if saved.listing.job_type %} · {{ saved.listing.get_job_type_display }}{% endif %}
      </p>
      <p class="mt-1 font-meta text-[11px] text-ruforum-text-muted tabular-nums">Saved {{ saved.created_at|date:"j M Y" }}</p>
    </div>
    <div class="shrink-0 flex flex-col items-end gap-2 pt-0.5">
      {% if saved.listing.pk in my_applications %}<span class="score-pass"><span class="status-pill__dot"></span>Applied</span>{% endif %}
      <div class="flex items-center gap-1.5">
        <form method="post" action="{% url 'rep_career:job_save_toggle' saved.listing.pk %}">
          {% csrf_token %}
          <input type="hidden" name="next" value="{{ request.get_full_path }}">
          <button type="submit" class="btn-secondary btn-sm" title="Remove from saved jobs">Remove</button>
        </form>
        <a href="{% url 'rep_career:job_detail' saved.listing.pk %}" class="btn-secondary btn-sm">View</a>
      </div>
    </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 saved jobs yet" subtext="Bookmark a listing from the job board to track it here — handy for comparing opportunities before you apply." icon_path="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" primary_url=jobs_board_url primary_label="Browse jobs" %}
{% endif %}
{% endblock %}