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

   Table rows 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>

  <div class="ui-table-wrap mt-4">
    <table class="ui-table" style="table-layout: fixed; width: 100%;">
      <colgroup>
        <col style="width: 48%;" />
        <col style="width: 22%;" />
        <col style="width: 15%;" />
        <col style="width: 15%;" />
      </colgroup>
      <thead>
        <tr class="ui-table-head-row">
          <th class="ui-table-th">Origin</th>
          <th class="ui-table-th ui-table-th-right">Spend</th>
          <th class="ui-table-th ui-table-th-right">Share</th>
          <th class="ui-table-th ui-table-th-right">Jobs</th>
        </tr>
      </thead>
      <tbody>
        {% for row in cost_by_origin %}
        <tr class="ui-table-row cursor-pointer"
            tabindex="0"
            role="link"
            aria-label="Filter opportunities to {{ row.origin_tool }}"
            onclick="window.location='/opportunities?origin={{ row.origin_tool | urlencode }}'"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/opportunities?origin={{ row.origin_tool | urlencode }}'; }">
          <td class="ui-table-td">
            <span class="ui-cell-title font-mono text-sm truncate block">{{ row.origin_tool }}</span>
          </td>
          <td class="ui-table-td ui-table-td-right tabular-nums">{{ row.cost_usd | format_usd }}</td>
          <td class="ui-table-td ui-table-td-right tabular-nums">{{ "{:.1f}".format(row.cost_share_pct) }}%</td>
          <td class="ui-table-td ui-table-td-right tabular-nums">{{ "{:,}".format(row.job_count) }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}