{$layout "layout_popup"}

<!-- <h3>{{t('dns@修改集群DNS设置PopupTitle')}}</h3> -->

<form method="post" class="ui form" data-tea-success="success" data-tea-action="$">
	<input type="hidden" name="clusterId" :value="clusterId"/>
	<csrf-token></csrf-token>

	<table class="ui table definition selectable">
		<tr>
			<td class="title">{{t('dns@DNS服务商Label')}}</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@账号')}}</td>
			<td>
				<b-empty v-if="providers.length == 0">{{t('dns@没有账号可选')}}</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@去管理DNS服务商账号»')}}</a></p>
			</td>
		</tr>
		<tr v-show="providerId > 0">
			<td>{{t('dns@域名')}}</td>
			<td>
				<b-empty v-if="domains.length == 0">{{t('dns@没有域名可选')}}</b-empty>
				<b-select
					v-show="domains.length > 0"
					name="domainId"
					v-model="domainId"
					auto-width
					:options="[
						...domains.map(domain => ({
							label: domain.name??'',
							value: domain.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>
		<tr>
			<td>{{t('dns@子域名Label')}}</td>
			<td>
				<div class="ui input right labeled">
					<input type="text" name="dnsName" v-model="dnsName" maxlength="64" size="20" style="width:10em"/>
					<span class="ui label">.<span v-if="domain.length == 0">{{t('dns@主域名')}}</span><span v-else>{{domain}}</span></span>
				</div>
				<p class="comment">{{t('dns@子域名和主域名共同组成集群的域名。')}}</p>
			</td>
		</tr>
        <tr>
            <td>{{t('dns@自动设置CNAME记录')}}</td>
            <td>
                <values-box :values="cnameRecords" name="cnameRecords" :placeholder="t('dns@记录名')" ref="cnameRecords"></values-box>
                <p class="comment">{{t('dns@除集群已创建的网站之外，自动解析到集群的CNAME记录，比如')}}<code-label @click.prevent="addCnameRecord('www')">www</code-label>。</p>
            </td>
        </tr>
		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
            <tr>
                <td>{{t('dns@允许通过CNAME访问网站')}}</td>
                <td>
                    <checkbox name="cnameAsDomain" v-model="cnameAsDomain"></checkbox>
                    <p class="comment">{{t('dns@选中后，表示允许使用CNAME直接访问网站；如果取消选中，则表示CNAME只作为DNS解析记录使用。')}}</p>
                </td>
            </tr>
            <tr v-show="teaIsPlus">
                <td>{{t('dns@包含Ln节点')}}</td>
                <td>
                    <checkbox name="includingLnNodes" v-model="includingLnNodes"></checkbox>
                    <p class="comment">{{t('dns@选中后，表示域名解析中包含L2及以上级别节点，也就意味着用户请求可能会被分配到这些节点。')}}</p>
                </td>
            </tr>
            <tr>
                <td>{{t('dns@记录TTL')}}</td>
                <td>
                    <div class="ui input right labeled">
                        <input type="text" name="ttl" maxlength="6" style="width: 6em" v-model="ttl"/>
                        <span class="ui label">{{t('dns@秒')}}</span>
                    </div>
                    <p class="comment">{{t('dns@每个DNS服务商或者账号的TTL限制各有不同，请注意取值范围；修改后，只对新的解析记录生效。0表示使用默认。')}}</p>
                </td>
            </tr>
			<tr>
				<td>{{t('dns@同步节点DNS状态')}}</td>
				<td>
					<checkbox name="nodesAutoSync" :v-value="1" v-model="nodesAutoSync"></checkbox>
				</td>
			</tr>
			<tr>
				<td>{{t('dns@同步网站DNS状态')}}</td>
				<td>
					<checkbox name="serversAutoSync" :v-value="1" v-model="serversAutoSync"></checkbox>
				</td>
			</tr>
		</tbody>
	</table>

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