<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 dark:shadow-sm dark:shadow-black/30 md:px-6">
        <div class="mx-auto flex w-full max-w-6xl flex-col gap-3 md:flex-row md:items-start md:justify-between">
            <div class="min-w-0">
                <div class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500">Fuel integration settings</div>
                <h1 class="truncate text-lg font-bold text-gray-900 dark:text-gray-100">Edit {{or @model.name @model.provider}}</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Update credentials, sync behavior, and matching rules for this fuel integration.</p>
            </div>
            <div class="flex items-center gap-2">
                <Button @icon="eye" @text="View" @size="sm" @onClick={{transition-to "connectivity.fuel-providers.details" @model}} />
                <Button @icon="times" @text="Cancel" @size="sm" @onClick={{this.cancel}} />
            </div>
        </div>
    </section>

    <FuelIntegration::Form
        @resource={{@model}}
        @saveLabel="Save Changes"
        @footerHelp="Changes affect credential tests, transaction sync, matching, and Fuel Report creation."
        @isSaving={{this.save.isRunning}}
        @onCancel={{this.cancel}}
        @onSave={{perform this.save @model}}
    />
</div>
