<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        {{#if @options.action}}
            <InputGroup>
                <div class="space-x-4 flex">
                    <button
                        type="button"
                        class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center
                            {{if (eq @options.action 'select') 'border-blue-500'}}"
                        {{on "click" (fn (mut @options.action) "select")}}
                    >
                        <div class="mr-2.5">
                            <FaIcon @icon="handshake" @size="xl" class="text-blue-500" />
                        </div>
                        <div>
                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.choose-vendor"}}</span>
                        </div>
                    </button>
                    <button
                        type="button"
                        class="outline-none flex-1 rounded-lg bg-white dark:bg-gray-900 border-2 border-transparent px-4 py-2 flex items-center justify-center
                            {{if (eq @options.action 'create') 'border-blue-500'}}"
                        {{on "click" (fn (mut @options.action) "create")}}
                    >
                        <div class="mr-2.5">
                            <FaIcon @icon="building" @size="xl" class="text-blue-500" />
                        </div>
                        <div>
                            <span class="text-gray-900 dark:text-gray-100 text-lg">{{t "fleet-ops.component.modals.vendor-form.create-vendor"}}</span>
                        </div>
                    </button>
                </div>
            </InputGroup>
        {{/if}}

        {{#if (eq @options.action "select")}}
            <div class="grid grid-cols-2 gap-4 lg:grid-cols-3 mb-4">
                {{#each @options.supportedIntegratedVendors as |integratedVendor|}}
                    <button
                        type="button"
                        class="integrated-vendor-button {{if (eq @options.selectedIntegratedVendor.code integratedVendor.code) 'selected'}}"
                        {{on "click" (fn @options.selectIntegratedVendor integratedVendor)}}
                    >
                        <div>
                            <img src={{integratedVendor.logo}} alt={{integratedVendor.code}} class="w-20 h-20" width="80" height="80" />
                        </div>
                        <div>
                            <span class="text-sm font-semibold dark:text-white text-lg">{{integratedVendor.name}}</span>
                        </div>
                    </button>
                {{/each}}
            </div>

            {{#if @options.selectedIntegratedVendor}}
                <div class="mb-2">
                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
                    {{#each @options.selectedIntegratedVendor.credential_params as |param|}}
                        <InputGroup
                            @name={{smart-humanize param.key}}
                            @value={{mut (get @options.integratedVendor.credentials param.key)}}
                            @helpText={{concat
                                (t "fleet-ops.component.modals.vendor-form.optionally")
                                (smart-humanize param.key)
                                (t "fleet-ops.component.modals.vendor-form.configure-vendor")
                            }}
                        />
                    {{/each}}
                </div>
                <div class="mb-2">
                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
                    {{#each @options.selectedIntegratedVendor.option_params as |param|}}
                        {{#if param.options}}
                            <InputGroup @name={{smart-humanize param.key}}>
                                <Select
                                    @value={{mut (get @options.integratedVendor.options param.key)}}
                                    @options={{param.options}}
                                    @optionValue={{param.optionValue}}
                                    @optionLabel={{param.optionLabel}}
                                    @humanize={{true}}
                                    @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}}
                                    @onSelect={{fn (mut (get @options.integratedVendor.options param.key))}}
                                />
                            </InputGroup>
                        {{else}}
                            <InputGroup
                                @name={{smart-humanize param.key}}
                                @value={{mut (get @options.integratedVendor.options param.key)}}
                                @helpText={{concat
                                    (t "fleet-ops.component.modals.vendor-form.optionally")
                                    (smart-humanize param.key)
                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
                                }}
                            />
                        {{/if}}
                    {{/each}}
                </div>
                <InputGroup @wrapperClass="mb-2">
                    <Checkbox
                        @value={{@options.integratedVendor.sandbox}}
                        @label={{t "fleet-ops.component.modals.vendor-form.sandbox"}}
                        @onToggle={{fn (mut @options.integratedVendor.sandbox)}}
                        @alignItems="center"
                        @labelClass="mb-0i"
                    />
                </InputGroup>
                <div>
                    <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                        {{#if @options.showAdvancedOptions}}
                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
                        {{else}}
                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
                        {{/if}}
                    </button>
                    {{#if @options.showAdvancedOptions}}
                        <InputGroup
                            @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}}
                            @value={{@options.integratedVendor.host}}
                            @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}}
                        />
                        <InputGroup
                            @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}}
                            @value={{@options.integratedVendor.namespace}}
                            @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}}
                        />
                        <InputGroup
                            @name={{t "fleet-ops.component.modals.vendor-form.webhook"}}
                            @value={{@options.integratedVendor.webhook_url}}
                            @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}}
                        />
                    {{/if}}
                </div>
            {{/if}}
        {{else}}
            {{#if @options.isIntegratedVendor}}
                <div class="integrated-vendor-button border-0 mb-4">
                    <div>
                        <img src={{@options.vendor.provider_settings.logo}} alt={{@options.vendor.provider_settings.code}} class="w-20 h-20" width="80" height="80" />
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold dark:text-white">{{@options.vendor.provider_settings.name}}</h3>
                    </div>
                </div>
                <div class="mb-2">
                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.credentials"}}</label>
                    {{#if @options.isEditingCredentials}}
                        {{#each @options.vendor.provider_settings.credential_params as |param|}}
                            <InputGroup
                                @name={{smart-humanize param.key}}
                                @value={{mut (get @options.vendor.credentials param.key)}}
                                @helpText={{concat
                                    (t "fleet-ops.component.modals.vendor-form.optionally")
                                    (smart-humanize param.key)
                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
                                }}
                            />
                        {{/each}}
                        <div class="my-4">
                            <Button
                                @text={{t "fleet-ops.component.modals.vendor-form.cancel-credentials"}}
                                @type="danger"
                                @size="sm"
                                @icon="times"
                                @onClick={{@options.toggleCredentialsReset}}
                            />
                        </div>
                    {{else}}
                        <div>
                            <div class="rounded-md border border-blue-300 dark:border-blue-600 bg-blue-100 dark:bg-blue-500 text-blue-900 dark:text-white text-sm px-4 py-2 mb-4">
                                <p class="mb-2">{{t "fleet-ops.component.modals.vendor-form.reset-message"}}</p>
                                <Button @type="default" @size="xs" @icon="repeat" @text="Click here to reset" @onClick={{@options.toggleCredentialsReset}} />
                            </div>
                        </div>
                        {{#each @options.vendor.provider_settings.credential_params as |param|}}
                            <InputGroup
                                @name={{smart-humanize param.key}}
                                @value="*********"
                                @disabled="true"
                                @helpText={{concat
                                    (t "fleet-ops.component.modals.vendor-form.optionally")
                                    (smart-humanize param.key)
                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
                                }}
                            />
                        {{/each}}
                    {{/if}}
                </div>
                <div class="mb-2">
                    <label class="mb-2 block dark:text-gray-400 text-xs">{{t "fleet-ops.component.modals.vendor-form.options"}}</label>
                    {{#each @options.vendor.provider_settings.option_params as |param|}}
                        {{#if param.options}}
                            <InputGroup @name={{smart-humanize param.key}}>
                                <Select
                                    @value={{mut (get @options.vendor.options param.key)}}
                                    @options={{param.options}}
                                    @optionValue={{param.optionValue}}
                                    @optionLabel={{param.optionLabel}}
                                    @humanize={{true}}
                                    @placeholder={{concat (t "fleet-ops.component.modals.vendor-form.select") (smart-humanize param.key)}}
                                    @onSelect={{fn (mut (get @options.vendor.options param.key))}}
                                />
                            </InputGroup>
                        {{else}}
                            <InputGroup
                                @name={{smart-humanize param.key}}
                                @value={{mut (get @options.vendor.options param.key)}}
                                @helpText={{concat
                                    (t "fleet-ops.component.modals.vendor-form.optionally")
                                    (smart-humanize param.key)
                                    (t "fleet-ops.component.modals.vendor-form.configure-vendor")
                                }}
                            />
                        {{/if}}
                    {{/each}}
                </div>
                <InputGroup @wrapperClass="mb-2">
                    <Checkbox @value={{@options.vendor.sandbox}} @label="Sandbox" @onToggle={{fn (mut @options.vendor.sandbox)}} @alignItems="center" @labelClass="mb-0i" />
                </InputGroup>
                <div>
                    <button type="button" class="btn-link text-xs outline-none text-blue-600 hover:text-blue-600 mb-3" {{on "click" @options.toggleAdvancedOptions}}>
                        {{#if @options.showAdvancedOptions}}
                            <span>{{t "fleet-ops.component.modals.vendor-form.hide-advanced"}}</span>
                        {{else}}
                            <span>{{t "fleet-ops.component.modals.vendor-form.show-advanced"}}</span>
                        {{/if}}
                    </button>
                    {{#if @options.showAdvancedOptions}}
                        <InputGroup
                            @name={{t "fleet-ops.component.modals.vendor-form.custom-host"}}
                            @value={{@options.vendor.host}}
                            @helpText={{t "fleet-ops.component.modals.vendor-form.host-text"}}
                        />
                        <InputGroup
                            @name={{t "fleet-ops.component.modals.vendor-form.custom-namespace"}}
                            @value={{@options.vendor.namespace}}
                            @helpText={{t "fleet-ops.component.modals.vendor-form.namespace-text"}}
                        />
                        <InputGroup
                            @name={{t "fleet-ops.component.modals.vendor-form.webhook"}}
                            @value={{@options.vendor.webhook_url}}
                            @helpText={{t "fleet-ops.component.modals.vendor-form.webhook-text"}}
                        />
                    {{/if}}
                </div>
            {{else}}
                <div class="grid lg:grid-cols-2 grid-cols-1 gap-2 text-xs dark:text-gray-100">
                    <InputGroup @name={{t "fleet-ops.common.name"}} @value={{@options.vendor.name}} @wrapperClass="mb-0" @helpText={{t "fleet-ops.component.modals.vendor-form.name-text"}} />
                    <InputGroup
                        @name={{t "fleet-ops.common.email"}}
                        @type="email"
                        @value={{@options.vendor.email}}
                        @wrapperClass="mb-0"
                        @helpText={{t "fleet-ops.component.modals.vendor-form.email-text"}}
                    />
                    <InputGroup
                        @name={{t "fleet-ops.common.phone"}}
                        @type="tel"
                        @value={{@options.vendor.phone}}
                        @wrapperClass="mb-0"
                        @helpText={{t "fleet-ops.component.modals.vendor-form.phone-text"}}
                    />
                    <InputGroup
                        @name={{t "fleet-ops.common.website"}}
                        @value={{@options.vendor.website}}
                        @wrapperClass="mb-0"
                        @helpText={{t "fleet-ops.component.modals.vendor-form.website-text"}}
                    />
                    <InputGroup @wrapperClass="mb-0 col-span-2">
                        <div class="flex items-start justify-between">
                            <label>
                                {{t "fleet-ops.common.address"}}
                            </label>
                            <div class="mb-1.5 flex flex-row">
                                {{#if @options.vendor.has_place}}
                                    <Button @type="default" @size="xs" @icon="edit" @text={{t "fleet-ops.common.edit"}} @onClick={{@options.editAddress}} />
                                {{/if}}
                                <Button @type="default" @size="xs" @icon="plus" @text={{t "fleet-ops.common.new"}} @onClick={{@options.newAddress}} />
                            </div>
                        </div>

                        <ModelSelect
                            @modelName="place"
                            @selectedModel={{@options.vendor.place}}
                            @placeholder={{t "fleet-ops.component.modals.vendor-form.select-address"}}
                            @triggerClass="form-select form-input"
                            @infiniteScroll={{false}}
                            @renderInPlace={{true}}
                            @onChange={{@options.selectAddress}}
                            as |model|
                        >
                            {{model.name}}
                            -
                            {{model.street1}}
                        </ModelSelect>
                    </InputGroup>

                    <InputGroup @name={{t "fleet-ops.common.country"}} @wrapperClass="mb-0">
                        <CountrySelect
                            class="w-full form-input form-select form-datalist"
                            @value={{@options.vendor.country}}
                            @onChange={{fn (mut @options.vendor.country)}}
                            placeholder={{t "fleet-ops.common.country"}}
                        />
                    </InputGroup>
                </div>
            {{/if}}
        {{/if}}
    </div>
</Modal::Default>