{% 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" %}
  <span class="opacity-60">REP</span>
  {% include "components/crumb_sep.html" %}
  <a href="{% url 'rep_career:listing_reviews' %}" class="hover:text-ruforum-primary transition-colors">Listing approvals</a>
  {% include "components/crumb_sep.html" %}
  <span class="text-ruforum-text">Review</span>
</nav>
{% endblock %}
{% block content %}
<div class=" space-y-5">

  {# ── Header ── #}
  {% include "components/page_header.html" with title="Review listing" subtitle="Approve to publish to the job board, or return to the poster with notes for revision." %}
  <div class="-mt-3 mb-2 flex">
    <a href="{% url 'rep_career:listing_reviews' %}" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">← Back to queue</a>
  </div>

  {# ── Listing preview ── #}
  <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
    <div class="border-b border-ruforum-border px-5 py-3">
      <p class="font-meta text-[10px] font-bold uppercase tracking-widest text-ruforum-text-muted">Listing details</p>
    </div>
    <div class="space-y-3 px-5 py-5">
      <div>
        <p class="font-meta text-[10px] font-semibold uppercase tracking-wider text-ruforum-text-muted">Position</p>
        <p class="mt-1 font-display text-lg font-semibold text-ruforum-text">{{ listing.title }}</p>
      </div>
      <div class="flex flex-wrap gap-x-6 gap-y-1">
        <div>
          <p class="font-meta text-[10px] font-semibold uppercase tracking-wider text-ruforum-text-muted">Company</p>
          <p class="mt-1 text-sm text-ruforum-text">{{ listing.company }}</p>
        </div>
        {% if listing.location %}
        <div>
          <p class="font-meta text-[10px] font-semibold uppercase tracking-wider text-ruforum-text-muted">Location</p>
          <p class="mt-1 text-sm text-ruforum-text">{{ listing.location }}</p>
        </div>
        {% endif %}
      </div>
      {% if listing.description %}
      <div class="border-t border-ruforum-border pt-3">
        <p class="font-meta text-[10px] font-semibold uppercase tracking-wider text-ruforum-text-muted mb-2">Description</p>
        <p class="text-sm leading-relaxed text-ruforum-text-muted">{{ listing.description|truncatechars:400 }}</p>
      </div>
      {% endif %}
    </div>
  </div>

  {# ── Decision form ── #}
  <form method="post" class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
    {% csrf_token %}
    <div class="border-b border-ruforum-border px-5 py-3">
      <h2 class="font-display text-sm font-semibold text-ruforum-text">Moderation decision</h2>
    </div>
    <div class="space-y-4 px-5 py-5">
      {% for field in form %}
      <div>
        <label class="field-label">{{ field.label }}</label>
        {{ field }}
        {% if field.errors %}<p class="mt-1 text-xs text-red-600">{{ field.errors|join:", " }}</p>{% endif %}
      </div>
      {% endfor %}
    </div>
    <div class="flex items-center justify-between gap-3 border-t border-ruforum-border px-5 py-4">
      <a href="{% url 'rep_career:listing_reviews' %}" class="btn-secondary">Cancel</a>
      <button type="submit" class="btn-primary">Save decision</button>
    </div>
  </form>

</div>
{% endblock %}