{% extends "base.html" %}

{% block content %}
<div class="bg-white dark:bg-slate-800 shadow rounded-lg p-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">SQL Runner</h2>
    
    <form action="{{ url_for('admin.sql_runner') }}" method="POST" class="mb-6">
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Database</label>
            <select name="db_name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 dark:bg-slate-700 dark:text-white">
                <option value="l2" {% if db_name == 'l2' %}selected{% endif %}>L2 (Facts)</option>
                <option value="l3" {% if db_name == 'l3' %}selected{% endif %}>L3 (Features)</option>
                <option value="web" {% if db_name == 'web' %}selected{% endif %}>Web (App Data)</option>
            </select>
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Query</label>
            <textarea name="query" rows="5" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 font-mono text-sm dark:bg-slate-700 dark:text-white" placeholder="SELECT * FROM table LIMIT 10">{{ query }}</textarea>
        </div>
        <button type="submit" class="bg-yrtv-600 text-white py-2 px-4 rounded hover:bg-yrtv-700">Run Query</button>
    </form>
    
    {% if error %}
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
        {{ error }}
    </div>
    {% endif %}
    
    {% if result %}
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border">
            <thead class="bg-gray-50 dark:bg-slate-700">
                <tr>
                    {% for col in result.columns %}
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider border-b">{{ col }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
                {% for row in result.rows %}
                <tr>
                    {% for col in result.columns %}
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 border-b">{{ row[col] }}</td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>
{% endblock %}