{$layout}
{$template "menu"}

<form method="get" class="ui form" action="/servers">
    <input type="hidden" name="auditingFlag" :value="auditingFlag"/>
	<div class="ui margin"></div>
    <div class="ui menu basic text">
        <div class="item">
            <div class="ui fields inline">
                <div class="ui field" v-if="clusters.length > 0">
                    <select class="ui dropdown auto-width" name="clusterId" v-model="clusterId">
                        <option value="0">[选择集群]</option>
                        <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
                    </select>
                </div>
                <div class="ui field" v-if="groups.length > 0">
                    <select class="ui dropdown auto-width" 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>
        </div>
        <div class="item right">
            <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
        </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>
			<span v-if="server.user != null">{{server.user.fullname}}<link-icon v-if="canVisitUser" :href="'/users/user?userId=' + server.user.id"></link-icon></span>
            <span 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}}个域名 <popup-icon :href="'/servers/serverNamesPopup?serverId=' + server.id" height="20em"></popup-icon></span>
			</span>
			<span v-else class="disabled">-</span>

            <!-- 审核中 -->
            <div v-if="server.isAuditing" style="margin-top: 0.5em">
                <a class="ui label basic tiny red" title="点击跳到审核页面" :href="'/servers/server/settings/serverNames?serverId=' + server.id">审核中 &nbsp;<i class="icon long arrow right alternate"></i></a>
            </div>

            <!-- 审核失败 -->
            <div v-if="!server.auditingIsOk" style="margin-top: 0.5em">
                <a class="ui label basic tiny red" title="点击跳到审核页面" :href="'/servers/server/settings/serverNames?serverId=' + server.id">审核不通过 &nbsp;<i class="icon long arrow right alternate"></i></a>
            </div>
		</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">
            <div v-if="!checkDNS">
                <label-on :v-is-on="server.isOn"></label-on>
            </div>
            <div v-else>
                <span v-if="!server.isOn" class="grey">停用中</span>
                <span v-else-if="server.status.isOk" class="green">正常</span>
                <span v-else-if="server.status.message.length == 0">检查中</span>
                <span v-else class="red">{{server.status.message}}
                    <tip-icon :content="server.status.todo"></tip-icon>
                </span>
            </div>
		</td>
		<td>
			<a :href="'/servers/server?serverId=' + server.id">详情</a>
		</td>
	</tr>
</table>

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