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

<div class="left-right-box-container">
	<div class="right-box without-tabbar" style="padding: 0;">
		{$template "menu"}

		<div class="base-container">
			<!-- 证书分类菜单 -->
			<div class="b-first-menu">
				<div class="menu-container">
					<!-- <a :href="'/servers/certs/acme?userType=' + userType + '&keyword=' + keyword + '&userId=' + searchingUserId" class="item" :class="{active: type == ''}">
						<i class="icon list"></i>{{t('acme_index@所有任务')}}({{countAll}})
					</a> -->
					<a :href="'/servers/certs/acme?userType=' + userType + '&type=available&keyword=' + keyword + '&userId=' + searchingUserId" class="item" :class="{active: type == 'available'}">
						<i class="icon check circle"></i>{{t('certs_index@有效证书')}}({{countAvailable}})
					</a>
					<a :href="'/servers/certs/acme?userType=' + userType + '&type=expired&keyword=' + keyword + '&userId=' + searchingUserId" class="item" :class="{active: type == 'expired'}">
						<i class="icon exclamation circle"></i>{{t('certs_index@过期证书')}}<span :class="{red: countExpired > 0}">({{countExpired}})</span>
					</a>
					<a :href="'/servers/certs/acme?userType=' + userType + '&type=7days&keyword=' + keyword + '&userId=' + searchingUserId" class="item" :class="{active: type == '7days'}">
						<i class="icon warning"></i>{{t('certs_index@7天内过期')}}<span :class="{red: count7Days > 0}">({{count7Days}})</span>
					</a>
					<a :href="'/servers/certs/acme?userType=' + userType + '&type=30days&keyword=' + keyword + '&userId=' + searchingUserId" class="item" :class="{active: type == '30days'}">
						<i class="icon clock"></i>{{t('certs_index@30天内过期')}}({{count30Days}})
					</a>
				</div>
			</div>

			<!-- 搜索和过滤区域 -->
			<div class="base-form">
				<form class="ui form">
					<input type="hidden" name="userType" :value="userType"/>
					<div class="action-buttons">
						<div class="search-box">
							<div class="ui field">
								<input type="text" name="keyword" :placeholder="t('certs_index@域名说明等关键词')" class="ui input" v-model="keyword"/>
							</div>
							<div class="ui field">
								<user-selector :v-user-id="searchingUserId"></user-selector>
							</div>
							<div class="ui field">
								<button type="submit" class="ui button small">{{t('certs_index@搜索')}}</button>
								<a :href="Tea.url('.', {userType:userType})" v-if="keyword.length > 0 || searchingUserId > 0" class="ui button small basic">{{t('certs_index@清除条件')}}</a>
							</div>
							<div class="ui field">
							
							</div>
						</div>
					</div>
				</form>

				<!-- 用户类型选择 -->
				<div v-if="searchingUserId == 0" class="action-buttons" style="margin-top: 1em;">
					<a :href="'/servers/certs/acme?userType=&type=' + type + '&keyword=' + keyword + '&userId=' + searchingUserId" class="ui button small" :class="{'basic': userType != '', 'primary': userType == ''}">{{t('certs_index@管理员证书')}}</a>
					<a :href="'/servers/certs/acme?userType=user&type=' + type + '&keyword=' + keyword + '&userId=' + searchingUserId" class="ui button small" :class="{'basic': userType != 'user', 'primary': userType == 'user'}">{{t('certs_index@用户证书')}}</a>
				</div>
			</div>

			<!-- 空数据提示 -->
			<b-empty v-if="tasks.length == 0">
				<span v-if="searchingUserId > 0">{{t('certs_selectPopup@当前用户下')}}</span>{{t('acme_index@暂无证书申请任务')}}
			</b-empty>

			<!-- 执行中提示 -->
			<div class="audit-message info" v-if="isRunning">
				<i class="icon exclamation circle"></i>
				{{t('acme_index@任务执行中提示')}}
			</div>

			<!-- 数据表格区域 -->
			<div class="base-form" v-if="tasks.length > 0">
				<b-table
					:columns="columns"
					:data-source="tasks"
					row-key="id"
					:bordered="false"
					size="middle"
					:pagination="false"
					:loading="isRunning"
					:row-class-name="rowClassName"
					:scroll="{ x: 1200 }">
					
					<!-- ACME用户列 -->
					<template slot="acmeUser" slot-scope="{ text, record, index }">
						<div>{{record.acmeUser.email}}</div>
						<div class="domain-labels" style="margin-top: 0.5em">
							<div class="domain-label" v-if="record.authType == 'dns'">
								<span class="domain-type"><i class="icon globe"></i>{{t('acme_index@DNS')}}</span>
							</div>
							<div class="domain-label" v-if="record.authType == 'http'">
								<span class="domain-type"><i class="icon globe"></i>{{t('acme_index@HTTP')}}</span>
							</div>
							<div class="domain-label" v-if="record.acmeUser.provider != null">
								<span class="domain-type">{{record.acmeUser.provider.name}}</span>
							</div>
							<div class="domain-label" v-if="record.acmeUser.account != null">
								<span class="domain-type">{{record.acmeUser.account.name}}</span>
							</div>
						</div>
					</template>
					
					<!-- 证书域名列 -->
					<template slot="domains" slot-scope="{ text, record }">
						<div class="domain-labels">
							<div v-for="domain in record.domains" class="domain-label">
								<span class="domain-name">{{domain}}</span>
							</div>
						</div>
					</template>
					
					<!-- 到期时间列 -->
					<template slot="endTime" slot-scope="{ text, record }">
						<div v-if="record.cert != null">
							{{record.cert.endTime}}
						</div>
						<span class="disabled" v-else>-</span>
					</template>
					
					<!-- 更新时间列 -->
					<template slot="updateTime" slot-scope="{ text, record }">
						<div v-if="record.log != null">
							<span class="green" v-if="record.log.isOk">{{record.log.createdTime}}</span>
							<a href="" v-if="!record.log.isOk" class="red" :title="t('acme_index@任务执行失败点击查看详情')" @click.prevent="showError(record.log.error)">{{record.log.createdTime}}</a>
						</div>
						<span v-else class="disabled">{{t('acme_index@尚未执行')}}</span>
					</template>
					
					<!-- 自动续期列 -->
					<template slot="autoRenew" slot-scope="{ text, record }">
						<span class="green" v-if="record.autoRenew">Y</span>
						<span v-else class="disabled">N</span>
					</template>
					
					<!-- 关联证书列 -->
					<template slot="cert" slot-scope="{ text, record }">
						<div v-if="record.cert != null">
							<a href="" @click.prevent="viewCert(record.cert.id)" class="action-button"><i class="icon eye"></i></a>
						</div>
						<span class="disabled" v-else>-</span>
					</template>
					
					<!-- 所属用户列 -->
					<template slot="user" slot-scope="{ text, record }">
						<span v-if="record.user != null && record.user.id > 0"><user-link :v-user="record.user"></user-link></span>
						<span v-else class="disabled">{{t('certs_index@管理员')}}</span>
					</template>
					
					<!-- 操作列 -->
					<template slot="actions" slot-scope="{ text, record, index }">
						<div class="action-buttons">
							<a href="" @click.prevent="updateTask(record.id)" :class="{disabled: isRunning}" class="action-button"><i class="icon edit"></i>{{t('certs_index@修改')}}</a>
							<a href="" @click.prevent="runTask(index, record)" :class="{disabled: isRunning}" class="action-button"><i class="icon play"></i>{{t('acme_index@执行')}}</a>
							<a href="" @click.prevent="deleteTask(record.id)" :class="{disabled: isRunning}" class="action-button"><i class="icon trash"></i>{{t('certs_index@删除')}}</a>
						</div>
					</template>
				</b-table>
			</div>

			<!-- 分页 -->
			<div class="page" v-html="filterPageContent(page)"></div>
		</div>
	</div>
</div>