{$layout}
{$template "../../settings_menu"}
{$template "/left_menu_with_menu"}

{$var "header"}
<link rel="stylesheet" href="./ipadmin.css" type="text/css"/>
{$end}

<div class="left-right-box-container">
    <div class="right-box">
        {$template "../menu"}

        <warning-message v-if="!featureIsOn">{{t('ipadmin_countries@尚未开通功能')}}</warning-message>

        {$ if .featureIsOn}
        <warning-message v-if="!wafIsOn" v-html="t('ipadmin_countries@waf未启用提示')"></warning-message>
        <warning-message v-if="clusterFirewallPolicy != null && clusterFirewallPolicy.mode != 'defend'" v-html="t('ipadmin_countries@集群模式提示', [(clusterFirewallPolicy.modeInfo != null ? clusterFirewallPolicy.modeInfo.name : t('ipadmin_countries@非防御模式'))])">
        </warning-message>

        <form method="post" class="ui form base-form config-section" data-tea-action="$" data-tea-success="success">
            <input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
            <input type="hidden" name="exceptURLPatternsJSON" :value="JSON.stringify(exceptURLPatterns)"/>
            <input type="hidden" name="onlyURLPatternsJSON" :value="JSON.stringify(onlyURLPatterns)"/>
            
            <div class="section-title">
                <i class="pi pi-server"></i>
                {{t('ipadmin_countries@国家地区设置')}}
            </div>
            <div class="config-item">
                <div class="item-label">{{t('ipadmin_countries@仅允许的区域')}}</div>
                <div class="item-content">
                    <http-firewall-region-selector :v-countries="allowedCountries" :v-type="'allow'" @change="changeAllowedCountries"></http-firewall-region-selector>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('ipadmin_countries@仅封禁的区域')}}</div>
                <div class="item-content">
                    <p class="comment" v-if="allowedCountries.length > 0">{{t('ipadmin_countries@已设置允许区域提示')}}</p>
                    <http-firewall-region-selector :v-countries="deniedCountries" :v-type="'deny'" v-show="allowedCountries.length == 0"></http-firewall-region-selector>
                </div>
            </div>

            <div class="config-item">
                <more-options-indicator class="more-options-toggle"></more-options-indicator>
            </div>

            <div v-show="moreOptionsVisible">
                <div class="config-item">
                    <div class="item-label">{{t('ipadmin_countries@例外URL')}} &nbsp;<tip-icon :content="t('ipadmin_countries@例外URL提示')"></tip-icon></div>
                    <div class="item-content">
                        <url-patterns-box v-model="exceptURLPatterns"></url-patterns-box>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('ipadmin_countries@限制URL')}} &nbsp;<tip-icon :content="t('ipadmin_countries@限制URL提示')"></tip-icon></div>
                    <div class="item-content">
                        <url-patterns-box v-model="onlyURLPatterns"></url-patterns-box>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('ipadmin_countries@提示内容')}}</div>
                    <div class="item-content">
                        <textarea v-model="countryHTML" name="countryHTML" rows="3"></textarea>
                        <p class="comment">{{t('ipadmin_countries@提示内容提示')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('ipadmin_countries@允许搜索引擎')}}</div>
                    <div class="item-content">
                        <checkbox name="allowSearchEngine" v-model="allowSearchEngine"></checkbox>
                        <p class="comment">{{t('ipadmin_countries@允许搜索引擎提示')}}</p>
                    </div>
                </div>
            </div>
            <div style="padding: 1rem;">
                <submit-btn></submit-btn>
            </div>
        </form>
        {$end}
    </div>
</div>