{% extends "base.html" %}

{% block title %}Models - Dango{% endblock %}

{% block content %}
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
        <!-- dbt build status banner (shown/hidden by WebSocket events) -->
        <div id="dbt-build-banner" class="hidden mb-4 rounded-lg px-4 py-3 text-sm font-medium"></div>

        <!-- dbt Models -->
        <div class="bg-white rounded-lg shadow">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold text-gray-900">dbt Models</h2>
                    <button onclick="refreshDbtModels()" class="text-sm text-blue-600 hover:text-blue-800">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                    </button>
                </div>
            </div>

            <div class="px-6 py-3 border-b border-gray-200 flex items-center gap-2">
                <svg class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
                <input type="text" id="models-filter-input" placeholder="Filter by name, schema, or type..."
                       class="w-full px-3 py-2 border text-sm border-gray-300 rounded-md">
                <button id="models-filter-clear" class="text-xs text-gray-400 hover:text-gray-600 invisible">Clear</button>
            </div>

            <div class="overflow-x-auto" style="overflow-y: clip">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th data-sort-key="name" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer select-none hover:text-gray-700">Model</th>
                            <th data-sort-key="status" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer select-none hover:text-gray-700">Status</th>
                            <th data-sort-key="last_run" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer select-none hover:text-gray-700">Last Run</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            <th data-sort-key="schema" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer select-none hover:text-gray-700">Schema</th>
                            <th data-sort-key="materialization" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer select-none hover:text-gray-700">Type</th>
                            <th data-sort-key="rows" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer select-none hover:text-gray-700">Rows</th>
                        </tr>
                    </thead>
                    <tbody id="dbt-models-table-body" class="bg-white divide-y divide-gray-200">
                        <!-- Will be populated by JavaScript -->
                        <tr>
                            <td colspan="7" class="px-6 py-8 text-center text-gray-500">
                                <div class="flex flex-col items-center space-y-2">
                                    <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                    </svg>
                                    <p>Loading dbt models...</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>

    <!-- Toast Notification Container -->
    <div id="toast-container" class="fixed bottom-4 right-4 space-y-2 z-50">
        <!-- Toasts will be added here dynamically -->
    </div>
{% endblock %}

{% block scripts %}
    <script src="{{ static_url('js/app.js') }}"></script>
{% endblock %}