{$layout}
{$template "menu"}

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<input type="hidden" name="nodeId" :value="node.id"/>
	
	<div class="config-section">
	    <div class="section-title">{{t("settings_db_nodes_update@修改数据库节点")}}</div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t("settings_db_nodes_update@节点名称")}} *</div>
	        <div class="item-content">
				<input type="text" name="name" maxlength="100" ref="focus" v-model="node.name" placeholder="例如：主数据库节点"/>
				<p class="comment">{{t("settings_db_nodes_update@给节点起一个容易识别的名称。")}}</p>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t("settings_db_nodes_update@数据库引擎")}}</div>
	        <div class="item-content">
				<b-select
					name="dbEngine"
					v-model="node.dbEngine"
					auto-width
					:options="[
						{label: 'MySQL', value: 'MySQL'},
						{label: 'PostgreSQL', value: 'PostgreSQL'},
					]"
				></b-select>
				<p class="comment"></p>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t("settings_db_nodes_update@主机地址")}}<em>（Host）</em> *</div>
	        <div class="item-content">
				<input type="text" name="host" placeholder="例如：127.0.0.1" maxlength="100" v-model="node.host"/>
				<p class="comment">{{t("settings_db_nodes_update@连接数据库的主机地址，通常是域名或者IP；出于性能考虑，请使用局域网内的数据库。")}}</p>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t("settings_db_nodes_update@数据库端口")}}<em>（Port）</em> *</div>
	        <div class="item-content">
				<input type="text" name="port" placeholder="例如：3306" maxlength="5" style="width:6em" v-model="node.port"/>
				<p class="comment">{{t("settings_db_nodes_update@连接数据库的端口。")}}</p>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t("settings_db_nodes_update@数据库名称")}}<em>（Database）</em> *</div>
	        <div class="item-content">
				<input type="text" name="database" placeholder="例如：edge_logs" maxlength="100" v-model="node.database"/>
				<p class="comment">{{t("settings_db_nodes_update@要写入日志的数据库名称，需要事先创建好，而且需要有创建新表和读写数据的权限。建议命名为edge_logs。")}}</p>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t("settings_db_nodes_update@用户名")}}<em>（Username）</em> *</div>
	        <div class="item-content">
				<input type="text" name="username" placeholder="例如：root" v-model="node.username"/>
				<p class="comment">{{t("settings_db_nodes_update@连接数据库的用户名。")}}</p>
	        </div>
	    </div>
	    
	    <div class="config-item">
	        <div class="item-label">{{t("settings_db_nodes_update@密码")}}<em>（Password）</em></div>
	        <div class="item-content">
				<input type="password" name="password" placeholder="连接数据库的密码" v-model="node.password"/>
				<p class="comment">{{t("settings_db_nodes_update@连接数据库的密码。")}}</p>
	        </div>
	    </div>
	</div>
	
	<div class="config-section">
        <div class="config-item">
            <div class="item-label">{{t("settings_db_nodes_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("settings_db_nodes_update@详细描述")}}</div>
                <div class="item-content">
                    <textarea rows="3" name="description" v-model="node.description" placeholder="关于此数据库节点的描述"></textarea>
                </div>
            </div>
            
            <div class="config-item">
                <div class="item-label">{{t("settings_db_nodes_update@启用当前数据库")}}</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>