{$layout}
{$template "menu"}

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

<style>
    .httpdns-apps-table .httpdns-apps-op {
        white-space: nowrap;
    }
</style>

<div>
    <form method="get" class="ui form" action="/httpdns/apps">
        <div class="ui fields inline">
            <div class="ui field">
                <input type="text" name="keyword" style="width:16em" placeholder="AppID 或应用名称..." :value="keyword" />
            </div>
            <div class="ui field">
                <button type="submit" class="ui button">查询</button>
                <a href="/httpdns/apps" v-if="keyword.length > 0">[清除条件]</a>
            </div>
        </div>
    </form>

    <p class="ui message" v-if="apps.length == 0">暂时没有符合条件的 HTTPDNS 应用。</p>

    <table class="ui table selectable celled httpdns-apps-table" v-if="apps.length > 0">
        <colgroup>
            <col style="width:20%;" />
            <col style="width:12%;" />
            <col style="width:11%;" />
            <col style="width:11%;" />
            <col style="width:12%;" />
            <col style="width:8%;" />
            <col style="width:6%;" />
            <col style="width:20%;" />
        </colgroup>
        <thead>
            <tr>
                <th>应用名称</th>
                <th>AppID</th>
                <th>主集群</th>
                <th>备用集群</th>
                <th>用户</th>
                <th class="center">绑定域名数</th>
                <th class="center">状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="app in apps">
                <td>
                    <a :href="'/httpdns/apps/app?appId=' + app.id">
                        <strong>
                            <keyword :v-word="keyword">{{app.name}}</keyword>
                        </strong>
                    </a>
                </td>
                <td>
                    <code>{{app.appId}}</code>
                    <copy-icon :text="app.appId"></copy-icon>
                </td>
                <td>
                    <span v-if="app.primaryCluster != null && app.primaryCluster.id > 0">
                        {{app.primaryCluster.name || ('#' + app.primaryCluster.id)}}
                        <link-icon :href="'/httpdns/clusters/cluster?clusterId=' + app.primaryCluster.id"></link-icon>
                    </span>
                    <span v-else class="disabled">-</span>
                </td>
                <td>
                    <span v-if="app.backupCluster != null && app.backupCluster.id > 0">
                        {{app.backupCluster.name || ('#' + app.backupCluster.id)}}
                        <link-icon :href="'/httpdns/clusters/cluster?clusterId=' + app.backupCluster.id"></link-icon>
                    </span>
                    <span v-else class="disabled">-</span>
                </td>
                <td>
                    <span v-if="app.user != null && app.user.id > 0">
                        {{app.user.fullname}} ({{app.user.username}})
                    </span>
                    <span v-else class="disabled">-</span>
                </td>
                <td class="center"><a :href="'/httpdns/apps/domains?appId=' + app.id">{{app.domainCount}}</a></td>
                <td class="center">
                    <label-on :v-is-on="app.isOn"></label-on>
                </td>
                <td class="httpdns-apps-op">
                    <a :href="'/httpdns/apps/app?appId=' + app.id">域名管理</a> &nbsp;|&nbsp;
                    <a :href="'/httpdns/apps/app/settings?appId=' + app.id">应用设置</a> &nbsp;|&nbsp;
                    <a :href="'/httpdns/apps/sdk?appId=' + app.id">SDK集成</a>
                </td>
            </tr>
        </tbody>
    </table>

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