{$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>ID</th>
			<th>服务名称</th>
			<th>服务类型</th>
			<th>部署集群</th>
			<th>端口</th>
			<th>状态</th>
			<th class="two op">操作</th>
		</tr>
	</thead>
	<tr v-for="server in servers">
		<td>{{server.id}}</td>
		<td>{{server.name}}</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" class="ui label small">
				{{port.portRange}}<span class="small">（{{port.protocol}}）</span>
			</div>
		</td>
		<td></td>
		<td>
			<a :href="'/servers/server?serverId=' + server.id">详情</a>
		</td>
	</tr>
</table>

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