{% extends "base.html" %}
{% block content %}
<div style="margin-bottom:20px;">
    <h2 style="font-size:22px;font-weight:800;letter-spacing:-0.5px;">Query</h2>
</div>
{% if error %}
<div class="flash flash-error">{{ error }}</div>
{% endif %}
<div class="card" style="padding:20px;margin-bottom:20px;">
    <form method="POST">
        <div class="form-group" style="margin-bottom:14px;">
            <label>Table</label>
            <select onchange="if(!this.value)return;var ta=document.querySelector('.sql-input');ta.value='SELECT * FROM '+this.value+' LIMIT 100;';ta.dispatchEvent(new Event('input'));this.selectedIndex=0;">
                <option value="">— choose a table to insert a starter query —</option>
                {% for t in tables %}
                <option value="{{ t.table }}">{{ t.name }} ({{ t.table }})</option>
                {% endfor %}
            </select>
        </div>
        <div class="form-group">
            <label>SQL</label>
            <div class="sql-editor">
                <pre class="sql-highlight" aria-hidden="true"><code></code></pre>
                <textarea class="sql-input" name="sql" spellcheck="false" autocomplete="off" placeholder="SELECT * FROM users LIMIT 100;">{{ sql }}</textarea>
            </div>
            <div class="field-help">⌘/Ctrl + Enter to run. Any valid SQL is executed directly against the database — including writes.</div>
        </div>
        <div class="form-actions" style="display:flex;gap:10px;">
            <button type="submit" class="btn btn-primary btn-lg">Run Query</button>
            <button type="submit" name="export" value="csv" class="btn btn-secondary btn-lg">Export CSV</button>
            <button type="submit" name="export" value="json" class="btn btn-secondary btn-lg">Export JSON</button>
        </div>
    </form>
</div>
{% if columns %}
<div class="card">
    <div class="table-wrap">
        <table>
            <thead><tr>{% for c in columns %}<th>{{ c }}</th>{% endfor %}</tr></thead>
            <tbody>
                {% for row in rows %}
                <tr>{% for c in columns %}<td>{{ row[c] }}</td>{% endfor %}</tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <div style="padding:12px 16px;color:var(--text3);font-size:12.5px;">
        {{ rows|length }} row(s){% if rowcount is not none %} · {{ rowcount }} affected{% endif %}
    </div>
</div>
{% elif rowcount is not none %}
<div class="card" style="padding:16px 20px;color:var(--text2);">
    No rows returned{% if rowcount %} — {{ rowcount }} row(s) affected{% endif %}.
</div>
{% endif %}
{% endblock %}