{$layout}
{$template "grant_menu"}

<div class="margin"></div>
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
	<input type="hidden" name="grantId" :value="grant.id"/>
	<table class="ui table selectable definition">
		<tr>
			<td>{{t('grants_createPopup@名称')}} *</td>
			<td>
				<input type="text" name="name" maxlength="100" ref="focus" v-model="grant.name"/>
                <p class="comment">{{t('grants_createPopup@为当前认证信息起一个容易识别的名称')}}。</p>
			</td>
		</tr>

		<tr>
			<td class="title">{{t('grants_createPopup@认证方式')}}</td>
			<td>
				<b-select
					style="width:10em"
					name="method"
					v-model="method"
					:options="[
						...methods.map(method => ({
							label: method.name??'',
							value: method.value??'',
						}))
					]"
				></b-select>
				
				<!-- <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>{{t('grants_createPopup@SSH用户名')}} *</td>
				<td>
					<input type="text" name="username" maxlength="100" v-model="grant.username"/>
					<p class="comment">{{t('grants_createPopup@SSH登录用户名')}}。</p>
				</td>
			</tr>
			<tr>
				<td>{{t('grants_createPopup@SSH密码')}}</td>
				<td><input type="password" name="password" maxlength="100" v-model="grant.password"/>
				<p class="comment">{{t('grants_createPopup@SSH登录用户密码')}}。<mask-warning></mask-warning></p> </td>
			</tr>
		</tbody>

		<!-- 私钥 -->
		<tbody v-if="method == 'privateKey'">
            <tr>
                <td>{{t('grants_createPopup@SSH用户名')}} *</td>
                <td>
                    <input type="text" name="username" maxlength="100" v-model="grant.username"/>
                    <p class="comment">{{t('grants_createPopup@SSH登录用户名')}}。</p>
                </td>
            </tr>
			<tr>
				<td>{{t('grants_createPopup@RSA私钥')}} *</td>
				<td>
					<file-textarea name="privateKey" v-model="grant.privateKey" spellcheck="false" :placeholder="t('grants_createPopup@填入RSA私钥内容或者拖动私钥文件到当前框中')"></file-textarea>
					<p class="comment">{{t('grants_createPopup@用来生成登录SSH公钥的私钥')}}。<mask-warning></mask-warning></p>
				</td>
			</tr>
            <tr>
                <td>{{t('grants_createPopup@私钥密码')}}<br/><em>（Passphrase）</em></td>
                <td>
                    <input type="password" name="passphrase" maxlength="200" v-model="grant.passphrase"/>
                    <p class="comment">{{t('grants_createPopup@为私钥设置了密码Passphrase后需要填写')}}。</p>
                </td>
            </tr>
		</tbody>
        <tr v-if="grant.username != 'root'">
            <td>{{t('grants_createPopup@执行sudo')}}</td>
            <td>
                <checkbox name="su" v-model="grant.su"></checkbox>
                <p class="comment">{{t('grants_createPopup@非root的用户可以使用')}}<code-label>sudo</code-label>{{t('grants_createPopup@获得更高权限来执行命令请确保当前用户已经加入到sudo分组中')}}。</p>
            </td>
        </tr>
		<tr>
			<td>{{t('grants_createPopup@备注')}}</td>
			<td>
				<textarea name="description" rows="3" v-model="grant.description"></textarea>
			</td>
		</tr>
	</table>
	<submit-btn></submit-btn>
</form>