{$layout}
{$template "menu"}

<p class="ui message" v-if="servers.length == 0">暂时还没有服务。</p>

<table class="ui table selectable" v-if="servers.length > 0">
	<thead>
		<tr>
			<th>服务名称</th>
			<th>所属分组</th>
			<th>服务类型</th>
			<th>部署集群</th>
			<th>端口</th>
			<th class="two wide">状态</th>
			<th class="two op">操作</th>
		</tr>
	</thead>
	<tr v-for="server in servers">
		<td>{{server.name}}</td>
		<td>
			<div v-if="server.groups.length > 0">
				<div  v-for="group in server.groups">
					<span class="ui label tiny" style="margin-bottom:0.5em">{{group.name}}</span>
				</div>
			</div>
			<span class="disabled" v-else>-</span>
		</td>
		<td>{{server.serverTypeName}}</td>
		<td>{{server.cluster.name}}</td>
		<td>
			<span v-if="server.ports.length == 0">-</span>
			<div v-for="port in server.ports">
				<div class="ui label tiny" style="margin-bottom:0.5em">{{port.portRange}}<span class="small">（{{port.protocol}}）</span></div>
			</div>
		</td>
		<td>
			<label-on :v-is-on="server.isOn"></label-on>
		</td>
		<td>
			<a :href="'/servers/server?serverId=' + server.id">详情</a>
		</td>
	</tr>
</table>

<div class="page" v-html="page"></div>