{$layout "layout_popup"}

<!-- <h3>{{t('dns_domains_selectPopup@选择集群DNS设置')}}</h3> -->

<form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
	<csrf-token></csrf-token>

	<table class="ui table definition selectable">
		<tr>
			<td class="title">{{t('dns_domains_selectPopup@DNS服务商')}}</td>
			<td>
				<b-select
					name="providerType"
					v-model="providerType"
					@change="changeProviderType"
					auto-width
					:options="[
						...providerTypes.map(providerType => ({
							label: providerType.name,
							value: providerType.code,
						}))
					]"
				></b-select>

				<!-- <select name="providerType" class="ui dropdown auto-width" v-model="providerType" @change="changeProviderType">
					<option v-for="providerType in providerTypes" :value="providerType.code">{{providerType.name}}</option>
				</select> -->
			</td>
		</tr>
		<tr>
			<td>{{t('dns_domains_selectPopup@账号')}}</td>
			<td>
				<b-empty v-if="providers.length == 0">{{t('dns_domains_selectPopup@没有账号可选')}}</b-empty>
				<b-select
					v-show="providers.length > 0"
					name="providerId"
					v-model="providerId"
					auto-width
					:options="[
						...providers.map(provider => ({
							label: provider.name,
							value: provider.id,
						}))
					]"
				></b-select>

				<!-- <select name="providerId" class="ui dropdown auto-width" v-model="providerId" v-show="providers.length > 0">
					<option v-for="provider in providers" :value="provider.id">{{provider.name}}</option>
				</select> -->
				<p class="comment"><a href="/dns/providers" target="_blank">{{t('dns_domains_selectPopup@去管理DNS服务商账号')}}&raquo;</a></p>
			</td>
		</tr>
		<tr v-show="providerId > 0">
			<td>{{t('dns_domains_selectPopup@域名')}}</td>
			<td>
				<b-empty v-if="domains.length == 0">{{t('dns_domains_selectPopup@没有域名可选')}}</b-empty>
				<b-select
					v-show="domains.length > 0"
					name="domainId"
					v-model="domainId"
					auto-width
					:options="[
						...domains.map(admin => ({
							label: admin.name,
							value: admin.id,
						}))
					]"
				></b-select>

				<!-- <select name="domainId" class="ui dropdown auto-width" v-model="domainId" v-show="domains.length > 0">
					<option v-for="domain in domains" :value="domain.id">{{domain.name}}</option>
				</select> -->
			</td>
		</tr>
	</table>

	<submit-btn></submit-btn>
</form>