{{#let (cannot "fleet-ops update vendor") as |unauthorized|}}
    <div class="space-y-4">
        {{#if this.isIntegratedVendor}}
            <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.provider"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <div class="flex flex-row items-center">
                    <img src={{this.vendor.provider_settings.logo}} alt={{this.vendor.provider_settings.code}} class="w-12 h-12" width="48" height="48" />
                    <h3 class="text-base text-black dark:text-white ml-4">{{this.vendor.provider_settings.name}}</h3>
                </div>
            </ContentPanel>
            <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.credentials"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                {{#if this.isEditingCredentials}}
                    {{#each this.vendor.provider_settings.credential_params as |param|}}
                        <InputGroup
                            @name={{smart-humanize param.key}}
                            @value={{mut (get this.vendor.credentials param.key)}}
                            @helpText={{concat
                                (t "fleet-ops.component.vendor-form-panel.create-form.optionally")
                                (smart-humanize param.key)
                                (t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")
                            }}
                            @disabled={{unauthorized}}
                        />
                    {{/each}}
                    <div class="mt-4">
                        <a href="javascript:;" class="text-red-600 underline text-sm" disabled={{unauthorized}} {{on "click" this.toggleCredentialsReset}}>{{t
                                "fleet-ops.component.vendor-form-panel.edit-form.cancel-credentials"
                            }}</a>
                    </div>
                {{else}}
                    <div class="rounded-md border shadow-sm border-gray-200 text-black bg-white dark:border-gray-700 dark:bg-gray-900 dark:text-white text-xs px-3 py-2 mb-4 mt-2">
                        <p class="mb-2">{{t "fleet-ops.component.vendor-form-panel.edit-form.sensitive-credentials"}}</p>
                        <a href="javascript:;" class="text-red-600 underline text-sm" disabled={{unauthorized}} {{on "click" this.toggleCredentialsReset}}>{{t
                                "fleet-ops.component.vendor-form-panel.edit-form.reset-credentials"
                            }}</a>
                    </div>
                    <div>
                        {{#each this.vendor.provider_settings.credential_params as |param|}}
                            <InputGroup
                                @name={{smart-humanize param.key}}
                                @value="*********"
                                @disabled={{true}}
                                @helpText={{concat
                                    (t "fleet-ops.component.vendor-form-panel.create-form.optionally")
                                    (smart-humanize param.key)
                                    (t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")
                                }}
                            />
                        {{/each}}
                    </div>
                {{/if}}
            </ContentPanel>
            <ContentPanel @title="Options" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                {{#each this.vendor.provider_settings.option_params as |param|}}
                    {{#if param.options}}
                        <InputGroup @name={{smart-humanize param.key}}>
                            <Select
                                @value={{mut (get this.vendor.options param.key)}}
                                @options={{param.options}}
                                @optionValue={{param.optionValue}}
                                @optionLabel={{param.optionLabel}}
                                @humanize={{true}}
                                @placeholder={{concat "Select " (smart-humanize param.key)}}
                                @onSelect={{fn (mut (get this.vendor.options param.key))}}
                                @disabled={{unauthorized}}
                            />
                        </InputGroup>
                    {{else}}
                        <InputGroup
                            @name={{smart-humanize param.key}}
                            @value={{mut (get this.vendor.options param.key)}}
                            @helpText={{concat
                                (t "fleet-ops.component.vendor-form-panel.create-form.optionally")
                                (smart-humanize param.key)
                                (t "fleet-ops.component.vendor-form-panel.create-form.configure-vendor")
                            }}
                            @disabled={{unauthorized}}
                        />
                    {{/if}}
                {{/each}}
                <InputGroup>
                    <Checkbox
                        @value={{this.vendor.sandbox}}
                        @label="Sandbox"
                        @onToggle={{fn (mut this.vendor.sandbox)}}
                        @alignItems="center"
                        @labelClass="mb-0i"
                        @disabled={{unauthorized}}
                    />
                </InputGroup>
            </ContentPanel>
            <ContentPanel @title={{t "fleet-ops.component.vendor-form-panel.create-form.advanced-options"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <div>
                    <a href="javascript:;" class="text-blue-600 underline text-sm" disabled={{unauthorized}} {{on "click" this.toggleAdvancedOptions}}>{{if
                            this.showAdvancedOptions
                            (t "fleet-ops.component.vendor-form-panel.create-form.hide-advanced-options")
                            (t "fleet-ops.component.vendor-form-panel.create-form.show-advanced-options")
                        }}</a>
                </div>
                {{#if this.showAdvancedOptions}}
                    <div class="mt-4">
                        <InputGroup
                            @name={{t "fleet-ops.component.vendor-form-panel.create-form.host"}}
                            @value={{this.vendor.host}}
                            @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.host-text"}}
                            @disabled={{unauthorized}}
                        />
                        <InputGroup
                            @name={{t "fleet-ops.component.vendor-form-panel.create-form.namespace"}}
                            @value={{this.vendor.namespace}}
                            @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.namespace-text"}}
                            @disabled={{unauthorized}}
                        />
                        <InputGroup
                            @name={{t "fleet-ops.component.vendor-form-panel.create-form.webhook"}}
                            @value={{this.vendor.webhook_url}}
                            @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.webhook-text"}}
                            @disabled={{unauthorized}}
                        />
                    </div>
                {{/if}}
            </ContentPanel>
        {{else}}
            <InputGroup
                @name={{t "fleet-ops.common.name"}}
                @value={{this.vendor.name}}
                @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.name-text"}}
                @disabled={{unauthorized}}
            />
            <InputGroup @name={{t "fleet-ops.common.phone"}} @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.phone-text"}}>
                <PhoneInput @value={{this.vendor.phone}} @onInput={{fn (mut this.vendor.phone)}} disabled={{unauthorized}} class="form-input w-full" />
            </InputGroup>
            <InputGroup
                @name={{t "fleet-ops.common.email"}}
                @type="email"
                @value={{this.vendor.email}}
                @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.email-text"}}
                @disabled={{unauthorized}}
            />
            <InputGroup
                @name={{t "fleet-ops.common.website"}}
                @value={{this.vendor.website_url}}
                @helpText={{t "fleet-ops.component.vendor-form-panel.create-form.website-text"}}
                @disabled={{unauthorized}}
            />
            <InputGroup @name={{t "fleet-ops.common.type"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{@vendorTypes}}
                        @selected={{this.vendor.type}}
                        @onChange={{fn (mut this.vendor.type)}}
                        @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-type"}}
                        @triggerClass="form-select form-input"
                        @disabled={{unauthorized}}
                        as |type|
                    >
                        {{smart-humanize type}}
                    </PowerSelect>
                </div>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.status"}}>
                <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                    <PowerSelect
                        @options={{@vendorStatusOptions}}
                        @selected={{this.vendor.status}}
                        @onChange={{fn (mut this.vendor.status)}}
                        @placeholder={{t "fleet-ops.component.vendor-form-panel.create-form.select-vendor-status"}}
                        @triggerClass="form-select form-input"
                        @disabled={{unauthorized}}
                        as |status|
                    >
                        {{smart-humanize status}}
                    </PowerSelect>
                </div>
            </InputGroup>
            <InputGroup @wrapperClass="col-span-2">
                <div class="flex items-center justify-between">
                    <label>
                        {{t "fleet-ops.common.address"}}
                    </label>
                    <div class="mb-1.5 flex flex-row">
                        <Button
                            @type="default"
                            @size="xs"
                            @icon="edit"
                            @text={{if
                                this.vendor.has_place
                                (t "fleet-ops.component.vendor-form-panel.create-form.edit")
                                (t "fleet-ops.component.vendor-form-panel.create-form.new-address")
                            }}
                            @onClick={{this.editAddress}}
                            @disabled={{unauthorized}}
                        />
                    </div>
                </div>
                <ModelSelect
                    @modelName="place"
                    @selectedModel={{this.vendor.place}}
                    @placeholder={{t "fleet-ops.component.vendor-form-panel.edit-form.select-address"}}
                    @triggerClass="form-select form-input"
                    @infiniteScroll={{false}}
                    @renderInPlace={{true}}
                    @onChange={{this.selectVendorAddress}}
                    @disabled={{unauthorized}}
                    as |model|
                >
                    <div class="flex items-center flex-row justify-between">
                        <div class="truncate flex-1">{{n-a model.address}}</div>
                        <Badge @hideStatusDot={{true}} @status="info">{{model.public_id}}</Badge>
                    </div>
                </ModelSelect>
            </InputGroup>
            <InputGroup @name={{t "fleet-ops.common.country"}}>
                <CountrySelect
                    class="w-full form-input form-select form-datalist"
                    @value={{this.vendor.country}}
                    @onChange={{fn (mut this.vendor.country)}}
                    @disabled={{unauthorized}}
                    @placeholder={{t "fleet-ops.common.country"}}
                />
            </InputGroup>
        {{/if}}
    </div>
{{/let}}