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

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

    <warning-message v-if="!featureIsOn">尚未为当前用户开通此功能。</warning-message>

    {$ if .featureIsOn}
    <warning-message v-if="!wafIsOn">当前WAF未启用，设置将在<a :href="'/servers/server/settings/waf?serverId=' + serverId">[启用Web防火墙]</a>后生效。</warning-message>

    <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"/>
            
            <div class="config-section">
                <div class="section-title">
                    <i class="icon shield"></i>
                    IP检查
                </div>
                
                <div class="config-item">
                    <div class="item-label">
                        <i class="icon desktop"></i>
                        IP *
                    </div>
                    <div class="item-content">
                        <input type="text" name="ip" class="text" maxlength="100" ref="focus" placeholder="x.x.x.x" v-model="ip"/>
                        <p class="comment">要检查的IP</p>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">
                        <i class="icon search"></i>
                        检查结果
                    </div>
                    <div class="item-content">
                        <div v-if="result.isDone">
                            <div v-if="!result.isOk">
                                <span class="red">{{result.error}}</span>
                            </div>
                            <div v-if="result.isFound">
                                <div v-if="result.item != null">
                                    <div v-if="result.isAllowed">
                                        <span class="green" v-if="result.item.listType == 'white'">
                                            <i class="icon check circle"></i>
                                            在白名单中 <ip-item-text :v-item="result.item"></ip-item-text>
                                            <a href="" @click.prevent="updateItem(result.list.id, result.item.id)" title="查看和修改" class="action-link">
                                                <i class="icon pencil"></i>
                                            </a>
                                        </span>
                                        <span class="grey" v-if="result.item.listType == 'grey'">
                                            <i class="icon circle"></i>
                                            在灰名单中 <ip-item-text :v-item="result.item"></ip-item-text>
                                            <a href="" @click.prevent="updateItem(result.list.id, result.item.id)" title="查看和修改" class="action-link">
                                                <i class="icon pencil"></i>
                                            </a>
                                        </span>
                                    </div>
                                    <div v-else>
                                        <span class="red">
                                            <i class="icon ban"></i>
                                            在黑名单中 <ip-item-text :v-item="result.item"></ip-item-text>
                                            <a href="" @click.prevent="updateItem(result.list.id, result.item.id)" title="查看和修改" class="action-link">
                                                <i class="icon pencil"></i>
                                            </a>
                                        </span>
                                    </div>
                                </div>
                                <div v-if="result.province != null">
                                    <span class="red">
                                        <i class="icon map marker"></i>
                                        在省份封禁中 "{{result.province.name}}"
                                    </span>
                                </div>
                                <div v-if="result.country != null && result.province == null">
                                    <span class="red">
                                        <i class="icon globe"></i>
                                        在国家/地区封禁中 "{{result.country.name}}"
                                    </span>
                                </div>
                            </div>
                            <div v-if="!result.isFound">
                                <i class="icon info circle"></i>
                                没有找到和{{ip}}匹配的配置。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <submit-btn>检查IP状态</submit-btn>
        </form>
    </div>
    {$end}
</div>