<Modal::Default @modalIsOpened={{@modalIsOpened}} @options={{@options}} @confirm={{@onConfirm}} @decline={{@onDecline}}>
    <div class="modal-body-container">
        <div class="mb-4 w-full">
            <InputGroup @name={{t "storefront.component.modals.create-getaway.getaway"}} @helpText={{t "storefront.component.modals.create-getaway.getaway-text"}}>
                <Select
                    @value={{@options.gateway.code}}
                    class="w-full"
                    @placeholder="Select gateway type"
                    @options={{@options.schemaOptions}}
                    @onSelect={{@options.selectSchema}}
                    @humanize={{true}}
                />
            </InputGroup>
        </div>

        {{#if @options.schema}}
            <InputGroup
                @name={{t "storefront.component.modals.create-getaway.getaway-name"}}
                @value={{@options.gateway.name}}
                @helpText={{t "storefront.component.modals.create-getaway.name-text"}}
            />
            <InputGroup @name={{t "storefront.component.modals.create-getaway.getaway-code"}} @helpText={{t "storefront.component.modals.create-getaway.code-text"}}>
                <KeyInput @name={{t "storefront.component.modals.create-getaway.getaway-code"}} @value={{@options.gateway.code}} @onChange={{fn (mut @options.gateway.code)}} />
            </InputGroup>
            <InputGroup
                @name={{t "storefront.component.modals.create-getaway.callback-url"}}
                @value={{@options.gateway.callback_url}}
                @helpText={{t "storefront.component.modals.create-getaway.callback-text"}}
            />
            <InputGroup
                @name={{t "storefront.component.modals.create-getaway.return-url"}}
                @value={{@options.gateway.return_url}}
                @helpText={{t "storefront.component.modals.create-getaway.return-text"}}
            />
            <div class="input-group">
                <Checkbox @value={{@options.gateway.sandbox}} @label={{t "storefront.component.modals.create-getaway.sandbox-getaway"}} @onToggle={{fn (mut @options.gateway.sandbox)}} />
            </div>
            <div class="p-2 rounded-md mb-2 mt-4 border border-gray-200 dark:border-gray-800">
                <h4 class="mb-2 font-semibold text-xs tracking-wide uppercase text-gray-700 dark:text-gray-400">Config</h4>
                {{#each-in @options.schema as |key value|}}
                    {{#if (is-bool-value value)}}
                        <div class="input-group">
                            <Checkbox @value={{get @options.gateway.config key}} @label={{smart-humanize key}} @onToggle={{fn @options.setConfigKey key}} />
                        </div>
                    {{else}}
                        <InputGroup @name={{humanize key}}>
                            <Input class="form-input w-full" placeholder={{smart-humanize key}} @value={{get @options.gateway.config key}} {{on "blur" (fn @options.setConfigKey key)}} />
                        </InputGroup>
                    {{/if}}
                {{/each-in}}
            </div>
        {{/if}}
    </div>
</Modal::Default>