<div class="panel panel--collapse" data-footer-supported-payment-gateways>
    <div class="collapse-toggle">
        <h6 class="top__title">
            {$lang.settings.section.layout.footer_supported_payment_gateways.title}
            {if isset($tooltips.settings.layout.footer_supported_payment_gateways.footer_supported_payment_gateways.title)}
                {if isset($tooltips.settings.layout.footer_supported_payment_gateways.footer_supported_payment_gateways.url) && $tooltips.settings.layout.footer_supported_payment_gateways.footer_supported_payment_gateways.url != ""}
                    {assign var="popoverFooter" value="<a class='btn btn--secondary btn--xs' href='{$tooltips.settings.layout.footer_supported_payment_gateways.footer_supported_payment_gateways.url}' target='_blank'>Learn More</a>"}
                {else}
                    {assign var="popoverFooter" value=false}
                {/if}
                {include 
                    file="adminarea/includes/helpers/popover.tpl" 
                    popoverClasses="notification__popover"
                    popoverBody="{$tooltips.settings.layout.footer_supported_payment_gateways.footer_supported_payment_gateways.title}"
                    popoverFooter="{$popoverFooter}"
                }
            {/if}
        </h6>
        <label>
            <div class="switch" data-toggle="lu-collapse" data-target="#footer-supported-payment-gateways-config" aria-expanded="true">
                <input type="hidden" name="settings[show_footer_supported_payment_gateways]" value="hidden"/>
                <input class="switch__checkbox"
                        name="settings[show_footer_supported_payment_gateways]" value="displayed"
                        type="checkbox" {if isset($settings['show_footer_supported_payment_gateways']) && $settings['show_footer_supported_payment_gateways'] == "displayed"} checked="checked" {/if}>
                <span class="switch__container">
                    <span class="switch__handle"></span>
                </span>
            </div>
        </label>
    </div>
    <div class="collapse {if isset($settings['show_footer_supported_payment_gateways']) && $settings['show_footer_supported_payment_gateways'] == "displayed"} show {/if}" id="footer-supported-payment-gateways-config">
        <div class="row p-h-3x">
            <div class="col-md-6">
                <div class="form-group m-b-0x p-v-3x p-h-0x">
                    <label class="form-label text-default">
                        {$lang.settings.section.layout.footer_supported_payment_gateways.label_section_location}
                        {if isset($tooltips.settings.layout.footer_supported_payment_gateways.section_location.title)}
                            {if isset($tooltips.settings.layout.footer_supported_payment_gateways.section_location.url) && $tooltips.settings.layout.footer_supported_payment_gateways.section_location.url != ""}
                                {assign var="popoverFooter" value="<a class='btn btn--secondary btn--xs' href='{$tooltips.settings.layout.footer_supported_payment_gateways.section_location.url}' target='_blank'>Learn More</a>"}
                            {else}
                                {assign var="popoverFooter" value=false}
                            {/if}
                            {include 
                                file="adminarea/includes/helpers/popover.tpl" 
                                popoverClasses="notification__popover"
                                popoverBody="{$tooltips.settings.layout.footer_supported_payment_gateways.section_location.title}"
                                popoverFooter="{$popoverFooter}"
                            }
                        {/if}
                    </label>
                    <select class="form-control selectized opacity-1" name="settings[footer_supported_payment_gateways_location]" tabindex="-1">
                        <option value="default" {if isset($settings['footer_supported_payment_gateways_location']) && $settings['footer_supported_payment_gateways_location'] == 'default'} selected {/if}>{$lang.settings.section.layout.footer_supported_payment_gateways.location.default}</option>
                        <option value="bottom" {if isset($settings['footer_supported_payment_gateways_location']) && $settings['footer_supported_payment_gateways_location'] == 'bottom'} selected {/if}>{$lang.settings.section.layout.footer_supported_payment_gateways.location.bottom}</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group m-b-0x p-v-3x p-h-0x">
                    <label class="form-label text-default">
                        {$lang.settings.section.layout.footer_supported_payment_gateways.label_icon_size}
                        {if isset($tooltips.settings.layout.footer_supported_payment_gateways.icon_size.title)}
                            {if isset($tooltips.settings.layout.footer_supported_payment_gateways.icon_size.url) && $tooltips.settings.layout.footer_supported_payment_gateways.icon_size.url != ""}
                                {assign var="popoverFooter" value="<a class='btn btn--secondary btn--xs' href='{$tooltips.settings.layout.footer_supported_payment_gateways.icon_size.url}' target='_blank'>Learn More</a>"}
                            {else}
                                {assign var="popoverFooter" value=false}
                            {/if}
                            {include 
                                file="adminarea/includes/helpers/popover.tpl" 
                                popoverClasses="notification__popover"
                                popoverBody="{$tooltips.settings.layout.footer_supported_payment_gateways.icon_size.title}"
                                popoverFooter="{$popoverFooter}"
                            }
                        {/if}
                    </label>
                    <select class="form-control selectized opacity-1" name="settings[footer_supported_payment_gateways_icon_size]" tabindex="-1">
                        <option value="default" {if isset($settings['footer_supported_payment_gateways_icon_size']) && $settings['footer_supported_payment_gateways_icon_size'] == 'default'} selected {/if}>{$lang.settings.section.layout.footer_supported_payment_gateways.icon_size.default}</option>
                        <option value="large" {if isset($settings['footer_supported_payment_gateways_icon_size']) && $settings['footer_supported_payment_gateways_icon_size'] == 'large'} selected {/if}>{$lang.settings.section.layout.footer_supported_payment_gateways.icon_size.large}</option>
                    </select>
                </div>
            </div>
        </div>
        
        <div class="form-group m-b-0x p-l-3x p-r-3x p-b-3x p-t-0x" >
            <label class="form-label">
                {$lang.settings.section.layout.footer_supported_payment_gateways.label_header}
                {if isset($tooltips.settings.layout.footer_supported_payment_gateways.header.title)}
                    {if isset($tooltips.settings.layout.footer_supported_payment_gateways.header.url) && $tooltips.settings.layout.footer_supported_payment_gateways.header.url != ""}
                        {assign var="popoverFooter" value="<a class='btn btn--secondary btn--xs' href='{$tooltips.settings.layout.footer_supported_payment_gateways.header.url}' target='_blank'>Learn More</a>"}
                    {else}
                        {assign var="popoverFooter" value=false}
                    {/if}
                    {include 
                        file="adminarea/includes/helpers/popover.tpl" 
                        popoverClasses="notification__popover"
                        popoverBody="{$tooltips.settings.layout.footer_supported_payment_gateways.header.title}"
                        popoverFooter="{$popoverFooter}"
                    }
                {/if}
                <a href="#footerSupportedPaymentGatewaysModal" data-toggle="lu-modal" class="form-label__translate">
                    <span>{$lang.general.translate}</span>
                </a>
            </label>
            <input 
                id="footer_supported_payment_gateways_message_input" 
                class="form-control" 
                type="text" 
                data-footer-supported-payment-gateways-input
                data-footer-supported-payment-gateways-system-language="{if isset($systemLanguage)}{$systemLanguage}{/if}"
                data-form-counter-input
                value="{if isset($footer_supported_payment_gateway_settings) && is_array($footer_supported_payment_gateway_settings) && isset($systemLanguage) && isset($footer_supported_payment_gateway_settings[$systemLanguage])}{$footer_supported_payment_gateway_settings[$systemLanguage]}{/if}"
            >
            <input 
                id="footer_supported_payment_gateways_message_json" 
                type="hidden" 
                name="settings[footer_supported_payment_gateways_message]" 
                value='{if isset($footer_supported_payment_gateway_settings)}{json_encode($footer_supported_payment_gateway_settings)|escape:"html"}{else}[]{/if}'
                data-footer-supported-payment-gateways-json
            >
        </div>
        <div class="row p-l-3x p-r-3x p-b-3x p-t-0x" data-footer-supported-payment-gateways-icons-container>
            {if isset($footer_supported_payment_gateways_icons) && is_array($footer_supported_payment_gateways_icons) && !empty($footer_supported_payment_gateways_icons)}
                {foreach $footer_supported_payment_gateways_icons as $footerGatewayIcon}
                    <div class="col-lg-3 col-md-4 col-sm-6" data-footer-supported-payment-gateways-icon-item>
                        <div class="widget widget--media-manager media-overlay">
                            <a 
                                class="widget__media" 
                                href="#footerSupportedPaymentGatewayIcons" 
                                data-footer-supported-payment-gateways-icon-edit 
                                data-toggle="lu-modal" 
                                data-index="{$footerGatewayIcon.index}" 
                                data-icon-name="{$footerGatewayIcon.iconName}" 
                                data-icon-type="{$footerGatewayIcon.iconType}"
                            >          
                                <div class="widget__img">
                                    {if $footerGatewayIcon.iconType == 'gateways'}
                                        {assign var="ilustrationPath" value="./../../../../../../../templates/{$themeName}/assets/svg-gateways"}
                                        {include file="`$ilustrationPath`/`$footerGatewayIcon.iconName`"}
                                    {else}
                                        {assign var="imgPath" value="./../../../../../../../templates/{$themeName}/assets/img/page-manager"}
                                        <img src="{$imgPath}/{$footerGatewayIcon.iconName}"/>
                                    {/if}
                                </div>
                                <div class="widget__overlay">
                                    <div class="widget__content">
                                        <div class="msg">
                                            <div class="msg__icon i-circled  bg-primary">
                                                <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M1.00003 9.00005H2.50003C2.56561 9.00085 2.63063 8.98792 2.69091 8.96209C2.75118 8.93625 2.80539 8.89809 2.85003 8.85005L9.35004 2.35005C9.39787 2.30516 9.43599 2.25095 9.46205 2.19075C9.48811 2.13055 9.50155 2.06565 9.50155 2.00005C9.50155 1.93446 9.48811 1.86956 9.46205 1.80936C9.43599 1.74916 9.39787 1.69494 9.35004 1.65005L7.85003 0.150054C7.80514 0.102223 7.75093 0.0641008 7.69073 0.0380405C7.63053 0.0119803 7.56563 -0.00146484 7.50003 -0.00146484C7.43444 -0.00146484 7.36954 0.0119803 7.30934 0.0380405C7.24914 0.0641008 7.19492 0.102223 7.15003 0.150054L0.650035 6.65005C0.601998 6.6947 0.563835 6.7489 0.538002 6.80918C0.512168 6.86946 0.499236 6.93448 0.500035 7.00005V8.50005C0.500035 8.63266 0.552713 8.75984 0.646482 8.85361C0.74025 8.94738 0.867427 9.00005 1.00003 9.00005Z" fill="white"/>
                                                    <path d="M12 10.0001H1C0.723858 10.0001 0.5 10.2239 0.5 10.5001V11.5001C0.5 11.7762 0.723858 12.0001 1 12.0001H12C12.2761 12.0001 12.5 11.7762 12.5 11.5001V10.5001C12.5 10.2239 12.2761 10.0001 12 10.0001Z" fill="white"/>
                                                </svg>  
                                            </div>
                                            <div class="msg__body">
                                                <div class="p-sm">Change Icon</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="widget__footer">
                                <input 
                                    type="text" 
                                    data-footer-supported-payment-gateways-icon-name 
                                    data-index="{$footerGatewayIcon.index}" 
                                    class="form-control form-control--xs" 
                                    value="{$footerGatewayIcon.name}"
                                >
                                <a 
                                    class="btn btn--icon btn--link btn--xs" 
                                    href="#footerSupportedPaymentGatewayIconsNameTranslate" 
                                    data-toggle="lu-modal" 
                                    data-backdrop="static" 
                                    data-index="{$footerGatewayIcon.index}" 
                                    data-footer-supported-payment-gateways-icon-translate
                                >
                                    <i data-toggle="lu-tooltip" data-title="Translate" class="btn__icon lm lm-globe-alt"></i>
                                </a>
                                <a 
                                    class="btn btn--icon btn--link btn--xs delete-image" 
                                    href="#footerSupportedPaymentGatewayIconsRemove" 
                                    data-toggle="lu-modal" 
                                    data-backdrop="static" 
                                    data-index="{$footerGatewayIcon.index}" 
                                    data-footer-supported-payment-gateways-icon-remove
                                >
                                    <i data-toggle="lu-tooltip" data-title="Delete" class="btn__icon lm lm-trash"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                {/foreach}
            {/if}
            <div class="col-lg-3 col-md-4 col-sm-6">
                <a href="#footerSupportedPaymentGatewayIcons" data-toggle="lu-modal" class="widget widget__media-add" data-footer-supported-payment-gateways-icon-new>
                    <div class="widget__main-icon">
                        <i class="lm lm-upload"></i>
                    </div>
                    <div class="widget__desc">Upload Image</div>
                    <div class="widget__extensions text-center">Allowed extensions .PNG, .JPG, <br>.SVG, .GIF. Max size 256M.</div>
                </a>
            </div>
        </div>
        <input 
            id="footer_supported_payment_gateways_icon_json" 
            type="hidden" 
            name="settings[footer_supported_payment_gateways_icons]" 
            value='{if isset($footer_supported_payment_gateways_icons)}{json_encode($footer_supported_payment_gateways_icons)|escape:"html"}{else}[]{/if}'
            data-footer-supported-payment-gateways-icons-json
        >
        
    </div>
</div>