{#- The session's tokens and cost, swapped into #usage (ui.py, "Tokens and cost"): the
    totals and two tables, no usage yet, or why they can't be shown. -#}
{% if message %}
<p class="usage__error">{{ message }}</p>
{% elif not usage %}
<p class="session-section__empty">No usage recorded for this session yet.</p>
{% else %}
<dl class="usage__totals">
  <div><dt>Total cost</dt><dd>{{ usage.total_cost }}</dd></div>
  <div><dt>Tokens</dt><dd>{{ usage.total_tokens }}</dd></div>
</dl>
{% if usage.types %}
<table class="usage__table">
  <caption class="session-section__subtitle">Tokens by type</caption>
  <thead><tr><th scope="col">Type</th><th scope="col" class="usage__number">Tokens</th></tr></thead>
  <tbody>
  {% for row in usage.types %}
  <tr><th scope="row">{{ row.name }}</th><td class="usage__number">{{ row.tokens }}</td></tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}
{% if usage.models %}
<table class="usage__table">
  <caption class="session-section__subtitle">By model</caption>
  <thead><tr><th scope="col">Model</th><th scope="col" class="usage__number">Tokens</th><th scope="col" class="usage__number">Cost</th></tr></thead>
  <tbody>
  {% for row in usage.models %}
  <tr><th scope="row">{% if row.mono %}<code>{{ row.name }}</code>{% else %}{{ row.name }}{% endif %}</th><td class="usage__number">{{ row.tokens if row.tokens is not none else "-" }}</td><td class="usage__number">{{ row.cost if row.cost is not none else "-" }}</td></tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}
{% endif %}