<div class="fleet-ops-widget fleet-ops-fuel-providers flex flex-col h-full {{@class}}" ...attributes>
    <div class="flex items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
        <span class="text-xs font-bold text-black dark:text-gray-100">Fuel Integrations</span>
        <FaIcon @icon="gas-pump" class="text-gray-400" />
    </div>

    <div class="flex-1 flex flex-col p-3 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
        {{#if this.load.isRunning}}
            <div class="flex items-center justify-center h-full"><Spinner /></div>
        {{else if this.error}}
            <div class="flex items-center justify-center h-full text-xs text-red-500">{{this.error}}</div>
        {{else if this.data}}
            <div class="grid grid-cols-2 gap-2 mb-3">
                <div>
                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Spend</div>
                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{format-currency this.data.summary.spend this.data.summary.currency}}</div>
                </div>
                <div>
                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Volume</div>
                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.data.summary.volume}} L</div>
                </div>
                <div>
                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Transactions</div>
                    <div class="text-sm font-bold text-gray-900 dark:text-gray-100">{{this.data.summary.transactions}}</div>
                </div>
                <div>
                    <div class="text-[10px] uppercase text-gray-500 dark:text-gray-400">Unmatched</div>
                    <div class="text-sm font-bold {{if this.data.summary.unmatched 'text-red-600 dark:text-red-400' 'text-green-600 dark:text-green-400'}}">{{this.data.summary.unmatched}}</div>
                </div>
            </div>
            <div class="flex-1 min-h-0 overflow-y-auto space-y-1">
                {{#each this.data.providers as |provider|}}
                    <div class="flex items-center justify-between text-xs border-t border-gray-100 dark:border-gray-800 pt-1">
                        <span class="font-semibold uppercase text-gray-700 dark:text-gray-200">{{provider.provider}}</span>
                        <span class="text-gray-500 dark:text-gray-400">{{provider.transactions}} txns</span>
                    </div>
                {{else}}
                    <div class="flex items-center justify-center h-full text-xs text-gray-500 dark:text-gray-400">No provider transactions yet</div>
                {{/each}}
            </div>
        {{/if}}
    </div>
</div>
