{$layout "layout_popup"}

<!-- <h3>{{t('certs_uploadPopup@上传证书')}}</h3> -->

<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
    <input type="hidden" name="textMode" :value="textMode ? 1 : 0"/>
	<table class="ui table definition selectable">
		<tr>
			<td class="title">{{t('certs_uploadPopup@证书说明')}} *</td>
			<td>
				<input type="text" name="name" maxlength="100" ref="focus"/>
				<p class="comment">{{t('certs_uploadPopup@可以简单说明证书的用途')}}</p>
			</td>
		</tr>
        <tr>
            <td>{{t('certs_uploadPopup@所属用户')}}</td>
            <td>
                <user-selector :v-user-id="userId"></user-selector>
                <p class="comment">{{t('certs_uploadPopup@可选项，当前证书所属用户')}}</p>
            </td>
        </tr>
		<tr>
			<td>{{t('certs_uploadPopup@证书类型')}} *</td>
			<td>
				<b-select
					name="isCA"
					v-model="isCA"
					auto-width
					:options="[
						{label: t('certs_uploadPopup@加密证书'), value: '0'},
						{label: t('certs_uploadPopup@CA证书'), value: '1'},
					]"
				></b-select>
				
				<!-- <select class="ui dropdown auto-width" name="isCA" v-model="isCA">
					<option value="0">{{t('certs_uploadPopup@加密证书')}}</option>
					<option value="1">{{t('certs_uploadPopup@CA证书')}}</option>
				</select> -->
			</td>
		</tr>
		<tr>
			<td><span v-if="textMode">{{t('certs_uploadPopup@输入证书内容')}}</span><span v-else>{{t('certs_uploadPopup@选择证书文件')}}</span> *</td>
			<td>
				<!-- <input type="file" name="certFile" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert, .pem" v-if="!textMode"/> -->
				<file-upload name="certFile" accept="application/x-pem-file, application/pkcs10, application/x-pkcs12, application/x-x509-user-cert, application/x-x509-ca-cert, application/pkix-cert, .pem"  v-if="!textMode">
				</file-upload>
				<file-textarea class="wide-code" ref="certTextField" spellcheck="false" name="certText" :placeholder="t('certs_uploadPopup@BEGIN_CERTIFICATE')" v-if="textMode" style="font-size: 0.7em"></file-textarea>
				<p class="comment">
					<a href="" v-if="!textMode" @click.prevent="switchTextMode">[{{t('certs_uploadPopup@输入内容')}}]</a>
					<a href="" v-else @click.prevent="switchTextMode">[{{t('certs_uploadPopup@上传文件')}}]</a>
					。{{t('certs_uploadPopup@文件内容中通常含有BEGIN_CERTIFICATE')}}<span v-if="textMode">{{t('certs_uploadPopup@可以直接拖动证书文件到输入框')}}</span>。
				</p>
			</td>
		</tr>
		<tr v-show="isCA == 0">
			<td><span v-if="textMode">{{t('certs_uploadPopup@输入私钥内容')}}</span><span v-else>{{t('certs_uploadPopup@选择私钥文件')}}</span> *</td>
			<td>
				<!-- <input type="file" name="keyFile" accept="application/pkcs8, application/x-pem-file, .key, .pem" v-if="!textMode"/> -->
				<file-upload name="keyFile" accept="application/pkcs8, application/x-pem-file, .key, .pem"  v-if="!textMode">
				</file-upload>
				<file-textarea class="wide-code" spellcheck="false" name="keyText" :placeholder="t('certs_uploadPopup@BEGIN_RSA_PRIVATE_KEY')" v-if="textMode" style="font-size: 0.7em"></file-textarea>
				<p class="comment">
					<a href="" v-if="!textMode" @click.prevent="switchTextMode">[{{t('certs_uploadPopup@输入内容')}}]</a>
					<a href="" v-else @click.prevent="switchTextMode">[{{t('certs_uploadPopup@上传文件')}}]</a>
					。{{t('certs_uploadPopup@文件内容中通常含有BEGIN_RSA_PRIVATE_KEY')}}<span v-if="textMode">{{t('certs_uploadPopup@可以直接拖动私钥文件到输入框')}}</span>。
				</p>
			</td>
		</tr>
		<tr>
			<td colspan="2"><more-options-indicator></more-options-indicator></td>
		</tr>
		<tbody v-show="moreOptionsVisible">
			<tr>
				<td>{{t('certs_uploadPopup@详细说明')}}</td>
				<td>
					<textarea rows="3" name="description" maxlength="200"></textarea>
				</td>
			</tr>
			<tr>
				<td>{{t('certs_uploadPopup@启用当前证书')}}</td>
				<td>
					<checkbox name="isOn" :v-value="1" checked="checked"/>
				</td>
			</tr>
		</tbody>
	</table>
	<submit-btn></submit-btn>
</form>