{$layout "layout_popup"}

<!-- <h3>添加节点</h3> -->

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<table class="ui table definition selectable">
		<tr>
			<td class="title">{{t("settings_db_nodes_createPopup@节点名称")}} *</td>
			<td>
				<input type="text" name="name" maxlength="100" ref="focus"/>
				<p class="comment">{{t("settings_db_nodes_createPopup@给节点起一个容易识别的名称。")}}</p>
			</td>
		</tr>
		<tr>
			<td class="title">{{t("settings_db_nodes_createPopup@数据库引擎")}}</td>
			<td>
				<b-select
					name="dbEngine"
					auto-width
					v-model="dbEngine"
					:options="[
						{label: 'MySQL', value: 'MySQL'},
						{label: 'PostgreSQL', value: 'PostgreSQL'},
					]"
				></b-select>

				<!-- <select class="ui dropdown auto-width" name="dbEngine">
					<option value="MySQL">MySQL</option>
					<option value="PostgreSQL">PostgreSQL</option>
				</select> -->
				<p class="comment"></p>
			</td>
		</tr>
		<tr>
			<td>{{t("settings_db_nodes_createPopup@主机地址")}}<em>（Host）</em> *</td>
			<td>
				<input type="text" name="host" placeholder="" maxlength="100"/>
				<p class="comment">{{t("settings_db_nodes_createPopup@连接数据库的主机地址，通常是域名或者IP；出于性能考虑，请使用局域网内的数据库。")}}</p>
			</td>
		</tr>
		<tr>
			<td>{{t("settings_db_nodes_createPopup@数据库端口")}}<em>（Port）</em> *</td>
			<td>
				<input type="text" name="port" value="3306" maxlength="5" style="width:6em"/>
				<p class="comment">{{t("settings_db_nodes_createPopup@连接数据库的端口。")}}</p>
			</td>
		</tr>
		<tr>
			<td>{{t("settings_db_nodes_createPopup@数据库名称")}}<em>（Database）</em> *</td>
			<td>
				<input type="text" name="database" value="" maxlength="100" placeholder="比如 edge_logs"/>
				<p class="comment">{{t("settings_db_nodes_createPopup@要写入日志的数据库名称，需要事先创建好，而且需要有创建新表和读写数据的权限。建议命名为edge_logs。")}}</p>
			</td>
		</tr>
		<tr>
			<td>{{t("settings_db_nodes_createPopup@用户名")}}<em>（Username）</em> *</td>
			<td>
				<input type="text" name="username" value=""/>
				<p class="comment">{{t("settings_db_nodes_createPopup@连接数据库的用户名。")}}</p>
			</td>
		</tr>
		<tr>
			<td>{{t("settings_db_nodes_createPopup@密码")}}<em>（Password）</em></td>
			<td>
				<input type="password" name="password" value=""/>
				<p class="comment">{{t("settings_db_nodes_createPopup@连接数据库的密码。")}}</p>
			</td>
		</tr>
		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
			<tr>
				<td>{{t("settings_db_nodes_createPopup@详细描述")}}</td>
				<td>
					<textarea rows="3" name="description"></textarea>
				</td>
			</tr>
			<tr>
				<td>{{t("settings_db_nodes_createPopup@启用当前数据库")}}</td>
				<td>
					<checkbox name="isOn" :v-value="1" checked="checked"></checkbox>
				</td>
			</tr>
		</tbody>
	</table>
	<submit-btn></submit-btn>
</form>