<div class="flex h-full flex-col bg-gray-50 dark:bg-gray-900">
    <section class="flex-shrink-0 border-b border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-700 dark:bg-gray-900 md:px-6">
        <div class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
            <div>
                <div class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500">Fuel transaction ledger</div>
                <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">{{t "menu.fuel-transactions"}}</h1>
                <p class="mt-1 max-w-4xl text-sm leading-5 text-gray-500 dark:text-gray-300">
                    Imported fuel card bills and provider purchase records are reviewed here before, during, and after they match to vehicles, trips, and linked Fuel Reports.
                </p>
            </div>
        </div>
    </section>

    <div class="min-h-0 flex-1 overflow-y-auto p-4 md:p-6">
        {{#if this.hasRecords}}
            <Layout::Resource::Tabular
                @resource="fuel-provider-transaction"
                @title={{t "menu.fuel-transactions"}}
                @searchQuery={{this.query}}
                @data={{@model}}
                @columns={{this.columns}}
                @page={{this.page}}
                @onPageChange={{fn (mut this.page)}}
                @setupTable={{fn (mut this.table)}}
                @actionButtons={{this.actionButtons}}
                @bulkActions={{this.bulkActions}}
                @controller={{this}}
                @emptyStateComponent={{component
                    "table/empty-state"
                    icon="receipt"
                    title="No fuel transactions"
                    description="Imported fuel card bills and provider purchase records appear here after provider syncs complete."
                    filteredTitle="No transactions match your filters"
                    filteredDescription="Adjust the search or filters to review other imported transactions."
                    primaryText="Refresh"
                    primaryIcon="refresh"
                    primaryAction=this.refresh
                    docsSlug="fleet-ops/resources/fuel-reports/overview"
                    docsTitle="Fuel reports guide"
                    docsText="Fuel reports guide"
                }}
            />
        {{else}}
            <section class="rounded-md border border-dashed border-gray-300 bg-white p-8 text-center shadow-sm dark:border-gray-700 dark:bg-gray-800">
                <div class="mx-auto flex h-11 w-11 items-center justify-center rounded-md bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-300">
                    <FaIcon @icon="receipt" />
                </div>
                <h2 class="mt-3 text-sm font-bold text-gray-900 dark:text-gray-100">{{this.emptyStateTitle}}</h2>
                <p class="mx-auto mt-1 max-w-2xl text-xs leading-5 text-gray-500 dark:text-gray-300">{{this.emptyStateMessage}}</p>
                <div class="mt-4 flex flex-wrap items-center justify-center gap-2">
                    <Button @icon="gas-pump" @text="Open Fuel Integrations" @type="primary" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.index"}} />
                    <Button @icon="refresh" @text="Refresh" @size="sm" @onClick={{this.refresh}} />
                </div>
            </section>
        {{/if}}
    </div>
</div>
{{outlet}}
