{$layout "layout_popup"}

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

<b-empty v-if="lists.length == 0">{{t('iplists@暂时还没有可用的公用IP名单')}}。</b-empty>

<table class="ui table selectable celled" v-if="lists.length > 0">
    <thead>
    <tr>
        <th class="two wide center">ID</th>
        <th>{{t('iplists@名称')}}</th>
        <th class="two wide center">{{t('iplists@类型')}}</th>
        <th>{{t('iplists@备注')}}</th>
        <th class="two wide center">{{t('iplists@IP数量')}}</th>
        <th class="two op">{{t('iplists@操作')}}</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'">{{t('iplists@黑名单')}}</span>
            <span v-if="list.type == 'white'">{{t('iplists@白名单')}}</span>
            <span v-if="list.type == 'grey'">{{t('iplists@灰名单')}}</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">{{t('iplists@绑定')}}</a>
            <a href="" style="color: grey" @click.prevent="unbind(list)" v-if="list.isSelected">{{t('iplists@已绑定')}}</a>
        </td>
    </tr>
</table>

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