{$layout "layout_popup"}

<h3>选择证书</h3>

<!-- 搜索表单 -->
<form class="ui form" action="/servers/certs/selectPopup">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" placeholder="域名、说明文字等"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button>
        </div>
    </div>
</form>

<!-- 证书列表 -->
<p class="comment" v-if="certs.length == 0">暂时还没有相关的证书。</p>
<table class="ui table selectable celled" v-if="certs.length > 0">
	<thead>
	<tr>
		<th>证书说明</th>
		<th v-if="viewSize == 'normal'">顶级发行组织</th>
		<th>域名</th>
		<th>过期日期</th>
		<th v-if="viewSize == 'normal'">引用服务</th>
		<th>状态</th>
		<th class="one op">操作</th>
	</tr>
	</thead>
	<tr v-for="(cert, index) in certs">
        <td><keyword :v-word="keyword">{{cert.name}}</keyword>
			<div v-if="cert.isCA" style="margin-top:0.5em">
				<span class="ui label olive tiny">CA</span>
			</div>
		</td>
		<td v-if="viewSize == 'normal'">
			<span v-if="cert.commonNames != null && cert.commonNames.length > 0">{{cert.commonNames[cert.commonNames.length-1]}}</span>
		</td>
		<td>
			<div v-for="dnsName in cert.dnsNames" style="margin-bottom:0.4em">
                <span class="ui label tiny"><keyword :v-word="keyword">{{dnsName}}</keyword></span>
			</div>
		</td>
		<td>{{certInfos[index].endDay}}</td>
		<td v-if="viewSize == 'normal'">{{certInfos[index].countServers}}</td>
		<td nowrap="">
			<span class="ui label red tiny basic" v-if="certInfos[index].isExpired">已过期</span>
			<span class="ui label green tiny basic" v-else>有效中</span>
		</td>
		<td>
			<a href="" @click.prevent="selectCert(cert)" v-if="!certInfos[index].isSelected">选择</a>
			<span v-else>已选</span>
		</td>
	</tr>
</table>

<div class="page" v-html="page"></div>