<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">
        <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
            <div>
                <h2 class="text-sm font-bold text-gray-900 dark:text-gray-100">Connection Settings</h2>
                <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-300">Update credentials, sync behavior, matching rules, and status for this fuel integration.</p>
            </div>
            <Button @icon="cog" @text="Edit Settings" @type="primary" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.edit" @model}} />
        </div>
    </section>
</div>
