{% for category, types in node_types_by_category.items %}
<div class="mb-3">
    <p class="mb-1 text-xs font-semibold uppercase text-stone-500">{{ category }}</p>
    {% for nt in types %}
    <div class="node-palette-item sketch-border mb-1.5 cursor-grab bg-base-100 px-2 py-1.5 text-xs font-medium text-stone-800 hover:bg-[var(--color-accent-soft)]/40"
         draggable="true"
         data-node-type="{{ nt.type_id }}"
         data-node-name="{{ nt.name }}"
         data-node-icon="{{ nt.icon }}">
        <span class="mr-1">{{ nt.icon }}</span> {{ nt.name }}
    </div>
    {% endfor %}
</div>
{% endfor %}