{$layout}

{$template "node_menu"}

<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="loginId" :value="loginId"/>

    <div class="config-section">
        <div class="section-title">{{t('node_update@修改节点信息')}}</div>

        <div class="config-item">
            <div class="item-label">{{t('node_update@节点名称')}} *</div>
            <div class="item-content">
                <input type="text" name="name" maxlength="50" ref="focus" v-model="node.name"/>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('node_update@IP地址')}} *</div>
            <div class="item-content">
                <node-ip-addresses-box role="ns" :v-ip-addresses="node.ipAddresses"></node-ip-addresses-box>
                <p class="comment">{{t('node_update@用于访问节点和域名解析等')}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('node_update@所属集群')}}</div>
            <div class="item-content">
                <b-select
                    style="width:10em"
                    name="clusterId"
                    v-model="clusterId"
                    :options="[
                        ...clusters.map(cluster => ({
                            label: cluster.name,
                            value: cluster.id,
                        }))
                    ]"
                ></b-select>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t('node_update@更多选项')}}</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('node_update@SSH主机地址')}}</div>
                <div class="item-content">
                    <input type="text" name="sshHost" maxlength="64" v-model="sshHost"/>
                    <p class="comment">{{t('node_update@比如1921681100')}}</p>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('node_update@SSH主机端口')}}</div>
                <div class="item-content">
                    <input type="text" name="sshPort" maxlength="5" v-model="sshPort"/>
                    <p class="comment">{{t('node_update@比如22')}}</p>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('node_update@SSH登录认证')}}</div>
                <div class="item-content">
                    <grant-selector :v-grant="grant" :v-ns-cluster-id="clusterId"></grant-selector>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('node_update@API节点地址')}}</div>
                <div class="item-content">
                    <div style="margin-bottom: 0.5em">
                        <api-node-addresses-box :v-name="'apiNodeAddrsJSON'" :v-addrs="apiNodeAddrs"></api-node-addresses-box>
                    </div>
                    <p class="comment">{{t('node_update@当前节点单独使用的API节点设置')}}<pro-warning-label></pro-warning-label></p>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('node_update@启用当前节点')}}</div>
                <div class="item-content">
                    <checkbox name="isOn" :v-value="1" v-model="node.isOn"></checkbox>
                    <p class="comment">{{t('node_update@如果不启用此节点此节点上的所有网站将不能访问')}}</p>
                </div>
            </div>
        </div>
    </div>

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