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

<div class="left-right-box-container">
    <div class="right-box">
        <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
            <input type="hidden" name="clusterId" :value="cluster.id"/>

            <!-- 使用 div 布局 -->
            <div class="config-section">
                 <div class="section-title">{{t('clusters_cluster_settings_index@集群基本设置')}}</div>

                 <div class="config-item" v-show="!isGlobal">
                     <div class="item-content">
                         <checkbox name="useGlobal" v-model="useGlobal">{{t('clusters_cluster_settings_index@使用全局配置')}}</checkbox>
                         <p class="comment">{{t('clusters_cluster_settings_index@确定当前配置是否使用全局集群配置')}}</p>
                     </div>
                 </div>

                 <div class="config-item">
                     <div class="item-label">{{t('clusters_cluster_settings_index@集群名称*')}}</div>
                     <div class="item-content">
                         <input type="text" name="name" maxlength="50" ref="focus" v-model="cluster.name"/>
                     </div>
                 </div>

                 <div class="config-item" v-if="cluster.domainName.length > 0">
                     <div class="item-label">{{t('clusters_cluster_settings_index@域名')}}</div>
                     <div class="item-content">
                         {{cluster.domainName}}<link-icon :href="'/clusters/cluster/settings/dns?clusterId=' + cluster.id"></link-icon>
                     </div>
                 </div>

                 <div class="config-item">
                     <div class="item-label">{{t('clusters_cluster_settings_index@默认SSH认证')}}</div>
                     <div class="item-content">
                         <grant-selector :v-grant="grant"></grant-selector>
                         <p class="comment">{{t('clusters_cluster_settings_index@当节点没有单独设置SSH认证时')}}</p>
                     </div>
                 </div>

                 <div class="config-item">
                     <div class="item-label">{{t('clusters_cluster_settings_index@默认SSH端口')}}</div>
                     <div class="item-content">
                         <input type="text" name="sshParamsPort" v-model="cluster.sshParams.port" maxlength="5" style="width: 5em"/>
                         <p class="comment">{{t('clusters_cluster_settings_index@节点默认SSH登录端口')}}</p>
                     </div>
                 </div>

                 <div class="config-item">
                     <div class="item-label">{{t('clusters_cluster_settings_index@节点安装目录')}}</div>
                     <div class="item-content">
                         <input type="text" name="installDir" maxlength="100" v-model="cluster.installDir"/>
                         <p class="comment">{{t('clusters_cluster_settings_index@当节点没有单独设置安装目录时')}}<span class="ui label tiny">{{t('clusters_cluster_settings_index@登录用户HOME路径')}}</span>{{t('clusters_cluster_settings_index@目录')}}</p>
                     </div>
                 </div>

                 <div class="config-item">
                     <div class="item-label">{{t('clusters_cluster_settings_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-label">{{t('clusters_cluster_settings_index@时区')}}</div>
                         <div class="item-content">
                             <div class="ui fields inline">
                                 <div class="ui field">
                                     <b-select
                                         v-model="timeZoneGroupCode"
                                         :options="[
                                             ...timeZoneGroups.map(timeZoneGroup => ({
                                                 label: timeZoneGroup.name,
                                                 value: timeZoneGroup.code,
                                             }))
                                         ]"
                                     ></b-select>
                                 </div>
                                 <div class="ui field">
                                     <b-select
                                         name="timeZone"
                                         v-model="cluster.timeZone"
                                         :options="[
                                             ...timeZoneLocation.group == timeZoneGroupCode ? timeZoneLocations.map(timeZoneLocation => ({
                                                 label: timeZoneLocation.name + '（' + timeZoneLocation.offset + '）',
                                                 value: timeZoneLocation.name,
                                             })):[],
                                         ]"
                                     ></b-select>
                                 </div>
                             </div>
                             <p class="comment">{{t('clusters_cluster_settings_index@节点记录日志使用的时区')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-label">{{t('clusters_cluster_settings_index@单节点最大线程数')}}</div>
                         <div class="item-content">
                             <input type="text" name="nodeMaxThreads" maxlength="6" v-model="cluster.nodeMaxThreads"/>
                             <p class="comment">{{t('clusters_cluster_settings_index@取值在和之间',[defaultNodeMaxThreadsMin, defaultNodeMaxThreadsMax, defaultNodeMaxThreads])}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-content">
                             <checkbox name="autoOpenPorts" :v-value="1" v-model="cluster.autoOpenPorts">{{t('clusters_cluster_settings_index@自动开放端口')}}</checkbox>
                             <p class="comment">{{t('clusters_cluster_settings_index@选中后会自动尝试在边缘节点')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-content">
                             <div class="ui fields inline">
                                 <div class="ui field">
                                     <checkbox name="clockAutoSync" :v-value="1" v-model="cluster.clock.autoSync">{{t('clusters_cluster_settings_index@自动同步节点时钟')}}</checkbox>
                                 </div>
                             </div>
                             <p class="comment">{{t('clusters_cluster_settings_index@选中后表示尝试自动同步节点时钟')}}</p>
                         </div>
                     </div>

                     <div class="config-item" v-show="cluster.clock.autoSync">
                         <div class="item-label color-border">{{t('clusters_cluster_settings_index@NTP时钟服务器')}}</div>
                         <div class="item-content">
                             <input type="text" name="clockServer" v-model="cluster.clock.server" maxlength="100"/>
                             <p class="comment">{{t('clusters_cluster_settings_index@可选项默认使用')}}<code-label>pool.ntp.org</code-label>。</p>
                         </div>
                     </div>

                     <div class="config-item" v-show="cluster.clock.autoSync">
                         <div class="item-content">
                             <checkbox name="clockCheckChrony" :v-value="1" v-model="cluster.clock.checkChrony">{{t('clusters_cluster_settings_index@检查Chrony')}}</checkbox>
                             <p class="comment">{{t('clusters_cluster_settings_index@选中后表示如果chrony')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-content">
                             <checkbox name="autoRemoteStart" :v-value="1" v-model="cluster.autoRemoteStart">{{t('clusters_cluster_settings_index@自动远程启动')}}</checkbox>
                             <p class="comment">{{t('clusters_cluster_settings_index@当检测到节点离线时')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-content">
                             <checkbox name="autoInstallNftables" :v-value="1" v-model="cluster.autoInstallNftables">{{t('clusters_cluster_settings_index@自动安装nftables')}}</checkbox>
                             <p class="comment">{{t('clusters_cluster_settings_index@选中后表示在Linux系统中自动尝试安装')}}<code-label>nftables</code-label>{{t('clusters_cluster_settings_index@用于安全防御')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-content">
                             <checkbox name="autoSystemTuning" :v-value="1" v-model="cluster.autoSystemTuning">{{t('clusters_cluster_settings_index@自动调节系统参数')}}</checkbox>
                             <p class="comment">{{t('clusters_cluster_settings_index@选中后表示自动调整Linux内核等参数')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-content">
                             <checkbox name="autoTrimDisks" :v-value="1" v-model="cluster.autoTrimDisks">{{t('clusters_cluster_settings_index@自动执行硬盘TRIM')}}</checkbox>
                             <p class="comment">{{t('clusters_cluster_settings_index@执行TRIM后可以移除SSD硬盘中无效的数据')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-label">{{t('clusters_cluster_settings_index@节点IO最大读并发数')}}</div>
                         <div class="item-content">
                             <input name="maxConcurrentReads" v-model="cluster.maxConcurrentReads" type="text" style="width: 5em" maxlength="4"/>
                             <p class="comment">{{t('clusters_cluster_settings_index@0表示根据系统资源自动计算读')}}</p>
                         </div>
                     </div>

                     <div class="config-item">
                         <div class="item-label">{{t('clusters_cluster_settings_index@节点IO最大写并发数')}}</div>
                         <div class="item-content">
                             <input name="maxConcurrentWrites" v-model="cluster.maxConcurrentWrites" type="text" style="width: 5em" maxlength="4"/>
                             <p class="comment">{{t('clusters_cluster_settings_index@0表示根据系统资源自动计算写')}}</p>
                         </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>