{$layout}
{$template "/datepicker"}

	{$template "waf_menu"}

	<form method="get" class="ui form small" :action="path" autocomplete="off">
	<first-menu style="margin-top: -1em">
		<div class="item">
			<b-select
				name="groupId"
				v-model="groupId"
				:options="[
					{label: '[规则分组]', value: '0'},
					...groups.map(group => ({
						label: group.name,
						value: group.id,
					}))
				]"
			></b-select>

			<!-- <select class="ui dropdown" name="groupId" v-model="groupId">
				<option value="0">[规则分组]</option>
				<option v-for="group in groups" :value="group.id">{{group.name}}</option>
			</select> -->
		</div>
		<div class="item right">
			<input type="hidden" name="firewallPolicyId" :value="firewallPolicyId"/>
			<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>

<http-access-log-partitions-box :v-day="day" :v-partition="partition"></http-access-log-partitions-box>

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