<SettingsContainer>
    <form>
        <div class="space-y-6">
            <div class="flex justify-between">
                <div>
                    <h1 class="text-lg leading-6 font-bold text-gray-900 dark:text-gray-100">
                        {{t "storefront.settings.gateways.geteway-settings"}}
                    </h1>
                    <p class="mt-1 text-sm text-gray-500">
                        {{t "storefront.settings.gateways.add-or-manage-your-paymeny-gateway-settings-here"}}
                    </p>
                </div>
                <div>
                    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "storefront.settings.gateways.create-new-gateway"}} @onClick={{this.createGateway}} />
                </div>
            </div>

            {{#each this.model as |gateway|}}
                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{true}}>
                    <InputGroup @name={{t "storefront.settings.gateways.gateway-name"}} @value={{gateway.name}} @helpText={{t "storefront.settings.gateways.helpText"}} />
                    <InputGroup @name={{t "storefront.settings.gateways.gateway-code"}} @value={{gateway.code}} @disabled={{true}} @helpText={{t "storefront.settings.gateways.gateway-code-help-text"}} />
                    <InputGroup @name={{t "storefront.settings.gateways.callback-url"}} @value={{gateway.callback_url}} @helpText={{t "storefront.settings.gateways.callback-url-help-text"}} />
                    <InputGroup @name={{t "storefront.settings.gateways.return-url"}} @value={{gateway.return_url}} @helpText={{t "storefront.settings.gateways.return-url-help-text"}} />
                    <div class="input-group">
                        <Checkbox @value={{gateway.sandbox}} @label={{t "storefront.settings.gateways.this-is-a-sandbox-gateway"}} @onToggle={{fn (mut gateway.sandbox)}} />
                    </div>
                    <div>
                        <h4 class="mb-2 font-semibold text-sm dark:text-white">{{t "storefront.common.config"}}</h4>
                        {{#each-in gateway.config as |key value|}}
                            {{#if (is-bool-value value)}}
                                <div class="input-group">
                                    <Checkbox @value={{value}} @label={{humanize key}} />
                                </div>
                            {{else}}
                                <InputGroup @name={{humanize key}}>
                                    <Input class="form-input w-full" placeholder={{humanize key}} @value={{value}} />
                                </InputGroup>
                            {{/if}}
                        {{/each-in}}
                    </div>
                    <div>
                        <Button @size="sm" @type="danger" @icon="trash" @text={{t "storefront.settings.gateways.delete-payment-gateway"}} @onClick={{fn this.deleteGateway gateway}} />
                    </div>
                </ContentPanel>
            {{/each}}
        </div>
    </form>
</SettingsContainer>