{#
/**
 * @file
 * Cache health overview cards.
 *
 * Available variables:
 * - health: Cache health payload.
 * - signals: Cache signals payload.
 */
#}

<div class="no-cache-health">
  <h3 class="no-cache-runtime-health__section-title">{{ 'Cache Health'|t }}</h3>

  <div class="no-cache-health__grid">
    {% include '@native_observability_dashboard/components/cache/cache-health-card.html.twig' with {
      item: health.primary_backend
    } only %}

    {% include '@native_observability_dashboard/components/cache/cache-health-card.html.twig' with {
      item: health.page_cache
    } only %}

    {% include '@native_observability_dashboard/components/cache/cache-health-card.html.twig' with {
      item: health.dynamic_cache
    } only %}

    <article class="no-cache-health__card no-cache-health__card--modules">
      <div class="no-cache-health__label">{{ health.modules.label }}</div>

      <ul class="no-cache-health__modules">
        {% for mod in health.modules.items %}
          <li class="no-cache-health__module">
            <span
              class="no-cache-health__module-status no-cache-health__module-status--{{ mod.enabled ? 'enabled' : 'disabled' }}"></span>
            <span class="no-cache-health__module-name">{{ mod.name }}</span>
            <span class="no-cache-health__module-value">{{ mod.enabled ? 'Yes'|t : 'No'|t }}</span>
          </li>
        {% endfor %}
      </ul>
    </article>

    <article class="no-cache-health__card no-cache-health__card--signals">
      <div class="no-cache-health__label">{{ signals.title|default('Cache Signals'|t) }}</div>

      <ul class="no-cache-health__signals">
        {% for item in signals.items %}
          <li class="no-cache-health__signal">
            <span
              class="no-cache-health__signal-icon no-cache-health__signal-icon--{{ item.value ? 'enabled' : 'disabled' }}">
              {{ item.value ? '✓' : '✕' }}
            </span>
            <span class="no-cache-health__signal-label">{{ item.label }}</span>
          </li>
        {% endfor %}
      </ul>
    </article>
  </div>
</div>
