{#
/**
 * @file
 * Combined request and AJAX overview section for Native Observability Dashboard.
 *
 * Available variables:
 * - request_timeline: Request activity section payload.
 * - ajax_activity: AJAX activity section payload.
 */
#}

{% set has_request_timeline = request_timeline is defined and request_timeline and request_timeline.enabled %}
{% set has_ajax_activity = ajax_activity is defined and ajax_activity and ajax_activity.enabled %}
{% set initial_view = has_request_timeline ? 'requests' : 'ajax' %}
{% set section_time_range = request_timeline.time_range|default(ajax_activity.time_range|default('')) %}

<section class="no-dashboard-section no-dashboard-section--activity-overview">
  <div class="no-section-toolbar">
    <div class="no-section-header">
      <div class="no-section-header__content">
        <span class="no-section-title">{{ 'Activity Overview'|t }}</span>
        {% if section_time_range %}
          <span class="no-section-subtitle">{{ section_time_range }}</span>
        {% endif %}
      </div>
    </div>
  </div>

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

  <div class="no-activity-overview" data-no-activity-overview data-no-activity-initial-view="{{ initial_view }}">
    <div class="no-activity-overview__panel">
      {% if has_request_timeline %}
        <div class="no-activity-overview__panel-view" data-no-activity-view="requests"{% if initial_view != 'requests' %} hidden{% endif %}>
          <div class="no-activity-overview__header">
            <div class="no-activity-overview__header-copy">
              <h3 class="no-activity-overview__title">{{ request_timeline.title }}</h3>
              {% if request_timeline.subtitle is defined and request_timeline.subtitle %}
                <p class="no-activity-overview__description">{{ request_timeline.subtitle }}</p>
              {% endif %}
            </div>

            {% if has_ajax_activity %}
              <button
                type="button"
                class="no-activity-overview__toggle"
                data-no-activity-toggle="ajax"
                aria-pressed="false">
                {{ request_timeline.switch_label|default('Show AJAX details'|t) }}
              </button>
            {% endif %}
          </div>

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

      {% if has_ajax_activity %}
        <div class="no-activity-overview__panel-view" data-no-activity-view="ajax"{% if initial_view != 'ajax' %} hidden{% endif %}>
          <div class="no-activity-overview__header">
            <div class="no-activity-overview__header-copy">
              <h3 class="no-activity-overview__title">{{ ajax_activity.title }}</h3>
              {% if ajax_activity.subtitle is defined and ajax_activity.subtitle %}
                <p class="no-activity-overview__description">{{ ajax_activity.subtitle }}</p>
              {% endif %}
            </div>

            {% if has_request_timeline %}
              <button
                type="button"
                class="no-activity-overview__toggle"
                data-no-activity-toggle="requests"
                aria-pressed="true">
                {{ ajax_activity.switch_label|default('Show request details'|t) }}
              </button>
            {% endif %}
          </div>

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

    <div class="no-activity-overview__summary">
      {% if has_request_timeline %}
        <div class="no-activity-overview__summary-view" data-no-activity-view="requests"{% if initial_view != 'requests' %} hidden{% endif %}>
          <div class="no-activity-overview__header-copy no-activity-overview__summary-copy">
            <h3 class="no-activity-overview__title">{{ request_timeline.summary_title|default('Request Summary'|t) }}</h3>
            {% if request_timeline.summary_help is defined and request_timeline.summary_help %}
              <p class="no-activity-overview__summary-help">{{ request_timeline.summary_help }}</p>
            {% endif %}
          </div>

          <div class="no-activity-overview__summary-grid">
            {% for item in request_timeline.summary_cards|default([]) %}
              <div class="no-activity-overview__summary-card">
                <span class="no-activity-overview__summary-label">{{ item.label }}</span>
                <span class="no-activity-overview__summary-value">{{ item.value }}</span>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endif %}

      {% if has_ajax_activity %}
        <div class="no-activity-overview__summary-view" data-no-activity-view="ajax"{% if initial_view != 'ajax' %} hidden{% endif %}>
          <div class="no-activity-overview__header-copy no-activity-overview__summary-copy">
            <h3 class="no-activity-overview__title">{{ ajax_activity.summary_title|default('AJAX Summary'|t) }}</h3>
            {% if ajax_activity.summary_help is defined and ajax_activity.summary_help %}
              <p class="no-activity-overview__summary-help">{{ ajax_activity.summary_help }}</p>
            {% endif %}
          </div>

          <div class="no-activity-overview__summary-grid">
            {% for item in ajax_activity.summary_cards|default([]) %}
              <div class="no-activity-overview__summary-card">
                <span class="no-activity-overview__summary-label">{{ item.label }}</span>
                <span class="no-activity-overview__summary-value">{{ item.value }}</span>
              </div>
            {% endfor %}
          </div>

          {% if ajax_activity.empty_state is defined and ajax_activity.empty_state %}
            <div class="no-activity-overview__empty-state">
              <h4 class="no-activity-overview__empty-title">{{ ajax_activity.empty_state.title }}</h4>
              <p class="no-activity-overview__empty-copy">{{ ajax_activity.empty_state.description }}</p>
            </div>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
</section>
