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

<div class="left-right-box-container">
	<div class="right-box">
		<div class="config-section">
			<div class="section-title">
				<i class="icon server"></i>
				{{t('clusters_cluster_createBatch@批量创建节点')}}
			</div>
			<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
				<csrf-token></csrf-token>
				<input type="hidden" name="clusterId" :value="clusterId"/>

				<div v-if="quota.maxNodes > 0 && quota.leftNodes >= 0" class="config-item">
					<div class="item-label"></div>
					<div class="item-content">
						<span style="color: #959da6">{{t('clusters_cluster_createBatch@当前授权最多支持节点数N个剩余节点数M个', [quota.maxNodes, quota.leftNodes])}}</span>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('clusters_cluster_createBatch@节点IP列表')}}</div>
					<div class="item-content">
						<textarea name="ipList" rows="20" :placeholder="t('clusters_cluster_createBatch@IP列表每行一个IP')" ref="ipList"></textarea>
						<p class="comment">{{t('clusters_cluster_createBatch@每行一个节点IP')}}</p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('clusters_cluster_createBatch@所属分组')}}</div>
					<div class="item-content">
						<node-group-selector :v-cluster-id="clusterId"></node-group-selector>
						<p class="comment">{{t('clusters_cluster_createBatch@用来筛选节点')}}<span v-if="teaIsPlus">{{t('clusters_cluster_createBatch@同时可以在分组中设置二级缓存节点')}}</span>。</p>
					</div>
				</div>

				<div class="config-item">
					<div class="item-label">{{t('clusters_cluster_createBatch@所属区域')}}</div>
					<div class="item-content">
						<node-region-selector></node-region-selector>
						<p class="comment">{{t('clusters_cluster_createBatch@设置区域后可以根据区域进行流量统计和计费')}}</p>
					</div>
				</div>

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