{$layout}

<div class="left-right-box-container">
    {$template "/left_menu_top"}

    <div class="right-box without-tabbar">
        <div class="margin"></div>

        <form class="ui form" method="get" action="/servers/certs/ocsp">
            <div class="ui fields inline">
                <div class="ui field">
                    <input type="text" placeholder="关键词" style="width: 10em" name="keyword" v-model="keyword"/>
                </div>
                <div class="ui field">
                    <button class="ui button small">搜索</button>
                    &nbsp; <a href="/servers/certs/ocsp" v-if="keyword.length > 0">[清除条件]</a>
                </div>
            </div>
        </form>
        <div class="margin"></div>

        <form class="ui form" v-if="certs.length > 0">
            <div class="ui divider"></div>
            <div class="ui fields inline">
                <div class="ui field" v-if="certIds.length == 0" @click.prevent="resetAllCerts">
                    <button class="ui button small basic">重试所有证书</button>
                </div>
                <div class="ui field" v-if="certIds.length > 0">
                    <button class="ui button small basic" @click.prevent="resetCerts">重试选中证书</button>
                </div>
                <div class="ui field" v-if="certIds.length > 0">
                    <button class="ui button small basic" @click.prevent="ignoreCerts">忽略选中证书</button>
                </div>
            </div>
        </form>

        <b-empty v-if="certs.length == 0">暂时没有OCSP日志。</b-empty>

        <table class="ui table selectable celled" v-if="certs.length > 0">
            <thead>
                <tr>
                    <th style="width: 1em"><checkbox v-model="allChecked"></checkbox></th>
                    <th>证书说明</th>
                    <th>顶级发行组织</th>
                    <th>域名</th>
                    <th class="six wide">更新错误信息</th>
                    <th class="center">状态</th>
                    <th class="one op">操作</th>
                </tr>
            </thead>
            <tbody v-for="(cert, index) in certs">
                <tr>
                    <td><checkbox :id="'cert_' + cert.id" ref="certCheckboxes" @input="changeCerts"></checkbox></td>
                    <td><keyword :v-word="keyword">{{cert.name}}</keyword>
                        <div v-if="cert.isCA" style="margin-top:0.5em">
                            <micro-basic-label class="olive">CA</micro-basic-label>
                        </div>
                        <div v-if="cert.isACME" style="margin-top: 0.5em">
                            <micro-basic-label class="olive" title="通过ACME协议免费申请">ACME</micro-basic-label>
                        </div>
                    </td>
                    <td>
                        <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 basic"><keyword :v-word="keyword">{{dnsName}}</keyword></span>
                        </div>
                    </td>
                    <td style="word-break: break-all">
                        <span class="red">{{cert.ocspError}}</span>
                    </td>
                    <td nowrap="" class="center">
                        <span class="ui label red tiny basic" v-if="!cert.isOn">未启用</span>
                        <span class="ui label red tiny basic" v-else-if="cert.isExpired">已过期</span>
                        <span class="ui label green tiny basic" v-else>有效中</span>
                    </td>
                    <td>
                        <a href="" @click.prevent="viewCert(cert.id)">详情</a> &nbsp;
                    </td>
                </tr>
            </tbody>
        </table>

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