{% comment %}
  Course-scoped subnav — the "Inside this course" rail.

  On `lg+`: sticky left-rail (16rem) with grouped vertical menu.
  On `< lg`: collapsible <details> drawer below the page header.

  Items are grouped into four sections (Learn / Engage / Reference / Grades)
  and each carries a leading micro-icon. A section is dropped when it has no
  visible items for the current role.

  Usage:
    {% include "components/course_subnav.html" with course=course can_manage=can_manage enrolment=enrolment active_key="quizzes" %}

  Args:
    course      required — Course object (must have .slug, .title)
    can_manage  optional bool — exposes instructor-only items (Full gradebook, Grade appeals)
    enrolment   optional Enrolment — exposes learner-only items (My grades, Peer reviews)
    active_key  optional str — which item to mark aria-current="page"
    mobile_only optional bool — when True, hide the desktop left-rail
                                (used on pages that already have their own
                                dense desktop sidebar — wiki/page,
                                workshop_detail)
{% endcomment %}
{% load rep_navigation %}
{% course_subnav_sections course can_manage|default:False enrolment as subnav_sections %}
{% if subnav_sections %}

{# Mobile drawer — < lg #}
<details class="mb-5 rounded-2xl border border-ruforum-border bg-white overflow-hidden lg:hidden">
  <summary class="cursor-pointer flex items-center justify-between px-4 py-3 select-none">
    <span class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-primary">Inside this course</span>
    <span class="font-meta text-[10px] uppercase tracking-[0.10em] text-ruforum-text-muted">expand</span>
  </summary>
  <nav class="border-t border-ruforum-border" aria-label="Course navigation">
    {% for section in subnav_sections %}
    <div class="px-4 pt-3 pb-1 font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{{ section.label }}</div>
    <div class="divide-y divide-ruforum-border/60">
      {% for item in section.items %}
      <a href="{{ item.url }}"
         class="flex items-center gap-2.5 px-4 py-2 text-sm transition-colors hover:bg-ruforum-surface-warm/50 {% if item.key == active_key %}text-ruforum-primary font-semibold bg-ruforum-surface-warm/40{% else %}text-ruforum-text{% endif %}"
         {% if item.key == active_key %}aria-current="page"{% endif %}>
        {% include "components/icon.html" with name=item.icon css="h-3.5 w-3.5 shrink-0" stroke_width="2" %}
        <span class="flex-1 truncate">{{ item.label }}</span>
        {% if item.key == active_key %}<span aria-hidden="true" class="font-meta text-[10px] text-ruforum-primary">●</span>{% endif %}
      </a>
      {% endfor %}
    </div>
    {% endfor %}
  </nav>
</details>

{# Desktop left-rail — lg+ (suppressed when mobile_only) #}
{% if not mobile_only %}
<aside class="hidden lg:block self-start sticky top-20 w-64 shrink-0" aria-label="Course navigation">
  <div class="rounded-2xl border border-ruforum-border bg-white overflow-hidden">
    <div class="px-4 py-3 border-b border-ruforum-border bg-ruforum-surface-warm/60">
      <p class="font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-primary">Inside this course</p>
      <p class="mt-0.5 font-display text-sm font-semibold text-ruforum-text truncate" title="{{ course.title }}">{{ course.title }}</p>
    </div>
    <nav>
      {% for section in subnav_sections %}
      <div class="px-4 pt-3 pb-1 font-meta text-[10px] font-semibold uppercase tracking-[0.14em] text-ruforum-text-muted">{{ section.label }}</div>
      <div class="divide-y divide-ruforum-border/60">
        {% for item in section.items %}
        <a href="{{ item.url }}"
           class="flex items-center gap-2.5 px-4 py-2 text-sm transition-colors hover:bg-ruforum-surface-warm/50 {% if item.key == active_key %}text-ruforum-primary font-semibold bg-ruforum-surface-warm/40{% else %}text-ruforum-text{% endif %}"
           {% if item.key == active_key %}aria-current="page"{% endif %}>
          {% include "components/icon.html" with name=item.icon css="h-3.5 w-3.5 shrink-0" stroke_width="2" %}
          <span class="flex-1 truncate">{{ item.label }}</span>
          {% if item.key == active_key %}<span aria-hidden="true" class="font-meta text-[10px] text-ruforum-primary">●</span>{% endif %}
        </a>
        {% endfor %}
      </div>
      {% endfor %}
    </nav>
  </div>
</aside>
{% endif %}
{% endif %}