{$layout}
{$template "menu"}

<div class="base-container">
	<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
		<div class="config-section">
			<h4 class="section-title">
				<i class="pi pi-key"></i>
				{{t('grants_create@认证信息')}}
			</h4>

			<div class="config-item">
				<div class="item-label">{{t('grants_create@名称')}} <span class="red">*</span></div>
				<div class="item-content">
					<input type="text" name="name" maxlength="100" ref="focus" />
					<p class="comment">{{t('grants_create@为当前认证信息起一个容易识别的名称')}}。</p>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('grants_create@认证方式')}}</div>
				<div class="item-content">
					<b-select name="method" v-model="method" :options="[
							...methods.map(method => ({
								label: method.name??'',
								value: method.value??'',
							}))
						]"></b-select>
				</div>
			</div>
		</div>

		<!-- 用户名/密码认证方式 -->
		<div v-if="method == 'user'" class="config-section">
			<h4 class="section-title">
				<i class="pi pi-user"></i>
				{{t('grants_create@用户名密码')}}
			</h4>

			<div class="config-item">
				<div class="item-label">{{t('grants_create@SSH用户名')}} <span class="red">*</span></div>
				<div class="item-content">
					<input type="text" name="username" maxlength="100" value="root" v-model="username" />
					<p class="comment">{{t('grants_create@SSH登录用户名')}}。</p>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('grants_create@SSH密码')}}</div>
				<div class="item-content">
					<input type="password" name="password" maxlength="100" />
					<p class="comment">{{t('grants_create@SSH登录用户密码')}}。<mask-warning></mask-warning></p>
				</div>
			</div>
		</div>

		<!-- 私钥认证方式 -->
		<div v-if="method == 'privateKey'" class="config-section">
			<h4 class="section-title">
				<i class="pi pi-key"></i>
				{{t('grants_create@私钥认证')}}
			</h4>

			<div class="config-item">
				<div class="item-label">{{t('grants_create@SSH用户名')}} <span class="red">*</span></div>
				<div class="item-content">
					<input type="text" name="username" maxlength="100" value="root" v-model="username" />
					<p class="comment">{{t('grants_create@SSH登录用户名')}}。</p>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('grants_create@RSA私钥')}} <span class="red">*</span></div>
				<div class="item-content">
					<file-textarea name="privateKey" spellcheck="false" :placeholder="t('grants_create@填入RSA私钥内容或者拖动私钥文件到当前框中')"
						class="code-editor"></file-textarea>
					<p class="comment">{{t('grants_create@用来生成登录SSH公钥的私钥')}}。<mask-warning></mask-warning></p>
				</div>
			</div>

			<div class="config-item">
				<div class="item-label">{{t('grants_create@私钥密码')}}</div>
				<div class="item-content">
					<input type="password" name="passphrase" maxlength="200" />
					<p class="comment">{{t('grants_create@为私钥设置了密码（Passphrase）后需要填写')}}。</p>
				</div>
			</div>
		</div>

		<!-- 执行sudo选项 -->
		<div v-if="username != 'root'" class="config-section">
			<div class="config-item">
				<div class="item-label">{{t('grants_create@执行sudo')}}</div>
				<div class="item-content">
					<checkbox name="su" checked="checked"></checkbox>
					<p class="comment">{{t('grants_create@非root的用户可以使用')}}<code-label>sudo</code-label>{{t('grants_create@获得更高权限来执行命令，请确保当前用户已经加入到sudo分组中')}}。</p>
				</div>
			</div>
		</div>

		<!-- 更多选项 -->
		<div class="config-section">
			<div class="config-item">
				<div class="item-label">{{t('grants_create@备注')}}</div>
				<div class="item-content">
					<textarea name="description" rows="3"></textarea>
				</div>
			</div>
		</div>

		<div class="margin"></div>
		<submit-btn></submit-btn>
	</form>
</div>