{% extends "layouts/app.html" %}
{% from "components/card.html" import stat_card %}

{% block title %}Sub-Agents - ClaudeSavvy{% endblock %}

{% block main_content %}
<div class="space-y-8">
    <!-- Page Title and Time Filter -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Sub-Agents</h1>
            <p class="mt-2 text-gray-600">Token exchange analytics for Task tool sub-agent invocations</p>
        </div>

        {% with current_url='/api/subagents', target_id='subagents-content', show_realtime=true, storage_key='cs_period_subagents', default_period=period|default('today') %}
            {% include 'partials/time_filter.html' %}
        {% endwith %}
    </div>

    <!-- Sub-Agents Content (HTMX Target) -->
    <div id="subagents-content">
        {% include 'partials/subagents_content.html' %}
    </div>
</div>
{% endblock %}