{$layout}
<!--{$template "/left_menu_top"}-->

<!--<div class="right-box without-tabbar">-->
<first-menu>
  <menu-item :href="'/servers/certs?keyword=' + keyword" :active="type == ''"
    >所有证书({{countAll}})</menu-item
  >
  <menu-item
    :href="'/servers/certs?type=ca&keyword=' + keyword"
    :active="type == 'ca'"
    >CA证书({{countCA}})</menu-item
  >
  <menu-item
    :href="'/servers/certs?type=available&keyword=' + keyword"
    :active="type == 'available'"
    >有效证书({{countAvailable}})</menu-item
  >
  <menu-item
    :href="'/servers/certs?type=expired&keyword=' + keyword"
    :active="type == 'expired'"
    >过期证书<span :class="{red: countExpired > 0}"
      >({{countExpired}})</span
    ></menu-item
  >
  <menu-item
    :href="'/servers/certs?type=7days&keyword=' + keyword"
    :active="type == '7days'"
    >7天内过期<span :class="{red: count7Days > 0}"
      >({{count7Days}})</span
    ></menu-item
  >
  <menu-item
    :href="'/servers/certs?type=30days&keyword=' + keyword"
    :active="type == '30days'"
    >30天过期({{count30Days}})</menu-item
  >
  <span class="item">|</span>
  <a href="" class="item" @click.prevent="uploadCert">
    <i class="pi pi-upload" style="margin-right: .5rem;"></i>
    上传证书
  </a>
  <a href="" class="item" @click.prevent="uploadBatch">
    <i class="pi pi-upload" style="margin-right: .5rem;"></i>
    批量上传
  </a>
</first-menu>

<form class="ui form" style="margin-top: 1em;">
  <div class="ui fields inline">
    <div class="ui field">
      <input
        type="text"
        name="keyword"
        placeholder="关键词"
        style="width: 10em"
        v-model="keyword"
      />
    </div>
    <div class="ui field">
      <button type="submit" class="ui button">搜索</button>
    </div>
  </div>
</form>

<!-- <p class="comment" v-if="certs.length == 0">暂时还没有相关的证书。</p> -->
<b-empty v-if="certs.length == 0">暂时还没有相关的证书。</b-empty>

<table class="ui table selectable celled" v-if="certs.length > 0">
  <thead>
    <tr>
      <th>证书说明</th>
      <th>顶级发行组织</th>
      <th>域名</th>
      <th>生效日期</th>
      <th>过期日期</th>
      <th class="center">引用网站</th>
      <th class="center">状态</th>
      <th class="three op">操作</th>
    </tr>
  </thead>
  <tr v-for="(cert, index) in certs">
    <td>
      {{cert.name}}
      <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">{{dnsName}}</span>
      </div>
    </td>
    <td>{{certInfos[index].beginDay}}</td>
    <td>{{certInfos[index].endDay}}</td>
    <td class="center">{{certInfos[index].countServers}}</td>
    <td nowrap="" class="center">
      <span class="ui label red tiny basic" v-if="!certInfos[index].isOn"
        >未启用</span
      >
      <span
        class="ui label red tiny basic"
        v-else-if="certInfos[index].isExpired"
        >已过期</span
      >
      <span class="ui label green tiny basic" v-else>有效中</span>
    </td>
    <td>
      <a href="" @click.prevent="viewCert(cert.id)">详情</a> &nbsp;
      <a href="" @click.prevent="updateCert(cert.id)">修改</a> &nbsp;
      <a href="" @click.prevent="deleteCert(cert.id)">删除</a>
    </td>
  </tr>
</table>

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