<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 @model as |gateway|}}
                <ContentPanel @title={{gateway.name}} @open={{true}} @pad={{false}} @wrapperClass="bordered-classic">
                    <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={{smart-humanize key}} @disabled={{true}} />
                                </div>
                            {{else}}
                                <InputGroup @name={{smart-humanize key}}>
                                    <Input
                                        @type={{if (can "storefront update gateway") "text" "password"}}
                                        class="form-input w-full"
                                        placeholder={{humanize key}}
                                        @value={{value}}
                                        disabled
                                    />
                                </InputGroup>
                            {{/if}}
                        {{/each-in}}
                    </div>
                    <div class="flex flex-row items-center space-x-2">
                        {{#if (can "storefront update gateway")}}
                            <Button @size="sm" @type="primary" @icon="pencil" @text="Edit Gateway" @onClick={{fn this.editGateway gateway}} />
                        {{/if}}
                        {{#if (can "storefront delete gateway")}}
                            <Button @size="sm" @type="danger" @icon="trash" @text={{t "storefront.settings.gateways.delete-payment-gateway"}} @onClick={{fn this.deleteGateway gateway}} />
                        {{/if}}
                    </div>
                </ContentPanel>
            {{/each}}
        </div>
    </form>
</SettingsContainer>