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

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

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

		<b-settings-header
			@action="updateGroup(group.id)"
			:action-text="t('servers_groups_group_settings_waf_group@修改')"
		>
			{{t("servers_groups_group_settings_waf_group@分组")}} 
		</b-settings-header>
		<table class="ui table selectable definition">
			<tr>
				<td class="title">{{t("servers_groups_group_settings_waf_group@名称")}}</td>
				<td>{{group.name}}</td>
			</tr>
			<tr>
				<td>{{t("servers_groups_group_settings_waf_group@描述")}}</td>
				<td>
					<b-empty v-if="group.description.length == 0">{{t("servers_groups_group_settings_waf_group@暂时还没有描述")}}</b-empty>
					<span v-if="group.description.length > 0">{{group.description}}</span>
				</td>
			</tr>
			<tr>
				<td>{{t("servers_groups_group_settings_waf_group@启用状态")}}</td>
				<td>
					<label-on :v-is-on="group.isOn"></label-on>
				</td>
			</tr>
		</table>

		<b-settings-header
			style="padding-top:0.8em"
			@action="createSet(group.id)"
			:action-text="t('servers_groups_group_settings_waf_group@添加规则集')"
		>
			{{t("servers_groups_group_settings_waf_group@规则集")}} 
		</b-settings-header>
		<b-empty v-if="sets == null || sets.length == 0">{{t("servers_groups_group_settings_waf_group@暂时还没有规则")}}</b-empty>
		<table class="ui table selectable celled" id="sortable-table" v-if="sets != null && sets.length > 0">
			<thead>
				<tr>
					<th style="width:3em"></th>
					<th nowrap="">{{t("servers_groups_group_settings_waf_group@规则集名称")}}</th>
					<th nowrap="">{{t("servers_groups_group_settings_waf_group@规则")}}</th>
					<th nowrap="" class="center one wide">{{t("servers_groups_group_settings_waf_group@规则关系")}}</th>
					<th nowrap="">{{t("servers_groups_group_settings_waf_group@动作")}}</th>
					<th class="three op">{{t("servers_groups_group_settings_waf_group@操作")}}</th>
				</tr>
			</thead>
			<tbody v-for="set in sets" :data-set-id="set.id">
			<tr>
				<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
							<td nowrap=""><a href="" @click.prevent="updateSet(set.id)"><span :class="{disabled:!set.isOn}">{{set.name}}</span> <i class="icon expand small"></i></a>
					<p style="margin-top:0.5em">
						<label-on :v-is-on="set.isOn"></label-on>
					</p>
				</td>
				<td class="rules-box">
					<div v-for="rule in set.rules" style="margin-top: 0.4em;margin-bottom:0.4em">
											<http-firewall-rule-label :v-rule="rule"></http-firewall-rule-label>
					</div>
					<b-empty v-if="set.rules.length == 0">{{t("servers_groups_group_settings_waf_group@暂时还没有规则")}}</b-empty>
				</td>
				<td class="center">
						<span v-if="set.connector.toUpperCase() == 'OR'">{{t("servers_groups_group_settings_waf_group@或")}}</span><span v-else>{{t("servers_groups_group_settings_waf_group@和")}}</span>
						<span class="small grey">({{set.connector.toUpperCase()}})</span>
				</td>
				<td nowrap="">
					<http-firewall-actions-view :v-actions="set.actions"></http-firewall-actions-view>
				</td>
				<td>
					<a href="" @click.prevent="updateSet(set.id)">{{t("servers_groups_group_settings_waf_group@修改")}}</a> &nbsp; <a href="" @click.prevent="updateSetOn(set.id, false)" v-if="set.isOn">{{t("servers_groups_group_settings_waf_group@停用")}}</a><a href="" @click.prevent="updateSetOn(set.id, true)" v-if="!set.isOn"><span class="red">{{t("servers_groups_group_settings_waf_group@启用")}}</span></a> &nbsp; <a href="" @click.prevent="deleteSet(set.id)">{{t("servers_groups_group_settings_waf_group@删除")}}</a>
				</td>
			</tr>
			</tbody>
		</table>

		<p class="comment" v-if="group.sets != null && group.sets.length > 1">{{t("servers_groups_group_settings_waf_group@所有规则匹配顺序为从上到下可以拖动左侧的排序")}}<i class="icon bars"></i>{{t("servers_groups_group_settings_waf_group@排序")}}</p>
	</div>
</div>