{$layout}

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

<form class="ui form" method="get" action="/dns">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" :placeholder="t('dns@集群域名')" v-model="keyword"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('dns@搜索')}}</button>
            &nbsp;
            <a href="/dns" v-if="keyword.length > 0">{{t('dns@清除条件')}}</a>
        </div>
    </div>
</form>
<div class="margin"></div>
<b-empty v-if="clusters.length == 0">{{t('dns@暂时还没有集群。')}}</b-empty>

<div v-if="clusters.length > 0">
    <b-table
        :columns="columns" 
        :data-source="clusters" 
        :row-key="'id'" 
        :scroll="{ x: 800 }"
        size="middle">
        
        <!-- 集群 -->
        <template slot="nameSlot" slot-scope="{ text, record }">
            <a :href="'/dns/clusters/cluster?clusterId=' + record.id">
                <keyword :v-word="keyword">{{record.name}}</keyword>
            </a>
            <link-icon :href="'/clusters/cluster?clusterId=' + record.id"></link-icon>
        </template>
        
        <!-- 子域名 -->
        <template slot="dnsNameSlot" slot-scope="{ text, record }">
            <span v-if="record.dnsName.length > 0 && record.domainName.length > 0">
                <em class="italic"><keyword :v-word="keyword">{{record.dnsName}}</keyword></em>.<keyword :v-word="keyword">{{record.domainName}}</keyword>
            </span>
            <span v-else class="disabled">-</span>
        </template>
        
        <!-- DNS服务商 -->
        <template slot="providerTypeNameSlot" slot-scope="{ text, record }">
            <span v-if="record.providerTypeName.length > 0">{{record.providerTypeName}}</span>
            <span v-else class="disabled">-</span>
        </template>
        
        <!-- DNS服务商账号 -->
        <template slot="providerNameSlot" slot-scope="{ text, record }">
            <span v-if="record.providerName.length > 0">
                {{record.providerName}}
                <link-icon :href="'/dns/providers/provider?providerId=' + record.providerId"></link-icon>
            </span>
            <span v-else class="disabled">-</span>
        </template>
        
        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
            <a :href="'/dns/clusters/cluster?clusterId=' + record.id">
                <i class="pi pi-info-circle"></i> {{t('dns@详情')}}
            </a> &nbsp; 
            <a href="" @click.prevent="updateCluster(record.id)">
                <i class="pi pi-pen-to-square"></i> {{t('dns@修改')}}
            </a>
        </template>
    </b-table>
    
    <p class="comment">{{t('dns@这里列出了所有集群对应的域名设置。')}}</p>
</div>

<div class="page" v-html="filterPageContent(page)"></div>