{$layout}

{$template "/left_menu"}

<div class="right-box">
	<table class="ui table selectable definition">
		<tr>
			<td class="title">服务名称</td>
			<td>
				{{server.name}}
			</td>
		</tr>
		<tr>
			<td>部署的集群</td>
			<td>
				{{server.cluster.name}}
			</td>
		</tr>
		<tr>
			<td>服务类型</td>
			<td>
				{{serverType.name}}
			</td>
		</tr>
		<tr>
			<td>绑定端口</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>
		</tr>

		<!-- 证书 -->
		<!--<tbody v-if="tlsProtocolName.length > 0">
		<tr>
			<td>{{tlsProtocolName}}证书</td>
			<td>
				<input type="file" name="tlsCertFile"/>
			</td>
		</tr>
		<tr>
			<td>{{tlsProtocolName}}密钥</td>
			<td>
				<input type="file" name="tlsKeyFile"/>
			</td>
		</tr>
		</tbody>-->

		<!-- 域名 -->
		<tr>
			<td>绑定域名</td>
			<td>
				<div v-for="serverName in server.serverNames" class="ui label small">
					<em v-if="serverName.type != 'full'">{{serverName.type}}</em> {{serverName.name}}
				</div>
			</td>
		</tr>

		<!-- 源服务器地址 -->
		<tr v-if="serverType.code == 'httpProxy' || serverType.code == 'tcpProxy' || serverType.code == 'udpProxy'">
			<td>源站地址</td>
			<td>
				<div v-if="server.origins.length > 0">
					<div v-for="(origin, index) in server.origins" class="ui label small">
						{{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}
					</div>
				</div>
			</td>
		</tr>

		<!-- Web Server -->
		<!--<tr v-if="serverType == 'httpWeb'">
			<td>Web目录</td>
			<td>
				<input type="text" name="webRoot"/>
			</td>
		</tr>-->

		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
		<tr>
			<td>描述</td>
			<td>
				<span v-if="server.description.length == 0">-</span>
				<span v-if="server.description.length > 0">{{server.description}}</span>
			</td>
		</tr>
		</tbody>
	</table>
</div>