{$layout}
{$template "/clusters/cluster/node/node_menu"}

<div class="left-right-box-container">
    {$template "/left_menu"}

    <div class="right-box">
        <form class="ui 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"/>

            <table class="ui table definition selectable">
                <tr>
                    <td class="title">SSH主机地址</td>
                    <td>
                        <input type="text" name="sshHost" maxlength="64" v-model="sshHost"/>
                        <p class="comment"><span v-if="hostIsAutoFilled" class="red"><strong>已自动填充</strong>，需要点击"保存"按钮后生效。</span>比如192.168.1.100。</p>
                    </td>
                </tr>
                <tr>
                    <td>SSH主机端口</td>
                    <td>
                        <input type="text" name="sshPort" maxlength="5" v-model="sshPort"/>
                        <p class="comment">比如22。</p>
                    </td>
                </tr>
                <tr>
                    <td>SSH登录认证</td>
                    <td>
                        <grant-selector :v-grant="grant" :v-node-cluster-id="clusterId"></grant-selector>
                    </td>
                </tr>
            </table>

            <div class="ui message" v-if="isTesting">正在测试连接 ...</div>
            <div class="ui message success" v-if="resp != null && resp.isOk">连接成功！</div>
            <div class="ui message error" v-if="resp != null && !resp.isOk">连接失败：{{resp.error}}</div>

            <submit-btn></submit-btn>
        </form>
    </div>
</div>