{$layout}

	<first-menu>
		<menu-item href="/servers/groups" active="true">分组列表</menu-item>
		<span class="separator">|</span>
		<a href="" class="item" @click.prevent="createGroup()">
			<i class="pi pi-pen-to-square"></i>
			创建
		</a>
	</first-menu>

	<b-empty v-if="groups.length == 0">暂时还没有分组。</b-empty>

	<div v-show="groups.length > 0">
		<div class="margin"></div>
		<table class="ui table selectable celled" id="sortable-table">
			<thead>
				<tr>
					<th style="width:3em"></th>
					<th>分组名称</th>
					<th class="center width10">服务数量</th>
					<th class="two op">操作</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"></i> </td>
					<td>
                        <a :href="'/servers/groups/group?groupId=' + group.id">{{group.name}}</a>
                    </td>
					<td class="center">
						<a :href="'/servers?groupId=' + group.id" v-if="group.countServers > 0">{{group.countServers}}</a>
						<span v-else class="disabled">0</span>
					</td>
					<td>
						<a :href="'/servers/groups/group?groupId=' + group.id">详情</a> &nbsp; <a href="" @click.prevent="deleteGroup(group.id)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>

	<p v-if="groups.length > 0" class="comment">可以拖动左侧的<i class="icon bars"></i>排序。</p>