{% extends "admin/base.html" %}

{% block title %}Help — cmdop admin{% endblock %}

{% block content %}
{# Plan 61/2a — `/admin/help` listing.
   Plan 61/2b-W4 — grouped into reading categories so the page reads
   as a curated path rather than a slug-sorted flat list. Each card
   carries a tooltip explaining what the doc covers. #}
{% from 'admin/components/ui.html' import page_header, card, tooltip %}

{{ page_header(
  'Documentation',
  subtitle='In-product docs — works offline, mirrors the public site.',
  eyebrow='Help'
) }}

<div class="space-y-6">
  {% for cat in categories %}
  {% call card(kind='roomy') %}
    <div class="flex items-baseline justify-between gap-3 mb-3">
      <h2 class="text-headline text-ink-100">{{ cat.title }}</h2>
      <span class="text-[11px] text-ink-500 font-mono">{{ cat.docs|length }} doc{% if cat.docs|length != 1 %}s{% endif %}</span>
    </div>
    {% if cat.blurb %}
    <p class="text-footnote mb-3">{{ cat.blurb }}</p>
    {% endif %}
    <ul class="divide-y divide-white/[0.06] -mx-2">
      {% for entry in cat.docs %}
      <li>
        <a href="{{ entry.href }}"
           class="flex items-center justify-between gap-3 px-3 py-2.5 rounded-md hover:bg-white/[0.04] transition-colors group">
          <div class="flex items-center gap-3 min-w-0">
            <i data-lucide="book-open" class="w-4 h-4 text-ink-500 flex-shrink-0"></i>
            <div class="min-w-0">
              <div class="flex items-center gap-2">
                <span class="text-[14px] text-ink-100">{{ entry.title }}</span>
                <span class="text-[11px] text-ink-500 font-mono truncate">{{ entry.slug }}</span>
                {% if entry.blurb %}{{ tooltip(entry.blurb) }}{% endif %}
              </div>
              {% if entry.blurb %}
              <p class="text-[11px] text-ink-500 mt-0.5 truncate">{{ entry.blurb }}</p>
              {% endif %}
            </div>
          </div>
          <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-ink-500 group-hover:text-ink-300 flex-shrink-0"></i>
        </a>
      </li>
      {% endfor %}
    </ul>
  {% endcall %}
  {% endfor %}
</div>
{% endblock %}