{#
/**
 * @file
 * FlowDrop Detail Grid Component
 *
 * A responsive grid for displaying key-value pairs and detail items.
 *
 * Available variables:
 * - columns: Number of columns (auto, 1, 2, 3, 4)
 * - items: Array of detail items
 *   - label: Item label
 *   - value: Item value (can be HTML)
 *   - url: Optional link URL
 *   - icon: Optional icon SVG
 *   - variant: Optional color variant
 *   - mono: Use monospace font
 *   - span: Column span (1, 2, full)
 */
#}

{% set columns = columns|default('auto') %}

<div class="fd-detail-grid fd-detail-grid--columns-{{ columns }}">
  {% for item in items %}
    {% set span_class = item.span ? ('fd-detail-grid__item--span-' ~ item.span) : '' %}
    {% set variant_class = item.variant ? ('fd-detail-grid__item--' ~ item.variant) : '' %}
    
    <div class="fd-detail-grid__item {{ span_class }} {{ variant_class }}">
      <dt class="fd-detail-grid__label">
        {% if item.icon %}
          <span class="fd-detail-grid__icon" aria-hidden="true">{{ item.icon|raw }}</span>
        {% endif %}
        {{ item.label }}
      </dt>
      <dd class="fd-detail-grid__value{% if item.mono %} fd-detail-grid__value--mono{% endif %}">
        {% if item.url %}
          <a href="{{ item.url }}" class="fd-detail-grid__link">{{ item.value|raw }}</a>
        {% else %}
          {{ item.value|raw }}
        {% endif %}
      </dd>
    </div>
  {% endfor %}
</div>
