<div class="mx-auto w-full max-w-7xl px-4 py-4 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">
        <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Transaction Matching</h2>
        <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">This is the order used when imported fuel transactions are matched to vehicles or orders.</p>
        <div class="mt-4">
            <FuelIntegration::MatchingPriority @order={{@model.sync_settings.matching_order}} />
        </div>
        <div class="mt-4 flex flex-wrap items-center gap-2">
            <Button @icon="receipt" @text="Review Unmatched Transactions" @size="sm" @onClick={{transition-to "management.fuel-transactions.index" (query-params sync_status="unmatched" connection=@model.uuid)}} />
            <Button @icon="cog" @text="Edit Matching Rules" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.edit" @model}} />
        </div>
    </section>
</div>
