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

{% block title %}Files - Claude Monitor{% endblock %}

{% block main_content %}
<div class="space-y-8" x-data="{}">
    <!-- 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">Files</h1>
            <p class="mt-2 text-gray-600">File-level usage statistics and analytics</p>
        </div>

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

    <!-- Files Content (HTMX Target) -->
    <div id="files-content" hx-get="/api/files?period={{ period|default('today') }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML"></div>
</div>
{% endblock %}