{# Audit "Active Issues" — adapted from governor_web/templates/dashboard/_opportunities_summary.html
   @ 19455c57c5a9. Same `ui-pane` container, same per-rule type-card grid.
   No verified-savings line because audit doesn't generate solutions
   (read-only). #}
<div class="ui-pane">
  <div class="flex items-center justify-between mb-4">
    <div>
      <h2 class="ui-section-title">Active Issues</h2>
      <p class="ui-card-meta mt-1">Cost optimization opportunities by rule type</p>
    </div>
    {% if opportunities.total_count > 0 %}
      <a href="/opportunities" class="text-sm text-brand-500 dark:text-brand-300 hover:underline">View all</a>
    {% endif %}
  </div>

  {% if opportunities.type_cards and opportunities.type_cards | length > 0 %}
    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-{{ [opportunities.type_cards | length, 4] | min }}">
      {% for card in opportunities.type_cards %}
      <div class="block border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 p-4">
        <div class="flex items-center justify-between">
          <p class="text-sm font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400">{{ card.label }}</p>
          <span class="inline-flex items-center rounded-full bg-brand-50 dark:bg-brand-900/30 px-2 py-0.5 text-sm font-semibold text-brand-700 dark:text-brand-300">{{ card.count }}</span>
        </div>
        <div class="mt-3 space-y-2">
          <div class="flex justify-between text-sm">
            <span class="text-slate-500 dark:text-slate-400">Flagged spend</span>
            <span class="font-medium text-slate-700 dark:text-slate-200">{{ card.total_cost | format_usd }}</span>
          </div>
          <div class="flex justify-between text-sm">
            <span class="text-slate-500 dark:text-slate-400">Findings</span>
            <span class="font-medium text-slate-700 dark:text-slate-200">{{ card.count }}</span>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    <p class="ui-card-meta mt-4">{{ opportunities.total_count }} active opportunities</p>
  {% else %}
    <div class="h-48 flex items-center justify-center text-slate-500 dark:text-slate-400">
      <p class="text-sm">No active opportunities detected for this scan.</p>
    </div>
  {% endif %}
</div>