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

{% block title %}Integrations - 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">Integrations</h1>
            <p class="mt-2 text-gray-600">MCP servers and tool integration statistics</p>
        </div>

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

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