{% from "components/_section_title.html" import section_title %}

<div class="ui-pane h-full">
  <div class="mb-4">
    {{ section_title(
         "Top 5 Cost-Saving Opportunities",
         description="Ranked by estimated spend (the audit's savings proxy), highest first. Includes both issues and suggestions; recurrence and severity break ties.",
         aside='<a href="/opportunities?sort=cost&direction=desc" class="text-sm text-brand-500 dark:text-brand-300 hover:underline">View all &rarr;</a>'
    ) }}
  </div>

  {% if top_critical_issues %}
  <div style="overflow-x: hidden; padding-bottom: 0.25rem;">
    <div style="display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; align-items: end;">
      {% for issue in top_critical_issues %}
      {% if issue.severity_bucket in ["critical", "high"] %}
        {% set severity_color = "bg-rose-500" %}
      {% elif issue.severity_bucket == "medium" %}
        {% set severity_color = "bg-amber-500" %}
      {% else %}
        {% set severity_color = "bg-slate-400" %}
      {% endif %}
      <a href="{{ issue.href }}"
         target="_blank" rel="noopener"
         class="group block hover:bg-slate-50 dark:hover:bg-slate-800/40 px-2 py-2 -mx-2 transition-colors"
         aria-label="Open {{ issue.object }} in a new tab">
        <div class="text-center min-h-14">
          {% if issue.severity_bucket in ["critical", "high"] %}
            <span class="ui-pill ui-pill-danger tabular-nums">{{ issue.severity_score }}</span>
          {% elif issue.severity_bucket == "medium" %}
            <span class="ui-pill ui-pill-warning tabular-nums">{{ issue.severity_score }}</span>
          {% else %}
            <span class="ui-pill ui-pill-neutral tabular-nums">{{ issue.severity_score }}</span>
          {% endif %}
          <div class="ui-table-caption mt-0.5">{{ issue.severity_bucket | title }}</div>
        </div>
        <div class="mt-2 flex items-end justify-center border-b border-slate-200 dark:border-slate-800" style="height: 12rem;" aria-hidden="true">
          <div class="bg-slate-100 dark:bg-slate-800 overflow-hidden" style="height: 100%; width: 100%; max-width: 4.5rem; display: flex; align-items: flex-end;">
            <div
              class="ui-column-fill w-full {{ severity_color }} group-hover:opacity-90 transition-opacity"
              style="--bar-height: {{ [issue.severity_score, 3] | max if issue.severity_score > 0 else 0 }}%"
            ></div>
          </div>
        </div>
        <div class="mt-2 min-w-0 text-center">
          <div class="font-mono text-sm text-slate-900 dark:text-slate-100 truncate" title="{{ issue.affected_table }}">{{ issue.object }}</div>
          <div class="ui-table-caption truncate">{{ issue.cost_usd | format_usd }}{% if issue.execution_count %} · {{ "{:,}".format(issue.execution_count) }} runs{% endif %}</div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% else %}
    <p class="text-sm text-slate-500 dark:text-slate-400 py-4 text-center">No cost-saving opportunities found in the scan window.</p>
  {% endif %}
</div>