{$layout}
{$template "../menu"}
{$template "/left_menu_with_menu"}

<div class="left-right-box-container">
    <div class="right-box">
        {$template "menu"}

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

            <!-- 使用 div 布局 -->
            <div class="config-section">
                <div class="section-title">{{t('dns_index@DNS设置')}}</div>

                <div class="config-item">
                    <div class="item-content">
                        <checkbox name="useGlobal" v-model="useGlobal">{{t('dns_index@使用全局配置')}}</checkbox>
                        <p class="comment">{{t('dns_index@确定当前配置是否使用全局集群配置勾选表面当前使用全局配置否则使用自定义配置')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('dns_index@选择主域名')}} *</div>
                    <div class="item-content">
                        <div v-if="hasDomains">
                            <dns-domain-selector :v-domain-id="domainId" :v-domain-name="domainName" :v-provider-name="domainProvider.name" @change="changeDomain"></dns-domain-selector>
                            <p class="comment">{{t('dns_index@用于生成集群节点和网站的CNAME和DNS解析记录')}}<span v-if="domainId > 0">{{t('dns_index@修改后将自动删除旧域名中的相关记录')}}</span>。</p>
                        </div>
                        <div v-else>
                            {{t('dns_index@没有可用的域名请在')}} <a href="/dns/providers" target="_blank">{{t('dns_index@域名解析')}}</a> {{t('dns_index@中添加')}}。
                        </div>
                    </div>
                </div>

                <div class="config-item" v-if="oldDomain.id > 0 && domain.id == 0">
                    <div class="item-label">{{t('dns_index@不使用主域名')}}</div>
                    <div class="item-content">
                        <checkbox name="confirmResetDomain"></checkbox>
                        <p class="comment">{{t('dns_index@选中后表示确认当前集群不使用主域名否则必须选择一个主域名')}}</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('dns_index@DNS子域名')}} *</div>
                    <div class="item-content">
                        <div class="ui input right labeled" style="width: 100%; display: flex; align-items: center;">
                            <input type="text" name="dnsName" maxlength="64" style="flex: 1; max-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('dns_index@主域名')}}</span>
                        </div>
                        <p class="comment">{{t('dns_index@当前集群的子域名和主域名一起组成集群节点的子域名修改后将自动删除旧域名中的相关记录')}}<a href="" @click.prevent="generateRandName()">{{t('dns_index@随机生成')}}</a>。</p>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('dns_index@自动设置CNAME记录')}}<optional-label></optional-label></div>
                    <div class="item-content">
                        <values-box :values="cnameRecords" name="cnameRecords" :placeholder="t('dns_index@记录名')" ref="cnameRecords"></values-box>
                        <p class="comment">{{t('dns_index@除集群已创建的网站之外自动解析到集群的CNAME记录比如')}}<code-label @click.prevent="addCnameRecord('www')">www</code-label>。</p>
                    </div>
                </div>

                <div class="config-item">
                     <div class="item-label">{{t('dns_index@更多选项')}}</div>
                     <div class="item-content">
                         <more-options-indicator></more-options-indicator>
                     </div>
                 </div>

                <div v-show="moreOptionsVisible">
                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="cnameAsDomain" :v-value="1" v-model="cnameAsDomain">{{t('dns_index@允许通过CNAME访问网站')}}</checkbox>
                            <p class="comment">{{t('dns_index@选中后表示允许使用CNAME直接访问网站如果取消选中则表示CNAME只作为DNS解析记录使用')}}</p>
                        </div>
                    </div>

                    <div class="config-item" v-show="teaIsPlus">
                        <div class="item-content">
                            <checkbox name="includingLnNodes" :v-value="1" v-model="includingLnNodes">{{t('dns_index@包含L2及以上级别节点')}}</checkbox>
                            <p class="comment">{{t('dns_index@选中后表示域名解析中包含L2及以上级别节点也就意味着用户请求可能会被分配到这些节点')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-label">{{t('dns_index@解析记录TTL')}}</div>
                        <div class="item-content">
                            <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_index@秒')}}</span>
                            </div>
                            <p class="comment">{{t('dns_index@每个DNS服务商或者账号的TTL限制各有不同请注意取值范围修改后只对新的解析记录生效0表示使用默认')}}</p>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="nodesAutoSync" :v-value="1" v-model="nodesAutoSync">{{t('dns_index@自动同步节点DNS状态')}}</checkbox>
                        </div>
                    </div>

                    <div class="config-item">
                        <div class="item-content">
                            <checkbox name="serversAutoSync" :v-value="1" v-model="serversAutoSync">{{t('dns_index@自动同步网站DNS状态')}}</checkbox>
                        </div>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label"></div>
                    <div class="item-content">
                        <submit-btn></submit-btn>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>