{{! Template Builder Queries Panel }}
<div class="tb-queries-panel flex flex-col h-full" ...attributes>

    {{! Header }}
    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Queries</span>
        <button
            type="button"
            class="flex items-center space-x-1 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
            title="Add query"
            {{on "click" this.openAddForm}}
        >
            <FaIcon @icon="plus" class="w-3 h-3" />
            <span>Add</span>
        </button>
    </div>

    {{! Query list }}
    <div class="flex-1 overflow-y-auto">

        {{#if this.queries.length}}
            {{#each this.queries as |query|}}
                <div
                    class="tb-query-row group flex items-start px-3 py-2 border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
                >
                    {{! Icon + text }}
                    <div class="flex-1 min-w-0 mr-2">
                        <div class="flex items-center space-x-1.5">
                            <FaIcon @icon="database" class="w-3 h-3 text-indigo-500 flex-shrink-0" />
                            <span class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">{{query.label}}</span>
                        </div>
                        <div class="flex items-center space-x-1.5 mt-0.5">
                            <span class="font-mono text-xs text-indigo-600 dark:text-indigo-400 truncate">&#123;{{query.variable_name}}&#125;</span>
                            {{#if query.model_type}}
                                <span class="text-xs text-gray-400 dark:text-gray-500 truncate">{{query.model_type}}</span>
                            {{/if}}
                            {{! Show "unsaved" badge for queries created before the template was saved }}
                            {{#if (string-starts-with query.uuid "_new_")}}
                                <span class="flex-shrink-0 px-1 py-0 rounded text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">unsaved</span>
                            {{/if}}
                        </div>
                    </div>

                    {{! Action buttons (shown on hover) }}
                    <div class="flex items-center space-x-0.5 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
                        <button
                            type="button"
                            class="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                            title="Edit query"
                            {{on "click" (fn this.openEditForm query)}}
                        >
                            <FaIcon @icon="pen" class="w-3 h-3" />
                        </button>
                        <button
                            type="button"
                            class="p-1 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 hover:text-red-500 dark:hover:text-red-400"
                            title="Delete query"
                            {{on "click" (fn this.deleteQuery query)}}
                        >
                            <FaIcon @icon="trash" class="w-3 h-3" />
                        </button>
                    </div>
                </div>
            {{/each}}

        {{else}}
            <div class="flex flex-col items-center justify-center py-8 px-4 text-center">
                <FaIcon @icon="database" class="w-6 h-6 text-gray-300 dark:text-gray-600 mb-2" />
                <p class="text-xs text-gray-400 dark:text-gray-500">No queries yet.</p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">Queries load data from Fleetbase models at render time and are saved with the template.</p>
            </div>
        {{/if}}

    </div>

    {{! Query Form Modal }}
    <TemplateBuilder::QueryForm
        @isOpen={{this.isFormOpen}}
        @query={{this.editingQuery}}
        @onSave={{this.handleQuerySave}}
        @onClose={{this.closeForm}}
    />

</div>