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

{% block content %}
{% include "components/page_header.html" with title="Listing approvals" subtitle="Pending job postings awaiting moderator review — open each to approve or send back with notes." %}
<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">← Job board</a>
</div>

{% if listings %}
<ul class="rounded-2xl border border-ruforum-border bg-white divide-y divide-ruforum-border overflow-hidden" role="list">
  {% for l in listings %}
  <li class="stagger-in flex 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">
      <div class="avatar avatar-{{ l.pk|modulo:6 }} h-10 w-10 shrink-0 rounded-xl font-display text-[15px] font-semibold leading-none">
        {{ l.company|slice:":1"|upper }}{% if l.company|length > 1 %}{{ l.company|slice:"1:2"|upper }}{% endif %}
      </div>
      <div class="min-w-0">
        <p class="font-display text-sm font-semibold text-ruforum-text truncate">{{ l.title }}</p>
        <p class="mt-0.5 font-meta text-[11px] text-ruforum-text-muted truncate">
          {{ l.company }}{% if l.posted_by %} · <span class="font-mono">{{ l.posted_by.email|default:"Unknown" }}</span>{% endif %}
        </p>
        {% if l.created_at %}<p class="mt-1 font-meta text-[11px] text-ruforum-text-muted tabular-nums">Submitted {{ l.created_at|timesince }} ago</p>{% endif %}
      </div>
    </div>
    <div class="flex items-center gap-2 shrink-0">
      <span class="score-warn"><span class="status-pill__dot"></span>Pending</span>
      <a href="{% url 'rep_career:listing_review_detail' l.pk %}" class="btn-primary btn-sm">Review</a>
    </div>
  </li>
  {% endfor %}
</ul>
{% else %}
{% url 'rep_career:job_board' as jb_url %}{% url 'rep_career:job_create' as jc_url %}
{% include "components/empty_state.html" with heading="Approval queue is clear" subtext="Incoming employer submissions land here automatically. When the next one arrives, you'll see it with company details, position, and submission notes — ready for one-click approval or send-back." icon_path="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" primary_url=jc_url primary_label="Post new listing" secondary_url=jb_url secondary_label="Open job board" %}
{% endif %}
{% endblock %}