{# Storage Optimization — one compact card per dataset where switching
   from logical to physical storage billing would lower monthly cost.
   Filters out datasets with sub-$1 monthly savings (rounding noise —
   no point recommending an action that saves nothing). Audit is
   read-only; the ALTER SCHEMA + evidence lives on the opportunity
   detail page that each card links to. #}
{% set worth_acting = storage_panel | selectattr('monthly_savings', 'ge', 1) | list %}
{% if worth_acting %}
<div class="ui-pane">
  <div class="flex flex-wrap items-start justify-between gap-3 mb-4">
    <div>
      <h2 class="ui-section-title">Storage Optimization</h2>
      <p class="ui-card-meta mt-1">
        Datasets where switching from logical to physical storage billing would lower monthly cost.
      </p>
    </div>
    <p class="ui-card-meta whitespace-nowrap">
      {{ worth_acting | length }} dataset{{ '' if worth_acting | length == 1 else 's' }}
    </p>
  </div>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
    {% for row in worth_acting %}
    {# A saving is "significant" when it'd cut the dataset's storage
       bill by either ≥$25 in absolute terms or ≥25% in relative terms.
       Significant cards get a soft emerald gradient background so they
       catch the eye in a wall of cards; smaller wins stay neutral so
       the page reads calm. Text weight stays normal in both cases. #}
    {% set _significant = (row.monthly_savings >= 25) or (row.savings_pct >= 25) %}
    <a href="/opportunities/{{ row.opportunity_id }}"
       class="block border px-4 py-3 transition-colors {% if _significant %}audit-storage-significant border-emerald-200 dark:border-emerald-800/60 hover:border-emerald-400 dark:hover:border-emerald-500{% else %}border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 hover:border-brand-500 dark:hover:border-brand-300{% endif %}"
       title="{{ row.dataset_full }} — switch to physical storage billing">
      <p class="text-sm font-mono text-slate-900 dark:text-slate-100 truncate">{{ row.dataset_short }}</p>
      <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">Switch to physical billing</p>
      <p class="mt-1 text-sm text-slate-700 dark:text-slate-300">
        Save ~${{ "%.0f"|format(row.monthly_savings) }}/mo
        <span class="text-slate-400 dark:text-slate-500">· {{ "%.0f"|format(row.savings_pct) }}%</span>
      </p>
    </a>
    {% endfor %}
  </div>
</div>

{# Soft diagonal emerald gradient used by significant-savings cards.
   Tailwind's gradient utilities aren't in the audit's pre-compiled CSS
   bundle, so we inline a tiny rule here rather than depend on classes
   that won't render. Light + dark variants pair with the slate / emerald
   palette already used elsewhere in the app. #}
<style>
  .audit-storage-significant {
    background: linear-gradient(135deg, rgb(236 253 245) 0%, rgb(209 250 229) 100%);
  }
  .dark .audit-storage-significant {
    background: linear-gradient(135deg, rgb(6 78 59 / 0.30) 0%, rgb(6 95 70 / 0.45) 100%);
  }
</style>
{% endif %}