{$layout "layout_popup"}

<!-- <h3>绑定公用IP名单</h3> -->

<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="two wide center">ID</th>
        <th>名称</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>{{list.name}}</td>
        <td class="center">
            <span v-if="list.type == 'black'">黑名单</span>
            <span v-if="list.type == 'white'">白名单</span>
            <span v-if="list.type == 'grey'">灰名单</span>
        </td>
        <td>{{list.description}}</td>
        <td class="center">
            <span v-if="list.countItems > 0">{{list.countItems}}</span>
            <span v-else class="disabled">0</span>
        </td>
        <td>
            <a href="" @click.prevent="bind(list)" v-if="!list.isSelected">绑定</a>
            <a href="" style="color: grey" @click.prevent="unbind(list)" v-if="list.isSelected">已绑定</a>
        </td>
    </tr>
</table>

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