{$layout}

<first-menu>
	<a href="" class="item" @click.prevent="createProvider()">[添加DNS账号信息]</a>
</first-menu>

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

<form class="ui form" method="get" action="/dns/providers">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" placeholder="账号说明..." v-model="keyword"/>
        </div>
        <div class="ui field">
            <input type="text" name="domain" placeholder="域名..." v-model="domain"/>
        </div>
        <div class="ui field" v-if="providerTypes.length > 0">
            <b-select
                name="providerType"
                v-model="providerType"
                auto-width
                :options="[
                    {label: '[服务商厂家]', value: ''},
                    ...providerTypes.map(p => ({
                        label: (p.name??'') + '（' + (p.count??'') + '）',
                        value: p.code??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown auto-width" name="providerType" v-model="providerType">
                <option value="">[服务商厂家]</option>
                <option v-for="p in providerTypes" :value="p.code">{{p.name}}({{p.count}})</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button>
            &nbsp;
            <a :href="Tea.url('.')" v-if="keyword.length > 0 || domain.length > 0 || providerType.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

<b-empty v-if="providers.length == 0">暂时还没有第三方DNS服务商。</b-empty>

<table class="ui table selectable celled" v-if="providers.length > 0">
	<thead>
		<tr>
			<th>账号说明</th>
			<th class="three wide">服务商</th>
			<th class="width5 center">域名</th>
			<th class="two op">操作</th>
		</tr>
	</thead>
	<tr v-for="(provider, index) in providers">
        <td><a :href="'/dns/providers/provider?providerId=' + provider.id"><keyword :v-word="keyword">{{provider.name}}</keyword></a></td>
		<td>{{provider.typeName}}</td>
		<td class="center">
			<span v-if="provider.countDomains == 0" class="disabled">0</span>
			<span v-else>{{provider.countDomains}}</span>
		</td>
		<td>
			<a :href="'/dns/providers/provider?providerId=' + provider.id">详情</a> &nbsp; &nbsp; <a href="" @click.prevent="deleteProvider(provider.id)">删除</a>
		</td>
	</tr>
</table>

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