{% if error %}
<div class="text-red-400 bg-red-500/10 border border-red-500/30 rounded-lg p-4">
    <div class="flex items-center gap-2 mb-1">
        <i data-lucide="alert-circle" class="w-4 h-4"></i>
        <span class="font-medium">Query Error</span>
    </div>
    <pre class="text-sm mt-2 whitespace-pre-wrap">{{ error }}</pre>
</div>
{% elif columns %}
<div class="text-sm text-gray-400 mb-3">
    {{ row_count }} rows · {{ execution_time_ms }}ms
</div>
<div class="overflow-auto">
    <table class="w-full text-sm">
        <thead class="bg-[#0d1117] sticky top-0">
            <tr>
                {% for col in columns %}
                <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase whitespace-nowrap border-b border-[#30363d]">{{ col }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
            <tr class="hover:bg-[#21262d]/50 border-b border-[#21262d]">
                {% for cell in row %}
                <td class="px-3 py-1.5 text-xs whitespace-nowrap max-w-xs truncate">{% if cell is none %}<span class="text-gray-600 italic">NULL</span>{% else %}{{ cell }}{% endif %}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-gray-500 text-center py-8">Run a query to see results</div>
{% endif %}