{$layout}
{$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("servers_groups_group_settings_waf_groups@添加分组")}}</a>
		</second-menu>

		<warning-message v-if="!wafIsOn">{{t("servers_groups_group_settings_waf_groups@当前WAF未启用设置将在")}}<a :href="'/servers/server/settings/waf?serverId=' + serverId">{{t("servers_groups_group_settings_waf_groups@启用Web防火墙")}}</a>{{t("servers_groups_group_settings_waf_groups@后生效")}}</warning-message>

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

		<table class="ui table selectable celled" v-if="groups.length > 0" id="sortable-table">
			<thead>
			<tr>
				<th style="width:3em"></th>
				<th>{{t("servers_groups_group_settings_waf_groups@规则分组")}}</th>
				<th class="center">{{t("servers_groups_group_settings_waf_groups@规则集")}}</th>
				<th class="three op">{{t("servers_groups_group_settings_waf_groups@操作")}}</th>
			</tr>
			</thead>
			<tbody  v-for="group in groups" :data-group-id="group.id">
				<tr>
					<td style="text-align: center;"><i class="icon bars handle grey" :title="t('servers_groups_group_settings_waf_groups@拖动排序')"></i> </td>
									<td><a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + group.id"><span :class="{disabled:!group.isOn}">{{group.name}}</span></a>
						<p class="comment" v-if="group.description.length > 0" style="padding-bottom:0">{{group.description}}</p>
						<p style="margin-top: 0.5em">
							<span v-if="group.isOn" class="ui label tiny basic green">{{t("servers_groups_group_settings_waf_groups@启用")}}</span>
							<span v-if="!group.isOn" class="ui label tiny basic red">{{t("servers_groups_group_settings_waf_groups@停用")}}</span>
							<span v-if="group.code.length > 0" class="ui label basic tiny">{{t("servers_groups_group_settings_waf_groups@预置")}}</span>
							<span v-if="group.code.length == 0" class="ui label basic tiny">{{t("servers_groups_group_settings_waf_groups@自定义")}}</span>
						</p>
					</td>
					<td class="center">
						<a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + group.id">{{group.countSets}}</a>
					</td>
					<td>
						<a :href="'/servers/server/settings/waf/group?serverId=' + serverId + '&firewallPolicyId=' + firewallPolicyId + '&type=' + type + '&groupId=' + group.id">{{t("servers_groups_group_settings_waf_groups@详情")}}</a> &nbsp;
						<a href="" v-if="!group.isOn" @click.prevent="enableGroup(group.id)">{{t("servers_groups_group_settings_waf_groups@启用")}}</a><a href="" v-if="group.isOn" @click.prevent="disableGroup(group.id)">{{t("servers_groups_group_settings_waf_groups@停用")}}</a> &nbsp;
						<a href="" @click.prevent="deleteGroup(group.id)" v-if="group.canDelete">{{t("servers_groups_group_settings_waf_groups@删除")}}</a>
					</td>
				</tr>
			</tbody>
		</table>

		<p class="comment" v-if="groups.length > 0">{{t("servers_groups_group_settings_waf_groups@所有规则匹配顺序为从上到下可以拖动左侧的排序")}}<i class="icon bars"></i>{{t("servers_groups_group_settings_waf_groups@排序")}}</p>

	</div>
</div>