{% comment %}
  Activity-kind chip — stacked SVG glyph above 2-letter monogram, plus an
  sr-only label so screen-reader users hear the kind name.

  Usage:
    {% include "components/activity_kind.html" with kind="quiz" %}
    {% include "components/activity_kind.html" with kind=it.kind|default:"lesson" extra_class="-mt-0.5" %}

  Args:
    kind  required — one of lesson · quiz · assign · forum · live · scorm
    extra_class optional — extra Tailwind classes on the outer chip
{% endcomment %}
{% with k=kind|default:"lesson" %}
<span class="plan-item__kind plan-item__kind--{{ k }} {{ extra_class }}" aria-hidden="true">
  {% if k == "lesson" %}{% include "components/icon.html" with name="book" css="h-3 w-3" stroke_width="2" %}<span class="plan-item__kind-mono">LS</span>
  {% elif k == "quiz" %}{% include "components/icon.html" with name="clipboard-check" css="h-3 w-3" stroke_width="2" %}<span class="plan-item__kind-mono">QZ</span>
  {% elif k == "assign" %}{% include "components/icon.html" with name="file-text" css="h-3 w-3" stroke_width="2" %}<span class="plan-item__kind-mono">AS</span>
  {% elif k == "forum" %}{% include "components/icon.html" with name="message-square" css="h-3 w-3" stroke_width="2" %}<span class="plan-item__kind-mono">FR</span>
  {% elif k == "live" %}{% include "components/icon.html" with name="video" css="h-3 w-3" stroke_width="2" %}<span class="plan-item__kind-mono">LV</span>
  {% elif k == "scorm" %}{% include "components/icon.html" with name="layers" css="h-3 w-3" stroke_width="2" %}<span class="plan-item__kind-mono">SC</span>
  {% endif %}
</span>
<span class="sr-only">{% if k == "lesson" %}Lesson{% elif k == "quiz" %}Quiz{% elif k == "assign" %}Assignment{% elif k == "forum" %}Discussion{% elif k == "live" %}Live session{% elif k == "scorm" %}SCORM package{% endif %}</span>
{% endwith %}