{#
/**
 * @file
 * Request timeline section for Native Observability Dashboard.
 *
 * Available variables:
 * - section: Request timeline section payload.
 */
#}

<section class="no-dashboard-section no-dashboard-section--request-timeline">
  <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>

  <div class="no-request-timeline">
    <div
      id="{{ section.chart_id }}"
      class="no-request-timeline__chart"
      data-chart-id="{{ section.chart_id }}"
      aria-label="{{ section.title }}">
    </div>
  </div>
</section>
