{$layout}

	{$template "../waf_menu"}
	{$template "menu"}

	<form method="post" class="ui form" 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="left-right-box-container">
            <div class="right-box">
                <!-- 省份设置 -->
                <div class="config-section">
                    <div class="section-title">
                        <i class="icon map"></i>
                        {{t('provinces@省份设置')}}
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('provinces@仅允许的省份')}}</div>
                        <div class="item-content">
                            <http-firewall-province-selector :v-provinces="allowedProvinces" :v-type="'allow'" @change="changeAllowedProvinces"></http-firewall-province-selector>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('provinces@仅封禁的省份')}}</div>
                        <div class="item-content">
                            <p class="comment" v-if="allowedProvinces.length > 0">{{t('provinces@已设置允许省份提示')}}</p>
                            <http-firewall-province-selector :v-provinces="deniedProvinces" :v-type="'deny'" v-show="allowedProvinces.length == 0"></http-firewall-province-selector>
                        </div>
                    </div>
                </div>

                <!-- 更多选项 -->
                <div class="config-section">
                    <div class="section-title">
                        <i class="icon cog"></i>
                        {{t('provinces@更多选项')}}
                    </div>

                    <div class="config-item">
                        <div class="item-label">
                            {{t('provinces@例外URL')}}
                            <tip-icon :content="t('provinces@例外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('provinces@限制URL')}}
                            <tip-icon :content="t('provinces@限制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('provinces@提示内容')}}</div>
                        <div class="item-content">
                            <textarea v-model="provinceHTML" name="provinceHTML" rows="3"></textarea>
                            <p class="comment">{{t('provinces@提示内容说明')}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="margin"></div>
        <submit-btn></submit-btn>
	</form>