<div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 px-4 py-4 lg:grid-cols-3 md:px-6">
    <section class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 lg:col-span-2">
        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">How This Integration Works</h2>
        <p class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-300">
            {{or @model.name @model.provider}} imports provider bills as Fuel Transactions, matches each transaction to vehicles and trips, then creates linked Fuel Reports for operational reporting after a vehicle match.
        </p>
        <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-3">
            <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
                <div class="text-xs font-bold uppercase text-gray-400">1. Import</div>
                <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Provider bills</div>
                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Sync pulls fuel purchase data from the provider API.</p>
            </div>
            <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
                <div class="text-xs font-bold uppercase text-gray-400">2. Match</div>
                <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Vehicles and trips</div>
                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Identifiers are matched against vehicles, orders, and trip numbers.</p>
            </div>
            <div class="rounded-md border border-gray-200 p-3 dark:border-gray-700">
                <div class="text-xs font-bold uppercase text-gray-400">3. Report</div>
                <div class="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">Fuel Reports</div>
                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Matched transactions create visible fuel reports for operations and analytics.</p>
            </div>
        </div>
    </section>

    <aside class="rounded-md border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Latest Sync Summary</h2>
        <div class="mt-3 space-y-2 text-sm">
            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Imported</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.imported}}</span></div>
            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Matched</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.matched}}</span></div>
            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Unmatched</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.unmatched}}</span></div>
            <div class="flex justify-between gap-3"><span class="text-gray-500 dark:text-gray-300">Fuel Reports</span><span class="font-semibold text-gray-900 dark:text-gray-100">{{n-a @model.last_sync_state.summary.fuel_reports_created}}</span></div>
        </div>
        {{#if @model.last_error}}
            <div class="mt-4 rounded-md border border-red-200 bg-red-50 p-3 text-xs leading-5 text-red-700 dark:border-red-800 dark:bg-red-900/10 dark:text-red-300">{{@model.last_error}}</div>
        {{/if}}
    </aside>
</div>
