{% 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">Career</a>
  {% include "components/crumb_sep.html" %}
  <span class="text-ruforum-text">Resource library</span>
</nav>
{% endblock %}

{% block content %}
{% if perms.rep_courses.manage_courses or user.is_staff %}
  {% url 'rep_career:resource_create' as resource_create_url %}
  {% include "components/page_header.html" with title="Resource library" subtitle="Articles, guides, and tools curated by the Secretariat for researchers and scholars across the network." cta_url=resource_create_url cta_label="Add resource" %}
{% else %}
  {% include "components/page_header.html" with title="Resource library" subtitle="Articles, guides, and tools curated by the Secretariat for researchers and scholars across the network." %}
{% endif %}

<form method="get" class="mb-6 flex flex-wrap items-end gap-3 rounded-2xl border border-ruforum-border bg-white px-5 py-4">
  <div class="flex-1 min-w-48">
    <label class="field-label" for="resource-search-q">Search</label>
    <input id="resource-search-q" type="search" name="q" value="{{ request.GET.q }}" placeholder="Search by title or keyword" class="field-input">
  </div>
  <div class="w-48">
    <label class="field-label" for="resource-search-stage">Career stage</label>
    <input id="resource-search-stage" name="stage" value="{{ request.GET.stage }}" placeholder="e.g. Early career" class="field-input">
  </div>
  <button class="btn-primary btn-sm" type="submit">Filter</button>
  {% if request.GET.q or request.GET.stage %}
  <a href="{% url 'rep_career:resource_library' %}" class="btn-secondary btn-sm">Clear</a>
  {% endif %}
</form>

{% if resources %}
<div class="rounded-2xl border border-ruforum-border bg-white divide-y divide-ruforum-border overflow-hidden">
  {% for r in resources %}
  <a href="{% url 'rep_career:resource_detail' r.slug %}" class="stagger-in plan-item focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ruforum-primary" style="--index: {{ forloop.counter0 }};">
    {# Type-coded kind chip: article (AR), video (VD), external link (LK). #}
    <span class="plan-item__kind {% if r.resource_type == 'video' %}plan-item__kind--live{% elif r.resource_type == 'link' %}plan-item__kind--forum{% else %}plan-item__kind--lesson{% endif %}" aria-hidden="true">
      {% if r.resource_type == 'video' %}VD
      {% elif r.resource_type == 'link' %}LK
      {% else %}AR{% endif %}
    </span>
    <div class="min-w-0 flex-1">
      <p class="plan-item__title">{{ r.title }}</p>
      <div class="mt-0.5 flex flex-wrap items-center gap-2">
        <span class="font-meta text-[10px] uppercase tracking-[0.10em] text-ruforum-text-muted">{{ r.get_resource_type_display }}</span>
        {% if r.career_stage %}<span class="font-meta text-[10px] uppercase tracking-[0.10em] text-ruforum-text-muted">· {{ r.career_stage }}</span>{% endif %}
        {% if r.updated_at %}<span class="font-meta text-[10px] uppercase tracking-[0.10em] text-ruforum-text-muted">· Updated {{ r.updated_at|date:"j M Y" }}</span>{% endif %}
      </div>
    </div>
    {% include "components/icon.html" with name="chevron-right" css="h-4 w-4 shrink-0 text-ruforum-text-muted/50" stroke_width="2" %}
  </a>
  {% endfor %}
</div>
{% else %}
<section class="rounded-2xl border border-dashed border-ruforum-border bg-white px-6 py-16 text-center">
  <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-full bg-ruforum-surface-warm">
    {% if request.GET.q or request.GET.stage %}
    <svg class="h-6 w-6 text-ruforum-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-4.35-4.35M17 11a6 6 0 1 1-12 0 6 6 0 0 1 12 0z"/>
    </svg>
    {% else %}
    <svg class="h-6 w-6 text-ruforum-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/>
    </svg>
    {% endif %}
  </div>
  <p class="font-display text-xl font-semibold text-ruforum-text">
    {% if request.GET.q or request.GET.stage %}Nothing matches your filters
    {% elif perms.rep_courses.manage_courses or user.is_staff %}The library is empty — seed it
    {% else %}No resources yet{% endif %}
  </p>
  <p class="mx-auto mt-2 max-w-[58ch] text-sm leading-relaxed text-ruforum-text-muted">
    {% if request.GET.q or request.GET.stage %}Try a broader search term or clear the career-stage filter.
    {% elif perms.rep_courses.manage_courses or user.is_staff %}Add the first article, video, or external link. Resources you publish appear here for every researcher and scholar in the network.
    {% else %}Career resources will appear here as the Secretariat publishes them — articles, videos, and external links curated for researchers across the network.{% endif %}
  </p>
  <div class="mt-5 flex flex-wrap items-center justify-center gap-3">
    {% if request.GET.q or request.GET.stage %}
    <a class="btn-primary inline-flex" href="{% url 'rep_career:resource_library' %}">Clear filters</a>
    {% elif perms.rep_courses.manage_courses or user.is_staff %}
    <a class="btn-primary inline-flex" href="{% url 'rep_career:resource_create' %}">Add the first resource</a>
    <a class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors" href="{% url 'rep_career:job_board' %}">Browse job board →</a>
    {% else %}
    <a class="btn-secondary inline-flex" href="{% url 'rep_career:job_board' %}">Browse the job board instead</a>
    {% endif %}
  </div>
</section>
{% endif %}
{% endblock %}