{#
/**
 * @file
 * UI Pattern meta information.
 */
#}


<table class="w-full text-sm text-left border border-gray-300 rounded-md overflow-hidden shadow">
  <thead class="bg-gray-100 text-md uppercase text-gray-700">
    <tr>
      <th class="px-4 py-3 border-b border-gray-300">{{ 'Name'|t }}</th>
      <th class="px-4 py-3 border-b border-gray-300">{{ 'Label'|t }}</th>
      <th class="px-4 py-3 border-b border-gray-300">{{ 'Type'|t }}</th>
      <th class="px-4 py-3 border-b border-gray-300">{{ 'Description'|t }}</th>
    </tr>
  </thead>
  <tbody class="divide-y divide-gray-200 bg-white">
    {% for slot_id, slot in component.slots %}
      <tr>
        <td class="px-4 py-3 font-mono text-gray-800"><code>{{ slot_id }}</code></td>
        <td class="px-4 py-3 text-gray-900">{{ slot.title }}</td>
        <td class="px-4 py-3 text-blue-600 font-semibold">{{ 'Slot'|t }}</td>
        <td class="px-4 py-3 text-gray-700">{{ slot.description }}</td>
      </tr>
    {% endfor %}

    {% for prop_id, prop in component.props.properties %}
      {% if prop_id != 'attributes' and prop_id != 'variant' %}
        <tr>
          <td class="px-4 py-3 font-mono text-gray-800"><code>{{ prop_id }}</code></td>
          <td class="px-4 py-3 text-gray-900">{{ prop.title }}</td>
          <td class="px-4 py-3 text-purple-600 font-semibold">
            {{ prop.ui_patterns.type_definition.label }}
          </td>
          <td class="px-4 py-3 text-gray-700">
            {% for line in prop.ui_patterns.summary %}
              {{ line }}<br>
            {% endfor %}
          </td>
        </tr>
      {% endif %}
    {% endfor %}
  </tbody>
</table>


