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

{$var "header"}
<link rel="stylesheet" href="ipadmin.css" type="text/css"/>
{$end}

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

        <warning-message v-if="!featureIsOn">{{t('ipadmin_greyList@尚未开通功能')}}</warning-message>

        {$ if .featureIsOn}
        <second-menu class="config-item">
            <menu-item @click.prevent="createIP('grey')" class="action-button">{{t('ipadmin_greyList@添加IP')}}</menu-item>
            <span class="separator">|</span>
            <div class="item"><ip-list-bind-box :v-http-firewall-policy-id="firewallPolicyId" :v-type="'grey'"></ip-list-bind-box></div>
            <span class="separator">|</span>
            <span class="item">ID: {{listId}} &nbsp; <tip-icon :content="t('ipadmin_greyList@ID提示')"></tip-icon></span>
        </second-menu>

        <warning-message v-if="!wafIsOn" v-html="t('ipadmin_greyList@waf未启用提示')"></warning-message>

        <b-empty v-if="items.length == 0">{{t('ipadmin_greyList@暂时还没有IP')}}</b-empty>
        <div class="table-box" v-if="items.length > 0">
            <ip-list-table :v-items="items" @update-item="updateItem" @delete-item="deleteItem"></ip-list-table>
        </div>

        <div class="page" v-html="filterPageContent(page)"></div>
        {$end}
    </div>
</div>