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

<div class="right-box with-menu">
    <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"><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 green" v-if="resp != null && resp.isOk">连接成功！</div>
        <div class="ui message red" v-if="resp != null && !resp.isOk">连接失败：{{resp.error}}</div>

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