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

<div class="left-right-box-container">

	<div class="right-box">
			{$template "menu"}

		<second-menu>
			<a href="" class="item" @click.prevent="createGroup(type)">{{t('waf_groups@添加分组')}}</a>
		</second-menu>

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

		<b-empty v-if="groups.length == 0">{{t('waf_groups@暂时还没有规则分组')}}</b-empty>

		<div v-if="groups.length > 0">
			<b-sortable-table 
				:columns="groupsColumns" 
				:data-source="groups" 
				:row-key="'id'" 
				:scroll="{ x: 800 }"
				size="middle"
				:on-sort="sortGroups"
				>
				
				<!-- 拖动把手 -->
				<template slot="handleSlot" slot-scope="{ text, record }">
					<i class="icon handle bars" :title="t('waf_groups@拖动排序')"></i>
				</template>

				<template slot="nameSlot" slot-scope="{ text, record }">
					<a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">
						<span :class="{disabled:!record.isOn}">{{record.name}}</span>
					</a>
					<p class="comment" v-if="record.description.length > 0" style="padding-bottom:0">{{record.description}}</p>
					<p style="margin-top: 0.5em">
						<span v-if="record.isOn" class="ui label tiny basic green">{{t('waf_groups@启用')}}</span>
						<span v-if="!record.isOn" class="ui label tiny basic red">{{t('waf_groups@停用')}}</span>
						<span v-if="record.code.length > 0" class="ui label basic tiny">{{t('waf_groups@预置')}}</span>
						<span v-if="record.code.length == 0" class="ui label basic tiny">{{t('waf_groups@自定义')}}</span>
					</p>
				</template>

				<template slot="countSetsSlot" slot-scope="{ text, record }">
					<a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">{{record.countSets}}</a>
				</template>

				<template slot="actionSlot" slot-scope="{ text, record }">
					<a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + record.id">{{t('waf_groups@详情')}}</a> &nbsp;
					<a href="" v-if="!record.isOn" @click.prevent="enableGroup(record.id)">{{t('waf_groups@启用')}}</a>
					<a href="" v-if="record.isOn" @click.prevent="disableGroup(record.id)">{{t('waf_groups@停用')}}</a> &nbsp;
					<a href="" @click.prevent="deleteGroup(record.id)" v-if="record.canDelete">{{t('waf_groups@删除')}}</a>
				</template>
			</b-sortable-table>
		</div>

		<p class="comment" v-if="groups.length > 0" v-html="t('waf_groups@排序提示')"></p>

	</div>
</div>