{$layout}
{$template "menu"}

<form method="get" class="ui form" action="/servers">
	<div class="ui margin"></div>
	<div class="ui fields inline">
		<div class="ui field" v-if="groups.length > 0" style="padding-right:0">
			所属分组：
		</div>
		<div class="ui field" v-if="groups.length > 0">
			<select class="ui dropdown" name="groupId" v-model="groupId">
				<option value="0">[全部]</option>
				<option v-for="group in groups" :value="group.id">{{group.name}}</option>
			</select>
		</div>
		<div class="ui field">
			<input type="text" name="keyword" style="width:10em" placeholder="关键词" v-model="keyword"/>
		</div>
		<div class="ui field">
			<button type="submit" class="ui button">搜索</button>
		</div>
	</div>
</form>

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

<table class="ui table selectable celled" v-if="servers.length > 0">
	<thead>
		<tr>
			<th>服务名称</th>
			<th>所属分组</th>
			<th>部署集群</th>
			<th>域名</th>
			<th>端口</th>
			<th class="two wide center">状态</th>
			<th class="two op">操作</th>
		</tr>
	</thead>
	<tr v-for="server in servers">
		<td>{{server.name}}
			<div style="margin-top:0.4em">
				<tiny-basic-label>{{server.serverTypeName}}</tiny-basic-label>
			</div>
		</td>
		<td>
			<div v-if="server.groups.length > 0">
				<div  v-for="group in server.groups">
					<tiny-basic-label>{{group.name}}</tiny-basic-label>
				</div>
			</div>
			<span class="disabled" v-else>-</span>
		</td>
		<td>{{server.cluster.name}}</td>
		<td>
			<span v-if="server.serverNames.length > 0">
				<span v-if="server.serverNames[0].subNames == null || server.serverNames[0].subNames.length == 0">{{server.serverNames[0].name}}</span>
				<span v-else>{{server.serverNames[0].subNames[0]}}</span>
				<span v-if="server.countServerNames > 1">等{{server.countServerNames}}个域名</span>
			</span>
			<span v-else class="disabled">-</span>
		</td>
		<td>
			<span v-if="server.ports.length == 0">-</span>
			<div v-for="port in server.ports">
				<tiny-basic-label>{{port.portRange}}<span class="small">（{{port.protocol}}）</span></tiny-basic-label>
			</div>
		</td>
		<td class="center">
			<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>