{#
/**
 * @file
 * Database dashboard template for Native Observability.
 *
 * Available variables:
 * - dashboard: Full dashboard payload built by the backend services.
 * - range_selector: The available range selector items.
 * - active_range: The active range key.
 */
#}

{% set database_observability = dashboard.sections.database_observability ?? null %}

<div class="no-dashboard-wrapper">
  <div class="no-dashboard-container">

    {% if range_selector is not empty %}
      <div class="no-dashboard-header">
        <div class="no-dashboard-header__spacer"></div>

        <div class="no-dashboard-header__actions">
          {% include '@native_observability_dashboard/ui/range-selector.html.twig' with {
            items: range_selector,
            active: active_range,
            name: 'range'
          } only %}
        </div>
      </div>
    {% endif %}

    {% if database_observability %}
      {{ attach_library('native_observability_dashboard/dashboard') }}

      {% include '@native_observability_dashboard/components/database/database-observability.html.twig' with {
        section: database_observability
      } only %}
    {% endif %}

  </div>
</div>
