<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">Connectivity setup</div>
                <h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">Connect Provider</h1>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-300">Create a provider connection, test credentials, and prepare device sync.</p>
            </div>
            <Button @icon="times" @text="Cancel" @size="sm" @onClick={{transition-to "connectivity.telematics.index"}} />
        </div>
    </section>

    <Telematic::Form
        @resource={{this.telematic}}
        @controller={{this}}
        @initialProviderKey={{this.setupProvider}}
        @saveLabel="Create Connection"
        @savingLabel="Creating connection"
        @footerHelp="Save the connection, then open it to sync devices and attach them to vehicles."
        @isSaving={{this.save.isRunning}}
        @onCancel={{this.cancel}}
        @onSave={{perform this.save this.telematic}}
    />
</div>
