<div class="results-table">
    {{#if @isRunning}}
        <div class="flex items-center justify-center p-8">
            <div class="flex items-center space-x-3">
                <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                <span class="text-sm text-gray-600 dark:text-gray-400">Executing query...</span>
            </div>
        </div>
    {{else if @error}}
        <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
            <div class="flex items-center">
                <FaIcon @icon="exclamation-triangle" class="text-red-500 mr-2" />
                <span class="text-sm text-red-700 dark:text-red-400">
                    {{@error.message}}
                </span>
            </div>
        </div>
    {{else if (eq @pagination.total 0)}}
        <div class="flex items-center justify-center p-8">
            <div class="text-center">
                <FaIcon @icon="table" class="text-gray-400 text-3xl mb-2" />
                <p class="text-sm text-gray-500 dark:text-gray-400">No results found</p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Try adjusting your query filters</p>
            </div>
        </div>
    {{else}}
        <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                    <thead class="bg-gray-50 dark:bg-gray-800">
                        <tr>
                            {{#each @columns as |column|}}
                                <th
                                    scope="col"
                                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                                    {{on "click" (fn @onSort column.name)}}
                                >
                                    <div class="flex items-center space-x-1">
                                        <span>{{or column.label column.name}}</span>
                                        <FaIcon @icon="sort" class="text-gray-400 text-xs" />
                                    </div>
                                </th>
                            {{/each}}
                        </tr>
                    </thead>
                    <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                        {{#each @data as |row|}}
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                                {{#each @columns as |column|}}
                                    <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100">
                                        {{#if (get row column.name)}}
                                            <span class="truncate max-w-xs block">
                                                {{get row column.name}}
                                            </span>
                                        {{else}}
                                            <span class="text-gray-400 dark:text-gray-500 italic">—</span>
                                        {{/if}}
                                    </td>
                                {{/each}}
                            </tr>
                        {{/each}}
                    </tbody>
                </table>
            </div>

            {{#if (gt @pagination.total @pagination.limit)}}
                <div class="bg-white dark:bg-gray-900 px-4 py-3 border-t border-gray-200 dark:border-gray-700">
                    <Pagination @page={{@pagination.page}} @count={{@pagination.total}} @limit={{@pagination.limit}} @onPageChange={{@onPageChange}} @resultsText="results" />
                </div>
            {{/if}}
        </div>
    {{/if}}
</div>