<div class="rounded-md border border-gray-200 dark:border-gray-700 shadow-sm flex-1">
    <div class="flex flex-row items-center justify-between rounded-t-md px-4 py-2 bg-gray-300 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <div>
            <div class="font-semibold text-sm">Query Builder</div>
        </div>
        <div class="flex flex-row space-x-2">
            <Button @type="danger" @icon="trash" @text="Clear" @size="xs" @onClick={{or @onClear (noop)}} />
            <Button @type="magic" @icon="play" @text="Execute Query" @size="xs" @onClick={{or @onExecute (noop)}} />
            <Button @type="primary" @icon="save" @text="Save Report" @size="xs" @onClick={{or @onSave (noop)}} />
        </div>
    </div>
    <div class="px-4 py-2">
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-2">
            <div class="lg:col-span-2">
                <InputGroup @name="Primary Table">
                    <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                        <PowerSelect
                            @options={{@tables}}
                            @selected={{this.primaryTable}}
                            @onChange={{fn (mut this.primaryTable)}}
                            @placeholder="Select a table..."
                            @triggerClass="form-select form-input"
                            as |option|
                        >
                            <div class="text-sm">
                                <div class="font-semibold normalize-in-trigger">{{option.label}}</div>
                                <div class="hide-from-trigger">{{option.description}}</div>
                            </div>
                        </PowerSelect>
                    </div>
                </InputGroup>
            </div>
            <div class="lg:col-span-3">
                <InputGroup @name="Select Columns" />
            </div>
        </div>
    </div>
</div>