{if !empty($error)}
    <h1 class="js-bread-crumbs"><a href="#/payment/" class="back" title="[`Payment`]"><i class="fas fa-arrow-circle-left gray"></i></a>&nbsp;[`Error`]</h1>
    <span class="state-error">{$error|escape}</span>
{else}
<form>
    <!-- GENERAL PAYMENT OPTION PARAMS -->
    <div class="fields-group">
        <h1 class="custom-mt-0 js-bread-crumbs h3-mobile">
            <a href="#/payment/" class="back" title="[`Payment`]"><i class="fas fa-arrow-circle-left gray"></i></a>&nbsp;{$plugin.name|escape}
            <span class="hint">id:{$plugin.plugin|escape}</span>
        </h1>

        <div class="field">
            <div class="name">
                <label for="s-payment-plugin-status">[`Enabled`]</label>
            </div>

            <div class="value">
                <input name="payment[id]" type="hidden" value="{$plugin_id|escape}">
                <input name="payment[plugin]" type="hidden" value="{$plugin.plugin|escape}">
                <label>
                    <span class="wa-checkbox">
                        <input name="payment[status]" type="checkbox"{if !empty($plugin.status)} checked="checked"{/if} id="s-payment-plugin-status" value="1">
                        <span>
                            <span class="icon">
                                <i class="fas fa-check"></i>
                            </span>
                        </span>
                    </span>
                </label>
            </div>
        </div>

        <div class="field">
            <div class="name">
                <label for="s-payment-plugin-name">[`Payment option name`]</label>
            </div>

            <div class="value">
                <input type="text" name="payment[name]" class="small bold long full-width-mobile" value="{$plugin.name|escape}" id="s-payment-plugin-name">
            </div>
        </div>

        <div class="field">
            <div class="name">
                [`Description`]
            </div>

            <div class="value">
                <textarea name="payment[description]" class="small full-width-mobile">{$plugin.description|escape}</textarea>

                <div class="hint custom-mt-4">[`HTML. Payment option description is shown to customer during the checkout.`]</div>
            </div>
        </div>

        <div class="field">
            <div class="name">
                <label for="s-payment-plugin-logo">[`Logo URL`]</label>
            </div>

            <div class="value">
                <div class="flexbox space-8">
                    <div>
                        <input name="payment[logo]" type="text" class="small long" value="{$plugin.logo|default:''|escape}" id="s-payment-plugin-logo">
                    </div>

                    {if !empty($plugin.logo)}
                    <div>
                        <img src="{$plugin.logo}" class="s-payment-shipping-logo" alt="">
                    </div>
                    {/if}
                </div>
            </div>
        </div>

    </div>

    <!-- CUSTOM PAYMENT MODULE PARAMS -->
    {if !empty($settings_html)}
    <div class="fields-group">
        {$settings_html}
    </div>
    {/if}

    {if !empty($guide_html)}
    <div class="fields-group">
        {$guide_html}
    </div>
    {/if}

    <!-- CONDITIONS OF APPLICABILITY OF PAYMENT METHODS -->
    <div class="fields-group">
        <h4>[`Checkout`]</h4>
        <div class="field">
            <div class="name">[`Offer payment to customer types`]</div>

            <div class="value">
                <label>
                    <span class="wa-radio">
                        <input type="radio" class="js-settings-payment-customer-type" name="payment[options][customer_type]" value="" {if empty($plugin.options.customer_type)} checked{/if}>
                        <span></span>
                    </span>
                    [`All`]
                </label>

                <div class="custom-mt-4">
                    <label>
                        <span class="wa-radio">
                            <input type="radio" class="js-settings-payment-customer-type" name="payment[options][customer_type]" value="person" {if (!empty($plugin.options.customer_type) && ($plugin.options.customer_type eq 'person'))} checked{/if}>
                            <span></span>
                        </span>
                        [`Individuals`]
                    </label>
                </div>
                <div class="custom-mt-4">
                    <label>
                        <span class="wa-radio">
                            <input type="radio" class="js-settings-payment-customer-type" name="payment[options][customer_type]" value="company" {if (!empty($plugin.options.customer_type) && ($plugin.options.customer_type eq 'company'))} checked{/if}>
                            <span></span>
                        </span>
                        [`Organizations`]
                    </label>
                </div>

                <div class="hint custom-mt-4">{sprintf('[`In  “%s” mode payment is offered only to selected customer types.<br>In “%s” mode this setting is ignored and payment is always offered to all customer types.`]', '[`In-cart checkout`]', '[`Multi-step checkout`]')}</div>
            </div>
        </div>

        <div class="field"{if !empty($plugin.info.type) && ($plugin.info.type neq waPayment::TYPE_MANUAL)} style="display: none;{/if}">
            <div class="name">[`Supported payment types`]</div>

            <div class="value">
                {foreach $payment_types as $payment_type=>$type_name}
                <div class="custom-mt-4">
                    <label>
                        <span class="wa-checkbox">
                            <input {if !empty($plugin.options.payment_type[$payment_type])} checked {/if}
                                class="js-payment-type-variant" data-payment-type="{$payment_type}" name="payment[options][payment_type][{$payment_type}]"
                                type="checkbox" value="{$payment_type}">
                            <span>
                                <span class="icon">
                                    <i class="fas fa-check"></i>
                                </span>
                            </span>
                        </span>
                        {$type_name|escape}
                    </label>
                </div>
                {/foreach}

                <div class="hint">
                    <p>[`In the “In-cart checkout” mode, selected payment types can be used to filter available payment options, if a list of required payment types has been provided by a shipping plugin. These payment types are also passed on to shipping plugins for additional shipping rates calculation.`]</p>
                    <p>[`In the “Multi-step checkout” mode, this setting is not used.`]</p>
                </div>
            </div>
        </div>

        <div class="field">
            <div class="name">[`Offer this payment method with selected shipping types`]</div>

            <div class="value">
                {foreach $shipping_types as $shipping_type=>$type_name}
                <div class="custom-mt-4">
                    <label>
                        <span class="wa-checkbox">
                            <input type="checkbox" name="payment[options][shipping_type][{$shipping_type}]" value="{$shipping_type}" {if !empty($plugin.options.shipping_type[$shipping_type])} checked="checked"{/if}>
                            <span>
                                <span class="icon">
                                    <i class="fas fa-check"></i>
                                </span>
                            </span>
                        </span>
                        {$type_name|escape}
                    </label>
                </div>
                {/foreach}

                <div class="hint custom-mt-4">{sprintf('[`In  “%s” mode payment is offered only with selected shipping types.<br>In “%s” mode this setting is ignored and payment is always offered with all shipping types.`]', '[`In-cart checkout`]', '[`Multi-step checkout`]')}</div>
            </div>
        </div>
        <div class="field">
            <div class="name">[`Offer this payment method with the selected shipping methods`]</div>

            <div class="value">
                {foreach $shipping as $p}
                <div class="custom-mt-4">
                    <label>
                        <span class="wa-checkbox">
                            <input type="checkbox"
                                name="payment[shipping][{$p.id}]"
                                data-customer-type="{$p.options.customer_type|default:''|escape}"
                                data-shipping-type="{$p.info.type|default:''|escape}"
                                value="1"
                                {if $p.available} checked="checked"{/if}>
                            <span>
                                <span class="icon">
                                    <i class="fas fa-check"></i>
                                </span>
                            </span>
                        </span>
                        {$p.name|escape}
                        <span class="hint">id:{$p.plugin}</span>
                    </label>

                    <span class="hint" style="display: none;">[`This payment method may be unavailable during checkout due to limitations by shipping type or customer type.`]</span>
                </div>
                {foreachelse}
                <div class="hint">[`No shipping options are defined.`]</div>
                {/foreach}
            </div>
        </div>
        <div class="field">
            <div class="name">[`Offer this payment method on selected storefronts`]</div>
            <div class="value">
                {foreach $storefronts as $s}
                    <div class="custom-mt-4">
                        {if !$s.force_enabled}
                            <input type="hidden" name="payment[storefronts][{$s.url|escape}]" value="">
                        {/if}
                        <label>
                            <span class="wa-checkbox">
                                <input type="checkbox"
                                    name="payment[storefronts][{$s.url|escape}]"
                                    value="1"
                                    {if $s.is_enabled} checked{/if}
                                    {if $s.force_enabled} disabled{/if}>
                                <span>
                                    <span class="icon">
                                        <i class="fas fa-check"></i>
                                    </span>
                                </span>
                            </span>
                            {$s.url_decoded|escape}
                            <a href="{$wa_app_url}?action=storefronts#/design/theme={$s.route.theme|default:'default'|escape}&domain={$s.domain|escape}&route={$s.route_index|escape}&action=settings" target="_blank" title="[`Storefront settings`]">
                                <i class="fas fa-cog custom-ml-4 small s-menu-link-new-window"></i>
                            </a>
                        </label>
                    </div>
                {foreachelse}
                    <div class="hint">[`No storefronts`]</div>
                {/foreach}
            </div>

        </div>
    </div>

    <div class="bottombar sticky s-settings-fixed-bottombar">
        <div class="flexbox space-12">
            <div class="wide">
                <button type="submit" class="button green" data-disable-redirect="">[`Save`]</button>
                <a href="#/payment/" class="button light-gray">[`Cancel`]</a>
            </div>

            {if isset($plugin.status) && !empty($plugin.id)}
            <div>
                <a href="#/payment/plugin/delete/{$plugin.id}/" class="button outlined small red js-action js-confirm" data-confirm-text="[`This will permanently delete this payment option. Are you sure?`]" data-cancel="[`Cancel`]" data-title="[`Delete`]">
                    <i class="fas fa-trash-alt"></i>
                    [`Delete this payment option`]
                </a>
            </div>
            {/if}
        </div>
    </div>
</form>
{/if}