{# HTMX fragment: the right-hand snippet/template accordion grouped by the 7
   template categories. Each item is BOTH clickable (load into the editor) and
   draggable (insert as a snippet). #}
{% for group in groups %}
<details class="snippet-group" {% if loop.first %}open{% endif %}>
  <summary>
    {{ group.label }} <small>({{ group.templates|length }})</small>
  </summary>
  {% if group.templates %}
  <ul class="snippet-list">
    {% for t in group.templates %}
    <li
      class="snippet-item"
      draggable="true"
      title="Click to load · drag to insert"
      data-template-id="{{ t.id }}"
      data-template-type="{{ t.type }}"
      data-template-name="{{ t.name }}"
      data-contents="{{ t.contents }}"
    >
      {{ t.name }}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="no-templates"><small><em>None yet.</em></small></p>
  {% endif %}
</details>
{% endfor %}