{# Spec 156 - "Spend by origin" tile.

   One horizontal bar per origin tool, sorted by cost desc. Each row
   click-throughs to /opportunities?origin=<tool> for drill-down.

   ``cost_by_origin`` is a list of dicts:
     {origin_tool, cost_usd, job_count, cost_share_pct}
   built in routes/findings.py via a single SQL aggregate over the
   indexed ``bigquery_jobs.origin_tool`` column. #}

{% if cost_by_origin %}
<div class="ui-pane h-full">
  <div class="flex items-baseline justify-between">
    <h2 class="ui-section-title">
      Spend by origin
    </h2>
    <span class="text-xs text-slate-400 dark:text-slate-500">
      {{ cost_by_origin | length }} tool{{ "s" if cost_by_origin | length != 1 else "" }}
    </span>
  </div>
  <p class="ui-card-meta mt-1">
    Which BI / orchestrator / CDC tool submitted each job.
    Click a row to filter the opportunities table to that origin.
  </p>

  <ul class="mt-3 space-y-2">
    {% for row in cost_by_origin %}
    <li>
      <a href="/opportunities?origin={{ row.origin_tool | urlencode }}"
         class="block group hover:bg-slate-50 dark:hover:bg-slate-800/40 rounded px-2 py-1.5 transition-colors">
        <div class="flex items-center justify-between gap-3 text-sm">
          <span class="min-w-0 truncate font-mono text-slate-700 dark:text-slate-200">
            {{ row.origin_tool }}
          </span>
          <span class="shrink-0 text-slate-600 dark:text-slate-300 tabular-nums">
            {{ row.cost_usd | format_usd }}
            <span class="text-slate-400 dark:text-slate-500 text-xs ml-2">
              {{ "{:.1f}".format(row.cost_share_pct) }}%
            </span>
          </span>
        </div>
        {# Bar chart: width tied to cost_share_pct. min 1% so a 0.1%-er still renders a sliver. #}
        <div class="mt-1 h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
          <div
            class="ui-bar-fill h-1.5 bg-brand-500 group-hover:bg-brand-600 transition-colors rounded-full"
            style="--bar-width: {{ [row.cost_share_pct, 1] | max }}%"
          ></div>
        </div>
        <div class="mt-0.5 text-xs text-slate-400 dark:text-slate-500">
          {{ "{:,}".format(row.job_count) }} job{{ "s" if row.job_count != 1 else "" }}
        </div>
      </a>
    </li>
    {% endfor %}
  </ul>
</div>
{% endif %}