{$layout}
{$template "menu"}

<div class="margin"></div>
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<table class="ui table selectable definition">
		<tr>
			<td>名称 *</td>
			<td>
				<input type="text" name="name" maxlength="100" ref="focus"/>
                <p class="comment">起一个容易识别的名称。</p>
			</td>
		</tr>

		<tr>
			<td class="title">认证方式</td>
			<td>
				<select class="ui dropdown" style="width:10em" name="method" v-model="method">
					<option v-for="method in methods" :value="method.value">{{method.name}}</option>
				</select>
			</td>
		</tr>

		<!-- 用户名/密码 -->
		<tbody v-if="method == 'user'">
			<tr>
				<td>SSH用户名 *</td>
				<td>
					<input type="text" name="username" maxlength="100"/>
					<p class="comment">SSH登录用户名。</p>
				</td>
			</tr>
			<tr>
				<td>SSH密码</td>
				<td><input type="password" name="password" maxlength="100"/>
				<p class="comment">SSH登录用户密码。</p> </td>
			</tr>
		</tbody>

		<!-- 私钥 -->
		<tbody v-if="method == 'privateKey'">
            <tr>
                <td>SSH用户名 *</td>
                <td>
                    <input type="text" name="username" maxlength="100"/>
                    <p class="comment">SSH登录用户名。</p>
                </td>
            </tr>
			<tr>
				<td>RSA私钥 *</td>
				<td>
					<textarea name="privateKey"></textarea>
					<p class="comment">用来生成登录SSH公钥的私钥</p>
				</td>
			</tr>
		</tbody>

		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
			<tr>
				<td>备注</td>
				<td>
					<textarea name="description" rows="3"></textarea>
				</td>
			</tr>
		</tbody>
	</table>
	<submit-btn></submit-btn>
</form>