{% extends "base.html" %}

{% block content %}
<section class="card">
    <div class="card-header">
        <h3>Model Usage</h3>
    </div>
    {% if models %}
    <table class="data-table">
        <thead>
            <tr>
                <th>Model</th>
                <th>Requests</th>
                <th>Input Tokens (Cost)</th>
                <th>Output Tokens (Cost)</th>
                <th>Cached Tokens (Cost)</th>
                <th>Total Tokens</th>
                <th>Total Cost</th>
                <th>Avg Latency</th>
            </tr>
        </thead>
        <tbody>
            {% for m in models %}
            <tr>
                <td><strong>{{ m.model }}</strong></td>
                <td>{{ m.request_count }}</td>
                <td>{{ "{:,}".format(m.total_input_tokens | default(0) | int) }}{% if m.total_input_cost %} <span class="cost-inline">(${{ "%.6f" | format(m.total_input_cost | float) }})</span>{% endif %}</td>
                <td>{{ "{:,}".format(m.total_output_tokens | default(0) | int) }}{% if m.total_output_cost %} <span class="cost-inline">(${{ "%.6f" | format(m.total_output_cost | float) }})</span>{% endif %}</td>
                <td>{{ "{:,}".format(m.total_cached_tokens | default(0) | int) }}{% if m.total_cached_cost %} <span class="cost-inline">(${{ "%.6f" | format(m.total_cached_cost | float) }})</span>{% endif %}</td>
                <td>{{ "{:,}".format(m.total_tokens | default(0) | int) }}</td>
                <td>${{ "%.6f" | format(m.total_cost | default(0) | float) }}</td>
                <td>{{ "%.0f" | format(m.avg_duration_ms | default(0) | float) }}ms</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>No model usage data available yet.</p>
    {% endif %}
</section>
{% endblock %}