{$layout}

{$template "menu"}
{$var "header"}
<link rel="stylesheet" href="/update.css" />
{$end}
<div class="ui warning message"><i class="p-message-icon pi pi-exclamation-triangle"></i>{{t('如果你修改了GRPC访问地址、端口、证书相关信息时，需要重启')}}<code-label>cdn1-api</code-label>{{t('进程（')}}<code-label>cdn1-node restart</code-label>{{t('）才能生效，并可能需要手工修改其他节点的配置信息。')}}</div>

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<input type="hidden" name="nodeId" :value="node.id"/>
	<input type="hidden" name="sslPolicyId" :value="node.sslPolicyId"/>
	
	<div class="config-section">
	    <div class="section-title">{{t('修改 API 节点')}}</div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t('节点名称')}} *</div>
	        <div class="item-content">
				<input type="text" name="name" maxlength="100" ref="focus" v-model="node.name" :placeholder="t('请输入节点名称')"/>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t('GRPC监听端口')}} *</div>
	        <div class="item-content">
				<network-addresses-box :v-name="'listensJSON'" :v-server-type="'httpWeb'" :v-addresses="node.listens" @change="changeListens" :v-from="'apiNode'"></network-addresses-box>
				<p class="comment">{{t('通过GRPC访问API节点进程监听的网络端口。')}}</p>
	        </div>
	    </div>
	    
	    <div class="config-item" v-if="hasHTTPS">
	        <div class="item-label">{{t('HTTPS证书')}} *</div>
	        <div class="item-content">
				<ssl-certs-box :v-certs="node.certs" :v-protocol="'https'"></ssl-certs-box>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t('GRPC访问地址')}} *</div>
	        <div class="item-content">
				<api-node-addresses-box :v-name="'accessAddrsJSON'" :v-addrs="node.accessAddrs"></api-node-addresses-box>
				<p class="comment">{{t('边缘节点和管理平台等外部节点访问API节点的网络地址，需要保证其他节点能够通过此地址访问到API节点服务。')}}<strong>{{t('访问地址里的端口号和监听端口通常一致，除非你做了端口转发。')}}</strong></p>
	        </div>
	    </div>
	</div>
	
	<div class="config-section">
	     <div class="config-item">
            <div class="item-label">{{t('更多选项')}}</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('开启HTTP API端口')}}</div>
                <div class="item-content">
                    <checkbox name="restIsOn" v-model="node.restIsOn">{{t('启用HTTP API')}}</checkbox>
                    <p class="comment">{{t('启用后用户可以通过HTTP API调用服务接口。')}}</p>
                </div>
            </div>
            
            <div class="config-item" v-if="node.restIsOn">
                <div class="item-label">{{t('HTTP API监听端口')}} *</div>
                <div class="item-content">
                    <network-addresses-box :v-name="'restListensJSON'" :v-server-type="'httpWeb'" @change="changeRestListens" :v-addresses="node.restListens"></network-addresses-box>
                    <p class="comment">{{t('HTTP API节点进程监听的网络端口，需要和当前节点的GRPC端口不同。')}}</p>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('描述')}}</div>
                <div class="item-content">
                    <textarea name="description" maxlength="200" rows="3" v-model="node.description" :placeholder="t('节点的简要说明')"></textarea>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('主节点')}}</div>
                <div class="item-content">
                    <checkbox name="isPrimary" v-model="node.isPrimary"></checkbox>
                    <p class="comment">{{t('设置为主节点后，主要的后台任务会在此节点上运行。')}}</p>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t('启用当前节点')}}</div>
                <div class="item-content">
                    <checkbox name="isOn" :v-value="1" v-model="node.isOn"></checkbox>
                </div>
            </div>
        </div>
	</div>
	
	<submit-btn></submit-btn>
</form>