{% extends 'base.html' %}

{% block content %}

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
                SQL <span class="text-blue-600">Explorer</span>
            </h1>
            <p class="mt-2 text-sm text-gray-500 max-w-2xl">
                Query your workout data directly using SQL or natural language. Explore the database schema below to
                understand the available tables and relationships.
            </p>
        </div>
        <div class="flex items-center gap-2">
            <span
                class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200">
                <span class="flex h-2 w-2 mr-1.5 space-x-1">
                    <span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-blue-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
                </span>
                PostgreSQL Connected
            </span>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-8">
        <!-- Schema Section -->
        <section
            class="bg-white shadow-sm border border-gray-200 rounded-2xl overflow-hidden transition-all hover:shadow-md">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
                <div class="flex items-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-800">Database Schema</h3>
                </div>
                <button class="text-sm text-blue-600 hover:text-blue-700 font-medium transition-colors" _="on click toggle .hidden on #schema-content then
                           if #schema-content.classList.contains('hidden') set my.innerText to 'Show Schema'
                           else set my.innerText to 'Hide Schema'">
                    Hide Schema
                </button>
            </div>
            <div id="schema-content" class="p-6 transition-all duration-300">
                <div hx-get="{{ url_for('sql_explorer.sql_schema') }}" hx-trigger="load">
                    <!-- Loader placeholder -->
                    <div class="flex justify-center items-center py-12">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Query Section -->
        <section
            class="bg-white shadow-sm border border-gray-200 rounded-2xl overflow-hidden transition-all hover:shadow-md">
            <div class="px-6 py-4 border-b border-gray-100 flex items-center gap-2 bg-gray-50/50">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24"
                    stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                </svg>
                <h3 class="text-lg font-semibold text-gray-800">SQL Query Editor</h3>
            </div>
            <div class="p-6">
                {{ render_partial('partials/sql_explorer/sql_query.html', saved_queries=saved_queries) }}
            </div>
        </section>
    </div>
</div>

{% endblock %}