{$layout}
{$template "list_menu"}

<second-menu>
    <menu-item @click.prevent="createIP">
        <i class="pi pi-pen-to-square"></i>
        {{t('iplists@创建IP')}}
    </menu-item>
</second-menu>

<form class="ui form" action="/servers/iplists/items">
    <input type="hidden" name="listId" :value="list.id"/>
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" size="20" placeholder="x.x.x.x" name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field">
            <b-select
                name="eventLevel"
                v-model="eventLevel"
                :options="[
                    {label: t('iplists@级别'), value: ''},
                    ...eventLevels.map(level => ({
                        label: level.name,
                        value: level.code,
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="eventLevel" v-model="eventLevel">
                <option value="">[级别]</option>
                <option v-for="level in eventLevels" :value="level.code">{{level.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('iplists@搜索')}}</button>
            &nbsp;
            <a :href="'/servers/iplists/items?listId=' + list.id" v-if="keyword.length > 0 || eventLevel.length > 0">{{t('iplists@清除条件')}}</a>
        </div>
    </div>
    <div class="margin"></div>
</form>

<b-empty v-if="items.length == 0">{{t('iplists@暂时还没有IP')}}</b-empty>

<ip-list-table v-if="items.length > 0" :v-items="items" @update-item="updateItem" @delete-item="deleteItem" :v-keyword="keyword"></ip-list-table>

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