{$layout} 

{$var "header"}
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/pikaday.js"></script>
<link rel="stylesheet" href="/js/pikaday.css" />
<link rel="stylesheet" href="/js/pikaday.theme.css" />
<link rel="stylesheet" href="/js/pikaday.triangle.css" />
{$end}


{$template "/servers/server/settings/settings_menu"}
{$template "/left_menu"}
<div class="right-box">
  {$ if eq .featureIsOn false }
  <server-feature-required></server-feature-required>
  {$ else }
  <first-menu>
    <menu-item
      :href="path + '?serverId=' + serverId + '&day=' + day"
      :active="hasError == 0"
      >所有日志</menu-item
    >
    <menu-item
      :href="path + '?serverId=' + serverId + '&day=' + day + '&hasError=1'"
      :active="hasError > 0"
      >错误日志</menu-item
    >
  </first-menu>
  <div class="item right" style="margin-top: 0.5em;">
    <form
      method="get"
      class="ui form small"
      :action="path"
      autocomplete="off"
    >
      <input type="hidden" name="serverId" :value="serverId" />
      <div class="ui fields inline">
        <div class="ui field">
          <!-- <input
            type="text"
            name="day"
            maxlength="10"
            placeholder="选择日期"
            style="width: 7.8em"
            id="day-input"
            v-model="day"
          /> -->
          <p-calendar name="day" placeholder="选择日期" date-format="yy-mm-dd" v-model="day" :show-button-bar="true" append-to="body">
            <template #date="{date}">
              <span>{{date.day}}</span>
            </template>
          </p-calendar>
        </div>
        <div class="ui field">
          <button class="ui button small" type="submit">查找</button>
        </div>
      </div>
    </form>
  </div>
  
  <!-- <p class="comment" v-if="accessLogs.length == 0">暂时还没有访问日志。</p> -->
  <b-empty v-if="accessLogs.length == 0">暂时还没有访问日志。</b-empty>

  <table class="ui table selectable" v-if="accessLogs.length > 0">
    <!-- 这里之所以需要添加 :key，是因为要不然不会刷新显示 -->
    <tr v-for="accessLog in accessLogs" :key="accessLog.requestId">
      <td>
        <http-access-log-box :v-access-log="accessLog"></http-access-log-box>
      </td>
    </tr>
  </table>

  <div v-if="accessLogs.length > 0">
    <a
      :href="path + '?serverId=' + serverId + '&requestId=' + lastRequestId + '&day=' + day + '&hasError=' + hasError"
      v-if="hasPrev"
      >上一页</a
    >
    <span v-else class="disabled">上一页</span>
    <span class="disabled">&nbsp; | &nbsp;</span>
    <a
      :href="path + '?serverId=' + serverId + '&requestId=' + nextRequestId + '&day=' + day + '&hasError=' + hasError"
      v-if="hasMore"
      >下一页</a
    >
    <span v-else class="disabled">下一页</span>
  </div>
  {$end}
</div>