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

<div class="left-right-box-container">
    <div class="right-box">
        <form method="post" class="ui form node-update-form" data-tea-action="$" data-tea-success="success">
            <input type="hidden" name="nodeId" :value="node.id"/>
            <div class="config-section">
                <div class="section-title">
                    <i class="pi pi-server"></i> {{t('clusters_cluster_node_update@基本信息')}}
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_node_update@节点名称')}}</div>
                    <div class="item-content">
                        <input type="text" name="name" maxlength="50" ref="focus" v-model="node.name" class="ui input"/>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_node_update@所属集群')}}</div>
                    <div class="item-content">
                        <div class="cluster-labels">
                            <span v-if="node.primaryCluster != null" class="ui label basic small">{{node.primaryCluster.name}}</span>
                            <span v-if="node.secondaryClusters.length > 0" v-for="cluster in node.secondaryClusters" class="ui label basic small grey">{{cluster.name}}</span>
                        </div>
                        <div class="action-buttons">
                            <a href="" @click.prevent="updateClusters" class="action-button">
                                <i class="pi pi-pencil"></i> {{t('clusters_cluster_node_update@修改')}}
                            </a>
                        </div>
                        <div v-show="showClustersBox" class="clusters-selector">
                            <node-clusters-selector :v-primary-cluster="node.primaryCluster" :v-secondary-clusters="node.secondaryClusters" @change="changeClusters"></node-clusters-selector>
                        </div>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_node_update@IP地址')}}</div>
                    <div class="item-content">
                        <node-ip-addresses-box :v-ip-addresses="ipAddresses" :v-node-id="node.id"></node-ip-addresses-box>
                        <p class="comment">{{t('clusters_cluster_node_update@用于访问节点和域名解析等')}}</p>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_node_update@所属分组')}}</div>
                    <div class="item-content">
                        <node-group-selector :v-cluster-id="clusterId" :v-group="node.group"></node-group-selector>
                        <p class="comment">{{t('clusters_cluster_node_update@用来筛选节点')}}<span v-if="teaIsPlus">{{t('clusters_cluster_node_update@同时可以在分组中设置二级缓存节点')}}</span>。</p>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('clusters_cluster_node_update@所属区域')}}</div>
                    <div class="item-content">
                        <node-region-selector :v-region="node.region"></node-region-selector>
                        <p class="comment">{{t('clusters_cluster_node_update@设置区域后可以根据区域进行流量统计和计费')}}</p>
                    </div>
                </div>
            </div>
            
            <div class="config-section">
                <div class="section-title">
                    <i class="pi pi-cog"></i> {{t('clusters_cluster_node_update@高级选项')}}
                    <!-- <more-options-indicator class="more-options-toggle"></more-options-indicator> -->
                </div>
                
                <div >
                    <div class="config-item" v-show="teaIsPlus && canUpdateLevel">
                        <div class="item-label">{{t('clusters_cluster_node_update@级别')}}</div>
                        <div class="item-content">
                            <node-level-selector :v-node-level="node.level" @change="changeLevel"></node-level-selector>
                        </div>
                    </div>
                    
                    <div class="config-item" v-show="teaIsPlus && canUpdateLevel && nodeLevel > 1">
                        <div class="item-label">{{t('clusters_cluster_node_update@L2级别访问地址')}}</div>
                        <div class="item-content">
                            <values-box name="lnAddrs" :v-values="node.lnAddrs" :placeholder="t('clusters_cluster_node_update@IP地址Placeholder')"></values-box>
                            <p class="comment">{{t('clusters_cluster_node_update@L2地址说明')}}</p>
                        </div>
                    </div>
                    
                    <div class="config-item">
                        <!-- <div class="item-label">同步IP名单</div> -->
                        <div class="item-content">
                            <checkbox :v-value="1" name="enableIPLists" v-model="node.enableIPLists">{{t('clusters_cluster_node_update@启用IP名单同步')}}</checkbox>
                            <p class="comment">{{t('clusters_cluster_node_update@IP名单同步说明')}}</p>
                        </div>
                    </div>
                    
                    <div class="config-item">
                        <!-- <div class="item-label">启用节点</div> -->
                        <div class="item-content">
                            <checkbox name="isOn" :v-value="1" v-model="node.isOn">{{t('clusters_cluster_node_update@启用节点')}}</checkbox>
                            <p class="comment">{{t('clusters_cluster_node_update@启用节点说明')}}</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="form-actions">
                <submit-btn></submit-btn>
            </div>
        </form>
    </div>
</div>