{$layout}
{$template "menu"}

<div class="ui margin"></div>

<div>
    <div v-if="hasErrorLogs" class="ui icon message small error">
        <i class="icon warning circle"></i>
        <div class="content">有部分集群节点状态异常，请及时处理。</div>
    </div>

    <form method="get" class="ui form" action="/httpdns/clusters">
        <div class="ui fields inline">
            <div class="ui field">
                <input type="text" name="keyword" style="width:14em" placeholder="集群名称..." v-model="keyword" />
            </div>
            <div class="ui field">
                <button type="submit" class="ui button">查询</button>
                <a href="/httpdns/clusters" v-if="keyword.length > 0">[清除条件]</a>
            </div>
        </div>
    </form>

    <p class="ui message" v-if="clusters.length == 0">暂时还没有 HTTPDNS 集群，现在去 <a
            href="/httpdns/clusters/create">[创建新集群]</a>。</p>

    <table class="ui table selectable celled" v-if="clusters.length > 0">
        <thead>
            <tr>
                <th>集群名称</th>
                <th>API服务地址</th>
                <th class="center width10">节点数</th>
                <th class="center width10">在线节点数</th>
                <th class="width5">状态</th>
                <th class="two op">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="cluster in clusters">
                <td>
                    <a :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">
                        <keyword :v-word="keyword">{{cluster.name}}</keyword>
                    </a>
                </td>
                <td>
                    <code>{{cluster.apiAddress}}</code>
                </td>
                <td class="center">
                    <a :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id" v-if="cluster.countAllNodes > 0">
                        <span
                            :class="{red:cluster.countAllNodes > cluster.countActiveNodes}">{{cluster.countAllNodes}}</span>
                    </a>
                    <span class="disabled" v-else="">-</span>

                    <div v-if="cluster.countUpgradeNodes > 0" style="margin-top:0.5em">
                        <a :href="'/httpdns/clusters/cluster/upgradeRemote?clusterId=' + cluster.id" title="点击进入远程升级页面">
                            <span class="red">有{{cluster.countUpgradeNodes}}个节点需要升级</span>
                        </a>
                    </div>
                </td>
                <td class="center">
                    <a :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id" v-if="cluster.countActiveNodes > 0">
                        <span class="green">{{cluster.countActiveNodes}}</span>
                    </a>
                    <span class="disabled" v-else>-</span>
                </td>
                <td><label-on :v-is-on="cluster.isOn"></label-on></td>
                <td>
                    <a :href="'/httpdns/clusters/cluster?clusterId=' + cluster.id">详情</a>
                </td>
            </tr>
        </tbody>
    </table>

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