{% extends 'base.html' %}

{% block title %}MCP Servers - FinBot Admin{% endblock %}
{% block nav_mcp_servers %}active{% endblock %}
{% block page_title %}MCP Servers{% endblock %}
{% block page_subtitle %}Manage MCP server connections, settings, and tool definitions{% endblock %}

{% block content %}
<div id="servers-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Server cards loaded dynamically -->
    <div class="col-span-full flex items-center justify-center py-16">
        <svg class="animate-spin h-6 w-6 text-admin-primary" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <span class="ml-3 text-text-secondary">Loading MCP servers...</span>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', path='js/admin/mcp-servers.js') }}"></script>
{% endblock %}