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

<div class="ui-pane h-full">
  <div class="mb-4">
    {{ section_title(
         "Top 5 Expensive Jobs",
         description="Highest-cost logical jobs in this scan window. Open a row to inspect the associated opportunity or representative job.",
         aside='<a href="/cost-analysis" class="text-sm text-brand-500 dark:text-brand-300 hover:underline">View all &rarr;</a>'
    ) }}
  </div>

  {% if top_expensive_jobs %}
  {% set max_cost = top_expensive_jobs[0].cost_usd %}
  <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 job in top_expensive_jobs %}
      {% set bar_height = (job.cost_usd / max_cost * 100) if max_cost else 0 %}
      <a href="{{ job.href }}"
         class="group block hover:bg-slate-50 dark:hover:bg-slate-800/40 px-2 py-2 -mx-2 transition-colors"
         aria-label="Open {{ job.object }}">
        <div class="text-center min-h-14">
          <div class="text-sm font-medium text-slate-900 dark:text-slate-100 tabular-nums">{{ job.cost_usd | format_usd }}</div>
          <div class="ui-table-caption">{{ "%.1f" | format(job.cost_share_pct) }}%</div>
          <div class="ui-table-caption">{{ "{:,}".format(job.execution_count) if job.execution_count else "-" }} runs</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 bg-brand-500 group-hover:bg-brand-600 transition-colors"
              style="--bar-height: {{ [bar_height, 3] | max if bar_height > 0 else 0 }}%"
            ></div>
          </div>
        </div>
        <div class="mt-2 min-w-0 text-center">
          <div class="ui-cell-title font-mono text-sm truncate" title="{{ job.destination_table }}">{{ job.object }}</div>
          <div class="ui-table-caption truncate">
            {% if job.issue_count > 0 %}
              {{ job.issue_count }} issue{{ "s" if job.issue_count != 1 else "" }}
            {% elif job.suggestion_count > 0 %}
              {{ job.suggestion_count }} suggestion{{ "s" if job.suggestion_count != 1 else "" }}
            {% else %}
              no findings
            {% endif %}
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
  {% else %}
    <p class="text-sm text-slate-500 dark:text-slate-400 py-4 text-center">No spend data available yet.</p>
  {% endif %}
</div>