{% if error or results %}
<div class="relative">
    <!-- Floating Clear Button -->
    <button _="on click set the innerHTML of my.parentElement to ''"
        class="absolute top-0 right-0 m-2 px-3 py-2 flex items-center gap-2 rounded-full bg-gray-800 text-white shadow-md opacity-50 hover:opacity-100 hover:bg-gray-700 transition-all">
        <!-- Trash Icon -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
            stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
            <path
                d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m5 4v6m4-6v6" />
        </svg>
        <span>Clear</span>
    </button>


    {% if error %}
    <div class="bg-red-200 text-red-800 p-4 rounded mb-4">
        <strong>Error:</strong> {{ error }}
    </div>
    {% endif %}

    {% if results %}
    <table class="min-w-full bg-white">
        <thead>
            <tr>
                {% for col in columns %}
                <th class="py-2 px-4 border-b">{{ col }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in results %}
            <tr class="text-center">
                {% for col in columns %}
                <td class="py-2 px-4 border-b">{{ row[col] }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>
{% endif %}