{$layout}

	{$template "waf_menu"}

	<b-settings-header
		@action="updateGroup(group.id)"
		action-text="修改"
	>
	分组
	</b-settings-header>
	<!-- <h3>分组<a href="" @click.prevent="updateGroup(group.id)">[修改]</a></h3> -->
	<table class="ui table selectable definition">
		<tr>
			<td class="title">名称</td>
			<td>{{group.name}}</td>
		</tr>
        <tr>
            <td>代号</td>
            <td>
                <span v-if="group.code.length > 0">{{group.code}}</span>
                <span v-else class="disabled">没有设置。</span>
            </td>
        </tr>
		<tr>
			<td>描述</td>
			<td>
				<b-empty v-if="group.description.length == 0">暂时还没有描述。</b-empty>
				<span v-if="group.description.length > 0">{{group.description}}</span>
			</td>
		</tr>
		<tr>
			<td>启用状态</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="添加规则集"
	>
		规则集
	</b-settings-header>
	<!-- <h3 style="padding-top:0.8em">规则集<a href="" @click.prevent="createSet(group.id)">[添加规则集]</a> </h3> -->
	<b-empty v-if="sets == null || sets.length == 0">暂时还没有规则。</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="">规则集名称</th>
				<th nowrap="">规则</th>
				<th nowrap="" class="center one wide">规则关系</th>
				<th nowrap="">动作</th>
				<th class="three op">操作</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 :name="'set' + set.id"></a><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">暂时还没有规则</b-empty>
			</td>
			<td class="center">
                <span v-if="set.connector.toUpperCase() == 'OR'">或</span><span v-else>和</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)">修改</a> &nbsp; <a href="" @click.prevent="updateSetOn(set.id, false)" v-if="set.isOn">停用</a><a href="" @click.prevent="updateSetOn(set.id, true)" v-if="!set.isOn"><span class="red">启用</span></a> &nbsp; <a href="" @click.prevent="deleteSet(set.id)">删除</a>
			</td>
		</tr>
		</tbody>
	</table>

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