<div class="flex flex-col" ...attributes>
    <div class="mb-3 flex flex-row items-center justify-between">
        <div class="flex flex-row items-center space-x-2">
            <Input @value={{this.searchTerm}} {{on "input" this.onInput}} class="form-input form-input-sm w-64" placeholder="Search reports by keyword..." />
            {{#if this.queryReports.isRunning}}
                <Spinner />
            {{/if}}
        </div>
    </div>

    <div class="flex max-h-[300px] flex-col space-y-2 overflow-y-scroll">
        {{#each this.reports as |report|}}
            <div class="rounded-md border border-gray-200 p-2 shadow-sm dark:border-gray-700" data-test-report-option data-report-id={{report.id}}>
                <div class="flex flex-row justify-between">
                    <div class="flex flex-row space-x-2">
                        <div>
                            <div class="font-semibold text-gray-900 dark:text-gray-100">{{report.title}}</div>
                            <div class="text-sm text-gray-300 dark:text-gray-500">{{report.createdAt}}</div>
                        </div>
                    </div>
                    <div class="flex items-center justify-center">
                        <div class="flex flex-grow-0 flex-row space-x-2 self-start">
                            <Button @text="Select" @onClick={{fn this.selectReport report}} @size="xs" @disabled={{includes report.id (map-by "id" this.selectedReports)}} data-test-report-select />
                            <Button
                                @icon="times"
                                @type="danger"
                                @onClick={{fn this.removeReport report}}
                                @size="xs"
                                @disabled={{not (includes report.id (map-by "id" this.selectedReports))}}
                                data-test-report-remove
                            />
                        </div>
                    </div>
                </div>
            </div>
        {{else}}
            <div class="min-h-24 py-4">
                <div class="flex items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 p-6 dark:border-gray-600 dark:bg-gray-800">
                    <div class="text-center">
                        <FaIcon @icon="file-invoice" @size="2x" class="mb-2 text-gray-400" />
                        <div class="text-sm font-medium text-gray-600 dark:text-gray-400">No reports available</div>
                        <div class="mt-1 text-xs text-gray-500 dark:text-gray-500">System found no reports available.</div>
                    </div>
                </div>
            </div>
        {{/each}}
    </div>
</div>
