<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>
                <div class="text-xs font-semibold uppercase text-gray-400 dark:text-gray-500">Fuel integration setup</div>
                <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Connect Fuel Integration</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Connect PetroApp or another fuel card/fuel management system, test credentials, and configure transaction imports.</p>
            </div>
            <Button @icon="times" @text="Cancel" @size="sm" @onClick={{this.cancel}} />
        </div>
    </section>

    <FuelIntegration::Form
        @resource={{this.connection}}
        @initialProviderKey={{this.setupProvider}}
        @saveLabel="Create Integration"
        @footerHelp="After saving, run a sync to import provider bills into Fuel Transactions."
        @isSaving={{this.save.isRunning}}
        @onCancel={{this.cancel}}
        @onSave={{perform this.save this.connection}}
    />
</div>
