{# Dashboard spend-by-author tile.

   ``cost_by_author`` is a list of dicts:
     {author_email, cost_usd, job_count, cost_share_pct}
   built in routes/findings.py via a single SQL aggregate over
   ``bigquery_jobs.user_email``. #}

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

  <ul class="mt-3 space-y-2">
    {% for row in cost_by_author %}
    <li>
      <a href="/opportunities?author={{ row.author_email | 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" title="{{ row.author_email }}">
            {{ row.author_email }}
          </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>
        <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 %}