{% 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:resource_library' %}" class="hover:text-ruforum-primary transition-colors">Resource library</a>
  {% include "components/crumb_sep.html" %}
  <span class="text-ruforum-text">{{ resource.title|truncatechars:36 }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="">

  <header class="mb-6 flex flex-wrap items-end justify-between gap-x-8 gap-y-3">
    <div>
      <p class="ed-eyebrow">Career · Resource</p>
      <div class="mt-2 flex flex-wrap items-center gap-2">
        <span class="score-muted">{{ resource.get_resource_type_display }}</span>
        {% if resource.career_stage %}<span class="score-muted">{{ resource.career_stage }}</span>{% endif %}
      </div>
      <h1 class="mt-2 ed-title text-[clamp(2rem,3vw,2.875rem)]">{{ resource.title }}</h1>
    </div>
    <a href="{% url 'rep_career:resource_library' %}" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted hover:text-ruforum-primary transition-colors">← Back to library</a>
  </header>

  {% if resource.resource_type == "article" %}
  <article class="prose prose-sm max-w-[72ch] text-ruforum-text leading-relaxed
                  [&_h2]:font-display [&_h3]:font-display [&_a]:text-ruforum-primary">
    {{ resource.body|safe }}
  </article>
  {% else %}
  <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
    <div class="border-b border-ruforum-border px-5 py-3">
      <h2 class="font-display text-sm font-semibold text-ruforum-text">External link</h2>
    </div>
    <div class="space-y-3 px-5 py-5">
      <a class="flex items-center gap-2 font-meta text-sm font-semibold text-ruforum-primary hover:underline"
         href="{{ resource.url }}" target="_blank" rel="noopener noreferrer">
        <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
        </svg>
        {{ resource.url|truncatechars:60 }}
      </a>
      {% if resource.body %}
      <p class="text-sm leading-relaxed text-ruforum-text-muted">{{ resource.body }}</p>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}