{#
/**
 * @file
 * UI Patterns components menu.
 */
#}
{% if groups %}
  <div class="bg-body-bg p-4 border border-body-bg rounded-md shadow-sm ">
    <h2 class="text-2xl font-bold text-body mb-4">{{ 'Available components'|t }}</h2>

    {% if groups|length > 1 %}
      {% for group_name, components in groups %}
        <h3 class="text-xl font-bold text-body mt-3 mb-1">{{ group_name }}</h3>
        <ul class="space-y-1 pl-2 text-sm">
          {% for component in components %}
            <li>
              <a href="#{{ component.id }}"
                 class="text-primary hover:underline hover:text-primary/90">
                {{ component.name }}
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    {% else %}
      <ul class="space-y-1 text-sm">
        {% for component in components %}
          <li>
            <a href="#{{ component.id }}"
               class="text-blue-600 hover:underline hover:text-blue-800">
              {{ component.name }}
            </a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
{% endif %}
