{#
/**
 * @file
 * Primary KPI section component for Native Observability Dashboard.
 *
 * Available variables:
 * - section: Primary KPI section payload.
 */
#}

<section class="no-dashboard-section no-dashboard-section--primary-kpis">
  <div class="no-section-toolbar">
    <div class="no-section-header">
      <div class="no-section-header__content">
        <span class="no-section-title">{{ section.title }}</span>

        {% if section.time_range is defined and section.time_range %}
          <span class="no-section-subtitle">{{ section.time_range }}</span>
        {% endif %}
      </div>
    </div>
  </div>

  {% if section.subtitle is defined and section.subtitle %}
    <div class="no-section-description">{{ section.subtitle }}</div>
  {% endif %}

  <span class="no-section-divider"></span>

  {% if section.cards is not empty %}
    <div class="no-kpi-grid">
      {% for card in section.cards %}
        {% include '@native_observability_dashboard/components/native-observability-dashboard--kpi-card.html.twig' with {
          metric_id: card.id|default(''),
          title: card.title|default(''),
          icon: card.icon|default(''),
          color: card.color|default('blue'),
          description: card.description|default(''),
          primary: card.primary|default({}),
          secondary: card.secondary|default([]),
          meta: card.meta|default([]),
          chart_id: card.chart_id|default(''),
          timeseries: card.timeseries|default([]),
          breakdown: card.breakdown|default({})
        } only %}
      {% endfor %}
    </div>
  {% else %}
    <div class="no-dashboard-empty-state">
      {{ 'No KPI cards are available for the selected time range.'|t }}
    </div>
  {% endif %}
</section>
