{% extends "base.html" %}

{% block content %}
<div class="filters-bar">
    <form method="get" action="/traces" class="filter-form">
        <input type="text" name="search" placeholder="Search input/output..." value="{{ filters.search or '' }}">
        <select name="status">
            <option value="">All Status</option>
            <option value="completed" {% if filters.status == 'completed' %}selected{% endif %}>Completed</option>
            <option value="failed" {% if filters.status == 'failed' %}selected{% endif %}>Failed</option>
            <option value="in_progress" {% if filters.status == 'in_progress' %}selected{% endif %}>In Progress</option>
        </select>
        <input type="text" name="model" placeholder="Filter by model..." value="{{ filters.model or '' }}">
        <button type="submit" class="btn btn-primary">Filter</button>
    </form>
</div>

<section class="card">
    <div class="card-header">
        <h3>Traces ({{ total }} total)</h3>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Trace ID</th>
                <th>Input</th>
                <th>Status</th>
                <th>Spans</th>
                <th>Input Tokens</th>
                <th>Output Tokens</th>
                <th>Total Tokens</th>
                <th>Cost</th>
                <th>Duration</th>
                <th>Created</th>
            </tr>
        </thead>
        <tbody>
            {% for t in traces %}
            <tr>
                <td><a href="/traces/{{ t.trace_id }}">{{ t.trace_id[:8] }}...</a></td>
                <td class="truncate">{{ (t.entry_input or '')[:80] }}{% if (t.entry_input or '') | length > 80 %}...{% endif %}</td>
                <td><span class="badge badge-{{ t.status }}">{{ t.status }}</span></td>
                <td>{{ t.span_count | default(0) }}</td>
                <td>{{ "{:,}".format(t.total_input_tokens | default(0) | int) }}</td>
                <td>{{ "{:,}".format(t.total_output_tokens | default(0) | int) }}</td>
                <td>{{ "{:,}".format(t.total_tokens | default(0) | int) }}</td>
                <td>${{ "%.4f" | format(t.total_cost | default(0) | float) }}</td>
                <td>{{ t.total_duration_ms | default('-') }}ms</td>
                <td>{{ t.created_at }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    {% if pages > 1 %}
    <div class="pagination">
        {% if page > 1 %}
        <a href="?page={{ page - 1 }}" class="btn btn-secondary">Previous</a>
        {% endif %}
        <span>Page {{ page }} of {{ pages }}</span>
        {% if page < pages %}
        <a href="?page={{ page + 1 }}" class="btn btn-secondary">Next</a>
        {% endif %}
    </div>
    {% endif %}
</section>
{% endblock %}