{% extends "base.html" %}
{% block content %}
<h1>Model routing ladder</h1>
<p class="lede">Cheapest qualifying available profile wins. Escalation tries tiers in ascending order on verification failure.</p>
<div class="table-wrap">
<table>
<tr><th>Profile</th><th class="num">Quality tier</th><th class="num">Cost / 1k tokens</th><th>Availability</th></tr>
{% for profile, available in availability %}
<tr>
  <td>{{ profile.name }}</td>
  <td class="num">{{ profile.quality_tier }}</td>
  <td class="num">{{ "%.4f" | format(profile.cost_per_1k_tokens) }}</td>
  <td><span class="pill {{ ('available' if available else 'unavailable') | pill_class }}">{{ "available" if available else "unavailable" }}</span></td>
</tr>
{% else %}
<tr><td colspan="4" class="empty">No profiles configured.</td></tr>
{% endfor %}
</table>
</div>

<h2 class="section-label">Usage</h2>
<p class="lede">Real per-provider call counts and tokens from every recorded <code>model.call.completed</code> event. Cost uses each provider's <em>current</em> rate applied to all-time usage &mdash; there's no historical price catalog.</p>
<div class="metric-grid">
{% for u in usage %}
<a class="metric-card" href="/events?event_type=model.call.completed"><span class="n">{{ u.call_count }}</span><span class="label">{{ u.provider }} calls</span></a>
{% else %}
<p class="empty">No model calls recorded yet.</p>
{% endfor %}
</div>
<div class="table-wrap">
<table>
<tr><th>Provider</th><th class="num">Calls</th><th class="num">Input tokens</th><th class="num">Output tokens</th><th class="num">Cost / 1k</th><th class="num">Estimated cost</th></tr>
{% for u in usage %}
<tr>
  <td>{{ u.provider }}</td>
  <td class="num">{{ u.call_count }}</td>
  <td class="num">{{ u.input_tokens }}</td>
  <td class="num">{{ u.output_tokens }}</td>
  <td class="num">{{ "%.4f" | format(u.cost_per_1k_tokens) if u.cost_per_1k_tokens is not none else "—" }}</td>
  <td class="num">{{ "%.4f" | format(u.estimated_cost) if u.estimated_cost is not none else "—" }}</td>
</tr>
{% else %}
<tr><td colspan="6" class="empty">No model calls recorded yet.</td></tr>
{% endfor %}
</table>
</div>

{% if usage %}
<div class="chart-grid">
<div class="chart-card"><h3>Calls by provider</h3><div id="chart-usage-calls"></div></div>
<div class="chart-card"><h3>Estimated cost by provider</h3><div id="chart-usage-cost"></div></div>
</div>
<script>
(function () {
  var calls = [
    {% for u in usage %}
    { label: "{{ u.provider }}", value: {{ u.call_count }} },
    {% endfor %}
  ];
  var cost = [
    {% for u in usage %}
    { label: "{{ u.provider }}", value: {{ u.estimated_cost if u.estimated_cost is not none else 0 }},
      formatted: "{{ "%.4f" | format(u.estimated_cost) if u.estimated_cost is not none else "—" }}" },
    {% endfor %}
  ];
  ACRCharts.barChart(document.getElementById("chart-usage-calls"), calls);
  ACRCharts.barChart(document.getElementById("chart-usage-cost"), cost);
})();
</script>
{% endif %}
{% endblock %}