{#
/**
 * @file
 * Cache activity trend component.
 *
 * Available variables:
 * - trend: Cache activity trend payload.
 * - cacheability: Cacheability payload.
 * - invalidations: Invalidation payload.
 */
#}

<div class="no-cache-activity-trend">
  <div class="no-cache-activity-trend__header">
    <div class="no-cache-activity-trend__copy">
      <h3 class="no-cache-runtime-health__section-title">{{ trend.title }}</h3>
      <p class="no-cache-activity-trend__description">{{ trend.description }}</p>
    </div>
  </div>

  {% if trend.enabled %}
    <div
      class="no-cache-activity-trend__chart-surface"
      data-no-cache-runtime-chart
      data-chart-id="{{ trend.chart_id }}"
      data-series-response-label="{{ 'Response cache events'|t }}"
      data-series-cacheability-label="{{ 'Cacheability checks'|t }}"
      data-series-invalidation-label="{{ 'Invalidation events'|t }}"
      data-axis-events-label="{{ 'Events'|t }}"
      data-chart-empty-message="{{ 'No chart series are available for the selected time range.'|t }}"
      data-chart-library-message="{{ 'Apache ECharts is not available.'|t }}"
    >
      <div
        id="{{ trend.chart_id }}"
        class="no-cache-activity-trend__chart"
        data-chart-id="{{ trend.chart_id }}"
        aria-hidden="true"></div>
    </div>

    <div class="no-cache-activity-trend__summary-grid">
      <article class="no-cache-activity-trend__summary-card">
        <div class="no-cache-activity-trend__summary-label">{{ 'Total events'|t }}</div>
        <div class="no-cache-activity-trend__summary-value">{{ trend.summary.total_events }}</div>
        <div
          class="no-cache-activity-trend__summary-meta">{{ 'Combined runtime cache signals for the selected range.'|t }}</div>
      </article>

      <article class="no-cache-activity-trend__summary-card">
        <div class="no-cache-activity-trend__summary-label">{{ 'Cacheability checks'|t }}</div>
        <div class="no-cache-activity-trend__summary-value">{{ cacheability.summary.total_checks|default(0) }}</div>
        <div class="no-cache-activity-trend__summary-meta">
          {{ 'Cacheable responses'|t }}: {{ cacheability.summary.cacheable_count|default(0) }}
        </div>
      </article>

      <article class="no-cache-activity-trend__summary-card">
        <div class="no-cache-activity-trend__summary-label">{{ 'Invalidation events'|t }}</div>
        <div class="no-cache-activity-trend__summary-value">{{ invalidations.summary.total_events|default(0) }}</div>
        <div class="no-cache-activity-trend__summary-meta">
          {{ 'Invalidated tags'|t }}: {{ invalidations.summary.invalidated_tags|default(0) }}
        </div>
      </article>
    </div>
  {% else %}
    <div class="no-dashboard-empty-state">
      <strong>{{ trend.reason }}</strong>

      {% if trend.help_message is defined and trend.help_message %}
        <div class="no-cache-runtime-health__disabled-help">{{ trend.help_message }}</div>
      {% endif %}
    </div>
  {% endif %}
</div>
