{$template "/datepicker"}

{$layout}

<first-menu>
    <menu-item href="/servers">{{t('index_网站列表_0101')}}</menu-item>
    <span class="item disabled">|</span>
    <menu-item :href="'/servers/server/log?serverId=' + server.id" active="true">"{{server.name}}" {{t('index_日志_0101')}}</menu-item>
    <span class="separator">|</span>
    <more-items-angle
            :v-data-url="'/servers/nearby?serverId=' + server.id"
            :v-url="'/servers/server/log?serverId=${serverId}'"></more-items-angle>
</first-menu>
<first-menu>
    <menu-item v-for="item in leftMenuItems" :key="item.url" :href="item.url" :active="item.isActive">{{item.name}}</menu-item>
</first-menu>


<div class="left-right-box-container">
    <div class="right-box">
        <!-- 集群设置提醒 -->
        <div v-if="!clusterAccessLogIsOn">
            <div class="margin"></div>
            <warning-message>{{t('index_当前集群已经设置不允许网站记录访问日志_0101')}}</warning-message>
        </div>

        <!-- 网站设置提醒 -->
        <div v-if="!serverAccessLogIsOn">
            <div class="margin"></div>
            <warning-message>{{t('index_当前网站尚未启用访问日志，可以在')}} <a :href="'/servers/server/settings/accessLog?serverId=' + serverId">[{{t('index_这里_0101')}}]</a> {{t('index_修改。_0101')}}</warning-message>
        </div>

        <first-menu>
            <menu-item :href="path + '?' + query()" :active="hasError == 0 && hasWAF == 0">{{t('index_所有日志_0101')}}</menu-item>
            <menu-item :href="path + '?' + query('hasError=1')" :active="hasError > 0">{{t('index_错误日志_0101')}}</menu-item>
            <menu-item :href="path + '?' + query('hasWAF=1')" :active="hasWAF > 0">{{t('index_WAF日志_0101')}}</menu-item>
        </first-menu>

        <form method="get" class="ui form small" :action="path">
            <input type="hidden" name="serverId" :value="serverId"/>
            <input type="hidden" name="hasError" :value="hasError"/>
            <input type="hidden" name="hasWAF" :value="hasWAF"/>
            <http-access-log-search-box :v-ip="ip" :v-domain="domain" :v-keyword="keyword"  :v-cluster-id="clusterId" :v-node-id="nodeId">
                <div class="ui field">
                    <input type="text" name="day" maxlength="10" :placeholder="t('index_选择日期_0101')" style="width:7.8em" id="day-input" v-model="day"/>
                </div>
                <div class="ui field">
                    <div class="ui right labeled input">
                        <input type="text" name="hour" maxlength="2" :placeholder="t('index_时_0101')" style="width: 3.5em" v-model="hour"/>
                        <span class="ui label">{{t('index_时_0101')}}</span>
                    </div>
                </div>
            </http-access-log-search-box>
        </form>

        <!-- 分区 -->
        <http-access-log-partitions-box :v-day="day" :v-partition="partition" :v-query="currentQuery"></http-access-log-partitions-box>

        <b-empty v-if="accessLogs.length == 0">{{t('index_暂时还没有访问日志_0101')}}</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" :v-keyword="keyword"></http-access-log-box></td>
            </tr>
        </table>

        <div v-if="accessLogs.length > 0">
            <a :href="path + '?' + query('requestId=' + lastRequestId + '&hasError=' + hasError + '&hasWAF=' + hasWAF + '&partition=' + partition)" v-if="hasPrev">{{t('index_上一页_0101')}}</a>
            <span v-else class="disabled">{{t('index_上一页_0101')}}</span>
            <span class="disabled">&nbsp; | &nbsp;</span>
            <a :href="path + '?' + query('requestId=' + nextRequestId + '&hasError=' + hasError + '&hasWAF=' + hasWAF + '&partition=' + partition)" v-if="hasMore">{{t('index_下一页_0101')}}</a>
            <span v-else class="disabled">{{t('index_下一页_0101')}}</span>
            <page-size-selector></page-size-selector>
        </div>
    </div>
</div>