{$layout}
{$template "/first-menu"}

{$template "menu"}

<form class="ui form">
	<b-steps :steps="[
					{label: t('acme_create@选择申请方式'), key: 'prepare'},
					{label: t('acme_create@选择ACME用户'), key: 'user'},
					{label: t('acme_create@填写域名信息'), key: 'dns'},
					{label: t('acme_create@完成'), key: 'finish'},
			]" :current="step"></b-steps>

	<!-- {{t('acme_create@准备工作')}} -->
	<div v-show="step == 'prepare'">
		<table class="ui table definition selectable">
			<tr>
				<td class="title">{{t('acme_create@认证方式')}} *</td>
				<td>
					<div style="margin-bottom: 1em">
						<radio name="authType" :v-value="'http'" v-model="authType">{{t('acme_create@使用HTTP认证')}}</radio> &nbsp;
						<radio name="authType" :v-value="'dns'" v-model="authType">{{t('acme_create@使用DNS认证')}}</radio>
					</div>
					<div v-if="authType == 'http'">
						<p class="comment">
							{{t('acme_create@HTTP认证提示1')}}<code-label>/.well-known/acme-challenge/{{t('acme_create@令牌')}}</code-label>{{t('acme_create@HTTP认证提示2')}}
						</p>
					</div>
					<div v-if="authType == 'dns'">
						<p class="comment">{{t('acme_create@DNS认证提示1')}} -- <a href="/dns/providers"
								target="_blank">"{{t('acme_create@DNS服务商')}}"</a> {{t('acme_create@DNS认证提示2')}}</p>
					</div>
				</td>
			</tr>
			<tr>
				<td>{{t('acme_create@选择平台用户')}}</td>
				<td>
					<user-selector @change="changePlatformUser"></user-selector>
					<p class="comment">{{t('acme_create@选择平台用户提示')}}</p>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<a href="" @click.prevent="showPrepareMoreOptionsVisible">{{t('certs_index@更多选项')}}<i class="icon angle"
							:class="{up: prepareMoreOptionsVisible, down: !prepareMoreOptionsVisible}"></i></a>
				</td>
			</tr>
			<tbody v-show="prepareMoreOptionsVisible">
				<tr>
					<td>{{t('acme_create@回调URL')}}</td>
					<td>
						<input type="text" name="authURL" v-model="authURL" maxlength="200" />
						<p class="comment">{{t('acme_create@回调URL提示')}}</p>
					</td>
				</tr>
			</tbody>
		</table>

		<div class="button-group">
			<button type="button" class="ui button primary" @click.prevent="doPrepare">{{t('acme_create@下一步')}}</button>
		</div>
	</div>

	<!-- {{t('acme_create@选择用户')}} -->
	<div v-show="step == 'user'">
		<table class="ui table definition selectable">
			<tr>
				<td class="title">{{t('acme_create@选择证书服务商')}} *</td>
				<td>
					<b-select v-model="providerCode" @change="changeProvider" auto-width :options="[
										{label: t('acme_create@选择服务商'), value: ''},
										...providers.map(provider => ({
											label: provider.name,
											value: provider.code,
										}))
									]"></b-select>
				</td>
			</tr>
			<tr v-if="providerCode.length > 0">
				<td class="title">{{t('acme_create@选择ACME用户')}}</td>
				<td>
					<div v-if="users.length > 0">
						<div class="ui fields inline">
							<div class="ui field">
								<b-select v-model="userId" :options="[
												{label: t('http-remote-addr-config-box@请选择'), value: '0'},
												...users.filter(user=>user.providerCode == providerCode).map(user => ({
													label: user.email + (user.description??''),
													value: user.id,
												}))
											]"></b-select>
							</div>
							<div class="ui field">
								<a href="" @click.prevent="createUser">[{{t('acme_create@新创建')}}]</a>
							</div>
						</div>
					</div>
					<div v-else><a href="" @click.prevent="createUser"><span
								v-if="platformUserId > 0">{{t('certs_selectPopup@当前用户下')}}</span>{{t('acme_create@暂无ACME用户点此创建')}}</a></div>
					<p class="comment">{{t('acme_create@选择ACME用户提示')}}</p>
				</td>
			</tr>
		</table>

		<div class="button-group">
			<button type="button" class="ui button" @click.prevent="goPrepare">{{t('acme_create@上一步')}}</button>
			<button type="button" class="ui button primary" @click.prevent="doUser">{{t('acme_create@下一步')}}</button>
		</div>
	</div>

	<!-- {{t('acme_create@设置域名解析')}} -->
	<div v-show="step == 'dns'">
		<table class="ui table definition selectable">
			<tr v-show="authType == 'dns'">
				<td class="title">{{t('acme_create@选择DNS服务商')}} *</td>
				<td>
					<div v-if="dnsProviders.length > 0">
						<b-select v-model="dnsProviderId" auto-width :options="[
										{label: t('http-remote-addr-config-box@请选择'), value: '0'},
										...dnsProviders.map(provider => ({
											label: (provider.name??'') + '（' + (provider.typeName??'') + '）',
											value: provider.id,
										}))
									]"></b-select>
					</div>
					<div v-else>
						<span>{{t('acme_create@暂无DNS服务商')}}<a href="/dns/providers">[{{t('certs_index@现在去添加')}}]</a>。</span>
					</div>
					<p class="comment">{{t('acme_create@选择DNS服务商提示')}}</p>
				</td>
			</tr>
			<tr v-show="authType == 'dns'">
				<td>{{t('acme_create@顶级域名')}} *</td>
				<td>
					<input type="text" maxlength="100" v-model="dnsDomain" />
					<p class="comment">{{t('acme_create@顶级域名提示')}}</p>
				</td>
			</tr>
			<tr>
				<td class="title">{{t('acme_create@证书域名列表')}} *</td>
				<td>
					<domains-box :v-support-wildcard="authType == 'dns'" @change="changeDomains"></domains-box>
					<p class="comment">{{t('acme_create@证书域名列表提示1')}}<span v-if="authType == 'dns'">{{t('acme_create@证书域名列表提示2')}}</span><span
							v-if="authType == 'http'">{{t('acme_create@证书域名列表提示3')}}</span>。</p>
				</td>
			</tr>
			<tr>
				<td>{{t('acme_index_js@自动续期')}}</td>
				<td>
					<checkbox v-model="autoRenew"></checkbox>
					<p class="comment">{{t('acme_create@自动续期提示')}}</p>
				</td>
			</tr>
		</table>

		<div class="button-group">
			<button type="button" class="ui button" @click.prevent="goUser">{{t('acme_create@上一步')}}</button>
			<button type="button" class="ui button primary" @click.prevent="doDNS" v-if="!isRequesting">{{t('acme_create@下一步')}}</button>
			<button type="button" class="ui button primary disabled" v-if="isRequesting">{{t('acme_create@提交中提示')}}</button>
		</div>
	</div>

	<!-- {{t('acme_create@完成')}} -->
	<div v-show="step == 'finish'">
		<div class="success-box">
			<p><span class="green">{{t('acme_create@证书申请成功提示1')}}</span>{{t('acme_create@证书申请成功提示2')}} <a href="" @click.prevent="viewCert">{{t('acme_create@点击这里')}}</a>
				{{t('acme_create@证书申请成功提示3')}}</p>
		</div>

		<div class="button-group">
			<button type="button" class="ui button primary" @click.prevent="doFinish">{{t('acme_create@返回')}}</button>
		</div>
	</div>
</form>