{% 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 %}