{# 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>

  <div class="ui-table-wrap mt-4">
    <table class="ui-table" style="table-layout: fixed; width: 100%;">
      <colgroup>
        <col style="width: 52%;" />
        <col style="width: 20%;" />
        <col style="width: 14%;" />
        <col style="width: 14%;" />
      </colgroup>
      <thead>
        <tr class="ui-table-head-row">
          <th class="ui-table-th">Author</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_author %}
        <tr class="ui-table-row cursor-pointer"
            tabindex="0"
            role="link"
            aria-label="Filter opportunities to {{ row.author_email }}"
            onclick="window.location='/opportunities?author={{ row.author_email | urlencode }}'"
            onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.location='/opportunities?author={{ row.author_email | urlencode }}'; }">
          <td class="ui-table-td">
            <span class="ui-cell-title font-mono text-sm truncate block" title="{{ row.author_email }}">{{ row.author_email }}</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 %}