{$layout}

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

<style>
    .httpdns-domains-table .httpdns-domains-op {
        white-space: nowrap;
    }
</style>
<second-menu>
    <a class="item" :href="'/httpdns/apps/domains?appId=' + app.id">{{app.name}}</a>
    <span class="item disabled" style="padding-left: 0; padding-right: 0">&raquo;</span>
    <div class="item"><strong>域名列表</strong></div>
    <a href="" class="item" @click.prevent="bindDomain">创建域名</a>
</second-menu>

<form class="ui form small" @submit.prevent="doSearch">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" v-model.trim="keywordInput" placeholder="按域名筛选..." />
        </div>
        <div class="ui field">
            <button type="submit" class="ui button small">搜索</button>
            &nbsp;
            <a href="" v-if="keyword.length > 0" @click.prevent="clearSearch">[清除条件]</a>
        </div>
    </div>
</form>

<table class="ui table selectable celled httpdns-domains-table" v-if="filteredDomains().length > 0">
    <colgroup>
        <col style="width:60%;" />
        <col style="width:20%;" />
        <col style="width:20%;" />
    </colgroup>
    <thead>
        <tr>
            <th>服务域名</th>
            <th class="width10">规则策略</th>
            <th class="httpdns-domains-op">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="domain in filteredDomains()">
            <td>
                <div><strong>{{domain.name}}</strong></div>
            </td>
            <td>
                <a
                    :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">{{domain.customRecordCount}}</a>
            </td>
            <td class="httpdns-domains-op">
                <a :href="'/httpdns/apps/customRecords?appId=' + app.id + '&domainId=' + domain.id">自定义解析</a>
                &nbsp;|&nbsp;
                <a href="" @click.prevent="deleteDomain(domain.id)">解绑</a>
            </td>
        </tr>
    </tbody>
</table>

<not-found-box v-if="domains.length == 0">当前应用尚未绑定域名。</not-found-box>
<not-found-box v-if="domains.length > 0 && filteredDomains().length == 0">没有匹配的域名。</not-found-box>