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

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

    {$ if .featureIsOn}
    <div class="http-config-container">
        <form method="post" class="ui form http-config-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="config-section">
                <div class="section-title">省份访问控制</div>
                <div class="config-item">
                    <div class="item-label">仅允许的省份</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">仅封禁的省份</div>
                    <div class="item-content">
                        <p class="comment" v-if="allowedProvinces.length > 0">由于你已设置"仅允许的省份"，所以不需要再设置封禁省份。</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" v-show="moreOptionsVisible">
                <div class="section-title">高级选项</div>
                <div class="config-item">
                    <div class="item-label">例外URL</div>
                    <div class="item-content">
                        <url-patterns-box v-model="exceptURLPatterns"></url-patterns-box>
                        <p class="comment">对这些URL将不做任何限制。</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">限制URL</div>
                    <div class="item-content">
                        <url-patterns-box v-model="onlyURLPatterns"></url-patterns-box>
                        <p class="comment">只对这些URL做限制。</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">提示内容</div>
                    <div class="item-content">
                        <textarea v-model="provinceHTML" name="provinceHTML" rows="3"></textarea>
                        <p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容。</p>
                    </div>
                </div>
            </div>

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

            <submit-btn></submit-btn>
        </form>
    </div>
    {$else}
    <server-feature-required></server-feature-required>
    {$end}
</div>