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

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

  <header class="mb-6">
    <p class="ed-eyebrow">Career · Resource library</p>
    <h1 class="mt-1 ed-title text-[clamp(2rem,3vw,2.875rem)]">Add a resource</h1>
    <p class="mt-1.5 max-w-[60ch] text-sm leading-relaxed text-ruforum-text-muted">
      Articles, videos, and external links for researchers and scholars across the RUFORUM network.
    </p>
  </header>

  <form method="post" class="space-y-5">
    {% csrf_token %}
    <section 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">Resource details</h2>
      </div>
      <div class="space-y-5 px-5 py-5">
        <div>
          <label class="field-label" for="resource-title">Title</label>
          <input id="resource-title" name="title" required class="field-input" placeholder="e.g., How to structure a research proposal">
        </div>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
          <div>
            <label class="field-label" for="resource-type">Type</label>
            <select id="resource-type" name="resource_type" class="field-input">
              <option value="article">Article</option>
              <option value="video">Video</option>
              <option value="link">External link</option>
            </select>
          </div>
          <div>
            <label class="field-label" for="resource-stage">Career stage</label>
            <input id="resource-stage" name="career_stage" class="field-input" placeholder="e.g. Early career, PhD, Senior researcher">
          </div>
        </div>
        <div>
          <label class="field-label" for="resource-body">Body / notes</label>
          <textarea id="resource-body" name="body" rows="6" class="field-input" placeholder="Article content, or a brief description of the linked resource."></textarea>
        </div>
        <div>
          <label class="field-label" for="resource-url">URL</label>
          <input id="resource-url" name="url" type="url" class="field-input" placeholder="https://…">
          <p class="field-hint">Required for Video and External link types.</p>
        </div>
        <div>
          <label class="field-label" for="resource-tags">Tags</label>
          <input id="resource-tags" name="tags" class="field-input" placeholder="comma, separated, tags">
          <p class="field-hint">Used in search and the tag-cloud filter.</p>
        </div>
        <div class="pt-1">
          <label class="inline-flex cursor-pointer items-center gap-2.5">
            <input type="checkbox" name="is_published" checked>
            <span>
              <span class="text-sm font-medium text-ruforum-text">Published</span>
              <p class="field-hint">Visible immediately to all learners when checked.</p>
            </span>
          </label>
        </div>
      </div>
    </section>
    <div class="flex items-center justify-end gap-3">
      <a href="{% url 'rep_career:resource_library' %}" class="btn-secondary">Cancel</a>
      <button class="btn-primary" type="submit">Save resource</button>
    </div>
  </form>
</div>
{% endblock %}