{$layout}
{$template "/clusters/cluster/node/node_menu"}
{$template "/left_menu_with_menu"}
<div class="left-right-box-container">

    <div class="right-box">
        <form class="ui form ssh-settings-form" data-tea-action="$" data-tea-success="success">
            <csrf-token></csrf-token>
            <input type="hidden" name="nodeId" :value="node.id"/>
            <input type="hidden" name="loginId" :value="loginId"/>
            
            <div class="config-section">
                <div class="section-title">
                    <i class="pi pi-terminal"></i> {{t('ssh_index@SSH连接配置')}}
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('ssh_index@SSH主机地址')}}</div>
                    <div class="item-content">
                        <input type="text" name="sshHost" maxlength="64" v-model="sshHost" class="ui input"/>
                        <p class="comment"><span v-if="hostIsAutoFilled" class="red"><strong>{{t('ssh_index@已自动填充')}}</strong>，{{t('ssh_index@需要点击保存按钮后生效')}}</span>{{t('ssh_index@比如1921681100')}}</p>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('ssh_index@SSH主机端口')}}</div>
                    <div class="item-content">
                        <input type="text" name="sshPort" maxlength="5" v-model="sshPort" class="ui input"/>
                        <p class="comment">{{t('ssh_index@比如22')}}</p>
                    </div>
                </div>
                
                <div class="config-item">
                    <div class="item-label">{{t('ssh_index@SSH登录认证')}}</div>
                    <div class="item-content">
                        <grant-selector :v-grant="grant" :v-node-cluster-id="clusterId"></grant-selector>
                    </div>
                </div>
            </div>
            
            <div class="message-section">
                <div class="ui message" v-if="isTesting">{{t('ssh_index@正在测试连接')}} ...</div>
                <div class="ui message success" v-if="resp != null && resp.isOk">{{t('ssh_index@连接成功')}}</div>
                <div class="ui message error" v-if="resp != null && !resp.isOk">{{t('ssh_index@连接失败')}}{{resp.error}}</div>
            </div>
            
            <div class="form-actions">
                <submit-btn></submit-btn>
            </div>
        </form>
    </div>
</div>