56 lines
2.5 KiB
HTML
56 lines
2.5 KiB
HTML
{% if error or results %}
|
|
<div class="mt-12 bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-lg animate-fadeIn relative">
|
|
<!-- Floating Clear Button -->
|
|
<button _="on click transition opacity to 0 then set my.parentElement.innerHTML to ''"
|
|
class="absolute top-4 right-4 p-2 bg-gray-900/10 hover:bg-red-50 text-gray-500 hover:text-red-600 rounded-full transition-all duration-200 group z-10"
|
|
title="Clear results">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5-4h4a2 2 0 012 2v1H7V5a2 2 0 012-2z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
|
|
<h3 class="text-sm font-bold text-gray-700 uppercase tracking-wider">Query Results</h3>
|
|
{% if results %}
|
|
<p class="text-xs text-gray-500 mt-0.5">{{ results|length }} rows returned</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="p-6">
|
|
<div class="bg-red-50 border-l-4 border-red-400 p-4 rounded text-red-700 text-sm">
|
|
<strong class="font-bold">Execution Error:</strong> {{ error }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if results %}
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 table-zebra">
|
|
<thead class="bg-gray-50/30">
|
|
<tr>
|
|
{% for col in columns %}
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-widest border-b border-gray-100">
|
|
{{ col }}
|
|
</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-100">
|
|
{% for row in results %}
|
|
<tr class="hover:bg-blue-50/30 transition-colors">
|
|
{% for col in columns %}
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 font-medium">
|
|
{{ row[col] if row[col] is not none else 'NULL' }}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %} |