{$layout}
{$template "menu"}

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

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<div class="web-config-container">
		<div class="web-config-form">
			<div class="form-title">{{t('clusters@创建新集群')}}</div>

			<!-- 基本设置 -->
			<div class="config-section">
				<div class="section-title">{{t('clusters@基本设置')}}</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@集群名称')}} *</div>
					<div class="item-content">
						<input type="text" name="name" maxlength="50" ref="focus"/>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@默认缓存设置')}}</div>
					<div class="item-content">
						<http-cache-policy-selector></http-cache-policy-selector>
						<p class="comment">{{t('clusters@为可选项集群网站可自行设置')}}</p>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@默认WAF设置')}}</div>
					<div class="item-content">
						<http-firewall-policy-selector></http-firewall-policy-selector>
						<p class="comment">{{t('clusters@为可选项集群网站可自行设置')}}</p>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@只允许绑定的域名访问')}}</div>
					<div class="item-content">
						<checkbox name="matchDomainStrictly" :v-value="1"></checkbox>
						<p class="comment">{{t('clusters@选中后只有绑定域名可访问Part1')}}<tip-icon :content="t('clusters@已绑定域名提示')"></tip-icon>{{t('clusters@选中后只有绑定域名可访问Part2')}}</p>
					</div>
				</div>
			</div>

			<!-- 节点安装选项 -->
			<div class="config-section">
				<div class="section-title">{{t('clusters@节点安装选项')}} <span class="grey small">{{t('clusters@可选')}}</span></div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@默认SSH登录方式')}}</div>
					<div class="item-content">
						<grant-selector></grant-selector>
						<p class="comment">{{t('clusters@节点SSH登录默认提示')}}</p>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@节点安装目录')}}</div>
					<div class="item-content">
						<input type="text" name="installDir" maxlength="100"/>
						<p class="comment">{{t('clusters@节点安装目录默认提示')}}</p>
					</div>
				</div>
				<div class="config-item" v-show="false">
					<div class="item-label">{{t('clusters@自动加入Systemd服务')}}</div>
					<div class="item-content">
						<checkbox :v-value="1" name="systemdServiceIsOn" checked="checked"></checkbox>
						<p class="comment">{{t('clusters@加入Systemd提示')}}</p>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@自动安装nftables')}}</div>
					<div class="item-content">
						<checkbox name="autoInstallNftables" :v-value="1"></checkbox>
						<p class="comment">{{t('clusters@自动安装nftables提示')}}</p>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@自动调节系统参数')}}</div>
					<div class="item-content">
						<checkbox name="autoSystemTuning" :v-value="1"></checkbox>
						<p class="comment">{{t('clusters@自动调节系统参数提示')}}</p>
					</div>
				</div>
				<div class="config-item" v-show="false">
					<div class="item-label" v-html="t('clusters@自动执行硬盘TRIM')"></div>
					<div class="item-content">
						<checkbox name="autoTrimDisks" :v-value="1"></checkbox>
						<p class="comment">{{t('clusters@执行TRIM提示')}}</p>
					</div>
				</div>
			</div>

			<!-- DNS设置选项 -->
			<div class="config-section">
				<div class="section-title">{{t('clusters@DNS设置选项')}} <span class="grey small">{{t('clusters@可选')}}</span></div>
				<div class="config-item" v-if="hasDomains">
					<div class="item-label">{{t('clusters@选择主域名')}}</div>
					<div class="item-content">
						<dns-domain-selector @change="changeDomain"></dns-domain-selector>
						<p class="comment">{{t('clusters@生成CNAME和解析记录提示')}}</p>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@DNS子域名')}}</div>
					<div class="item-content">
						<div class="ui input right labeled">
							<input type="text" name="dnsName" maxlength="64" style="width:10em" v-model="dnsName"/>
							<span class="ui label" v-if="domain != null && domain.name != null && domain.name.length > 0">.{{domain.name}}</span>
							<span class="ui label" v-else>{{t('clusters@主域名Suffix')}}</span>
						</div>
						<p class="comment"><span v-if="dnsName == defaultDNSName" class="red">{{t('clusters@当前已为你生成默认子域名')}}</span>{{t('clusters@当前集群子域名提示')}}</p>
					</div>
				</div>
				<div class="config-item">
					<div class="item-label">{{t('clusters@解析记录TTL')}}</div>
					<div class="item-content">
						<div class="ui input right labeled">
							<input type="text" name="dnsTTL" maxlength="6" style="width: 6em" value="0"/>
							<span class="ui label">{{t('clusters@秒')}}</span>
						</div>
						<p class="comment">{{t('clusters@解析记录TTL提示')}}</p>
					</div>
				</div>
			</div>

			<!-- 提交按钮 -->
			<div class="config-item">
				<div class="item-label"></div>
				<div class="item-content">
					<submit-btn></submit-btn>
				</div>
			</div>
		</div>
	</div>
</form>