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

{% block title %}Features - Claude Monitor{% 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">Features</h1>
            <p class="mt-2 text-gray-600">Tool usage analytics and statistics</p>
        </div>

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

    <!-- Features Content (HTMX Target) -->
    <div id="features-content">
        {% include 'partials/features_content.html' %}
    </div>
</div>
{% endblock %}