{$layout "layout_popup"}

<!-- <h3>申请免费证书</h3> -->
<form method="post" class="ui form" data-tea-success="success" data-tea-action="$" data-tea-timeout="300" data-tea-before="beforeSubmit" data-tea-fail="fail">
	<csrf-token></csrf-token>

	<table class="ui table definition selectable">
		<tr>
			<td class="title">证书包含的域名 *</td>
			<td>
				<span v-if="serverNames.length == 0" class="disabled">还没有需要申请证书的域名，暂时不能申请。</span>
				<div v-if="serverNames.length > 0">
					<div v-for="(serverName, index) in serverNames" class="ui tiny basic label">
						<input type="hidden" name="serverNames" :value="serverName"/>
                        {{serverName}}
						<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a>
					</div>
				</div>
			</td>
		</tr>
		<tr v-if="!asyncCreateCert">
			<td>证书用户 *</td>
			<td>
				<div v-if="users.length > 0">
					<b-select
						name="userId"
						v-model="userId"
						auto-width
						:options="[
							{label: '[请选择]', value: '0'},
							...users.map(user => ({
								label: (user.email??'') + (user.description??''),
								value: user.id,
							}))
						]"
					></b-select>

					<!-- <select class="ui dropdown auto-width" name="userId" v-model="userId">
						<option value="0">[请选择]</option>
						<option v-for="user in users" :value="user.id">{{user.email}}{{user.description}}</option>>
					</select> -->
					<p class="comment">用来申请证书的用户。</p>
				</div>

				<div v-if="users.length == 0">
					<input type="text" name="userEmail" maxlength="100" placeholder="用户E-mail" ref="focus"/>
					<p class="comment">用来申请证书的用户邮箱，可以任意填写，只要格式正确即可。</p>
				</div>
			</td>
		</tr>
		<tr>
			<td>拆分域名</td>
			<td>
				<checkbox name="splitDomain" v-model="splitDomain">启用</checkbox>
				<p class="comment">选中后，表示根据主域名拆分域名到多个证书，如果域名数量较多，建议拆分</p>
			</td>
		</tr>
		<tr>
			<td>异步申请证书</td>
			<td>
				<checkbox name="asyncCreateCert" v-model="asyncCreateCert">启用</checkbox>
				<p class="comment">建议域名多的时候勾选，异步并发执行证书申请，申请成功后会自动绑定到服务</p>
			</td>
		</tr>
		<tr v-if="asyncCreateCert">
			<td>证书类型</td>
			<td class="ui fields inline">
				<div class="ui field">
					<b-select
						name="providerCode"
						v-model="providerCode"
						:options="[
							{label: 'Let\'s Encrypt', value: 'letsencrypt'},
						]"
					></b-select>

					<!-- <select class="ui dropdown" name="providerCode" v-model="providerCode">
						<option value="letsencrypt">Let's Encrypt</option>
					</select> -->
				</div>
				<p class="comment">选择证书类型。</p>
			</td>
		</tr>
	</table>

	<submit-btn v-if="!isRequesting">提交</submit-btn>
	<button class="ui button" type="button" v-if="isRequesting">处理中...</button>
</form>