{$layout}
{$template "menu"}

<b-message code="iplist-public-tip" closeable>
    这里是公用的IP名单，可以在WAF策略里直接引用。
</b-message>
<!-- <tip-message-box code="iplist-public-tip">这里是公用的IP名单，可以在WAF策略里直接引用。</tip-message-box> -->

<div class="margin"></div>
<form class="ui form" action="/servers/iplists/lists">
    <input type="hidden" name="type" :value="type"/>
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" placeholder="IP名单名称、代号..." name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">搜索</button>
            &nbsp;
            <a :href="'/servers/iplists/lists?type=' + type" v-if="keyword.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

<b-empty v-if="lists.length == 0">暂时还没有公用IP名单。</b-empty>

<table class="ui table selectable celled" v-if="lists.length > 0">
    <thead>
        <tr>
            <th class="one wide center">ID</th>
            <th class="three wide">IP名单名称</th>
            <th class="three wide">代号</th>
            <th class="two wide center">类型</th>
            <th>备注</th>
            <th class="two wide center">IP数量</th>
            <th class="two op">操作</th>
        </tr>
    </thead>
    <tr v-for="list in lists">
        <td class="center">{{list.id}}</td>
        <td>
            <a :href="'/servers/iplists/list?listId=' + list.id"><keyword :v-word="keyword">{{list.name}}</keyword></a>
            <div v-if="list.isGlobal" style="margin-top: 0.3em"><grey-label>全局</grey-label></div>
        </td>
        <td>
            <span v-if="list.code != null && list.code.length > 0"><keyword :v-word="keyword">{{list.code}}</keyword></span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center">
            <span v-if="list.type == 'black'"><span class="ui label tiny black">黑名单</span></span>
            <span v-if="list.type == 'white'"><span class="ui label tiny white">白名单</span></span>
            <span v-if="list.type == 'grey'"><span class="ui label tiny gray">灰名单</span></span>
        </td>
        <td>
            <span v-if="list.description.length > 0">{{list.description}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center">
            <a :href="'/servers/iplists/items?listId=' + list.id" v-if="list.countItems > 0">{{list.countItems}}</a>
            <span v-else class="disabled">0</span>
        </td>
        <td>
            <a :href="'/servers/iplists/list?listId=' + list.id">详情</a> &nbsp;
            <a href="" @click.prevent="deleteList(list.id)">删除</a>
        </td>
    </tr>
</table>

<div class="page" v-html="filterPageContent(page)"></div>