{$layout}

{$var "header"}
<!-- datepicker -->
<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}

<div class="margin"></div>
	<form method="get" class="ui form small" :action="path" autocomplete="off">
	<first-menu style="margin-top: -1em">
		<div class="item" v-if="servers.length > 0">
            <select class="ui dropdown" name="serverId" v-model="serverId">
                <option value="0">[选择域名]</option>
                <option v-for="server in servers" :value="server.id">{{server.serverName}}</option>
            </select>
        </div>
		<div class="item right">
			<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"/>
				</div>
				<div class="ui field">
					<button class="ui button small" type="submit">查找</button>
				</div>
			</div>
		</div>
	</first-menu>
	</form>

	<p class="comment" v-if="accessLogs.length == 0">暂时还没有日志。</p>

	<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 + '?requestId=' + lastRequestId + '&day=' + day + '&groupId=' + groupId + '&serverId=' + serverId" v-if="hasPrev">上一页</a>
		<span v-else class="disabled">上一页</span>
		<span class="disabled">&nbsp; | &nbsp;</span>
		<a :href="path + '?requestId=' + nextRequestId + '&day=' + day + '&groupId=' + groupId + '&serverId=' + serverId" v-if="hasMore">下一页</a>
		<span v-else class="disabled">下一页</span>
	</div>