{#
/**
 * @file
 * Cache efficiency score side panel.
 *
 * Available variables:
 * - score: Cache efficiency score payload.
 */
#}

{% set score_value = score.value|default(0) %}
{% set score_max = score.max|default(100) %}
{% set score_percent = score_max > 0 ? ((score_value / score_max) * 100)|round(0, 'floor') : 0 %}

<article class="no-cache-score">
  <div class="no-cache-score__header">
    <h3 class="no-cache-runtime-health__section-title">{{ score.title|default('Cache Efficiency Score'|t) }}</h3>
  </div>

  <div class="no-cache-score__gauge">
    <div class="no-cache-score__gauge-ring" style="--no-cache-score-percent: {{ score_percent }};">
      <div class="no-cache-score__gauge-inner">
        <div class="no-cache-score__value">{{ score_value }}</div>
        <div class="no-cache-score__unit">/ {{ score_max }}</div>
      </div>
    </div>
  </div>

  {% if score.breakdown is not empty %}
    <div class="no-cache-score__breakdown">
      {% for item in score.breakdown %}
        {% set item_value = item.value|default(0) %}
        {% set item_max = item.max|default(100) %}
        {% set item_percent = item_max > 0 ? ((item_value / item_max) * 100)|round(0, 'floor') : item_value %}

        <div class="no-cache-score__breakdown-item">
          <div class="no-cache-score__breakdown-head">
            <span class="no-cache-score__breakdown-label">{{ item.label|default('Metric'|t) }}</span>
            <span class="no-cache-score__breakdown-value">{{ item_value }}/{{ item_max }}</span>
          </div>

          <div class="no-cache-score__progress">
            <span class="no-cache-score__progress-bar" style="--no-cache-progress: {{ item_percent }};"></span>
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
</article>
