{$layout "layout_popup"}

<h3>修改集群DNS设置</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">DNS服务商</td>
			<td>
				<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>账号</td>
			<td>
				<p class="comment" v-if="providers.length == 0">没有账号可选</p>
				<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">去管理DNS服务商账号&raquo;</a></p>
			</td>
		</tr>
		<tr v-show="providerId > 0">
			<td>域名</td>
			<td>
				<p class="comment" v-if="domains.length == 0">没有域名可选</p>
				<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>子域名</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">主域名</span><span v-else>{{domain}}</span></span>
				</div>
				<p class="comment">子域名和主域名共同组成集群的域名。</p>
			</td>
		</tr>
        <tr>
            <td>自动设置CNAME记录</td>
            <td>
                <values-box :values="cnameRecords" name="cnameRecords" placeholder="记录名" ref="cnameRecords"></values-box>
                <p class="comment">除了集群节点记录之外，自动加入的CNAME记录，比如<code-label @click.prevent="addCnameRecord('@')">@</code-label>、<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>是否同步节点DNS状态</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="nodesAutoSync" value="1" v-model="nodesAutoSync"/>
						<label></label>
					</div>
				</td>
			</tr>
			<tr>
				<td>是否同步网站服务DNS状态</td>
				<td>
					<div class="ui checkbox">
						<input type="checkbox" name="serversAutoSync" value="1" v-model="serversAutoSync"/>
						<label></label>
					</div>
				</td>
			</tr>
		</tbody>
	</table>

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