<%@ page contentType="text/html; charset=UTF-8"%><%@ include file="/WEB-INF/jspf/include/taglibs.jsp"%>

<fmt:setLocale value="RU"/>

<div style="margin: 10px auto;"><button class="btn btn-secondary" onclick="showBlock( 'inetRoot', 'accountList', inetQuery ); return false;">К списку...</button></div>

<div class="tile">
	<c:choose>
		<c:when test="${not empty inetServ}">
			<bg:blockTitle title="Отчет по трафику"/>
			<div class="titleFont2" style="margin-bottom: 5px;">Aккаунт: ${inetServ.title}</div>

			<div class="monthPeriod" style="margin-bottom: 10px;">
			<fmt:formatDate var="mPrev" value="${itetSessionPeriodPrev}" pattern="MM.yyyy"/>
			<div class="monthPeriodButton" onclick="showBlock( 'inetRoot', 'trafficReport', { ...inetQuery, accountId: ${inetServ.id}, mmyyyy: '${mPrev}' } );"><fmt:formatDate value="${itetSessionPeriodPrev}" pattern="LLLL yyyy"/></div> 
			<div class="monthPeriodButton monthPeriodSelect"><fmt:formatDate value="${itetSessionPeriod}" pattern="LLLL yyyy"/></div>
			<c:if test="${not empty itetSessionPeriodNext}">
				<fmt:formatDate var="mNext" value="${itetSessionPeriodNext}" pattern="MM.yyyy"/>
				<div class="monthPeriodButton" onclick="showBlock( 'inetRoot', 'trafficReport', { ...inetQuery, accountId: ${inetServ.id}, mmyyyy: '${mNext}' } );"><fmt:formatDate value="${itetSessionPeriodNext}" pattern="LLLL yyyy"/></div>
			</c:if>
			</div>
			
			<div style="display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; margin-bottom: 10px; margin-left: 5px;">
			<c:forEach var="item" items="${trafficTypes}">
				<div class="flexRow" style="align-items: center; font-size: 0.9rem; margin: 3px 0px;">
					<div style="width: 1rem; height: 1rem; background-color:${inetColorMap[item.id]} "></div>
					<div style="margin-left: 5px; margin-right: 15px;">${item.title} (<fmt:parseNumber value="${inetAmountMap[item.id]/(1024*1024)}" integerOnly="true"/> Mб)</div>
				</div>
			</c:forEach>
			</div>
			
			<c:choose>
			<c:when test="${not empty inetSessionTraffic}">
			<fmt:formatDate var="mmyyyy" value="${itetSessionPeriod}" pattern="MM.yyyy"/>
			<div class="flexRow" style="flex-wrap: wrap; justify-content: space-between; align-content: stretch;">
				<c:forEach var="item" items="${inetSessionTraffic}">
				<div style="flex-grow: 1; min-width: 11rem; border: 1px solid #ddd; padding: 5px; margin: 5px; border-radius: 5px; box-shadow: 3px 3px 3px #a0a0a0;">
				<div style="margin: 3px 0px; font-size: 0.95rem; font-weight: bold; text-align: center;">${item.periodDay}.${mmyyyy}</div>
				<c:forEach var="trafficItem" items="${item.trafficMap}">
					<fmt:parseNumber var="per" value="${100*trafficItem.value/inetSessionTrafficMax}" integerOnly="true"/>
					<div style="color: #666; font-size: 0.9rem; padding: 0px;"><fmt:parseNumber value="${trafficItem.value/(1024*1024)}" integerOnly="true"/> Mб</div>
					<div style="background-color: ${inetColorMap[trafficItem.key]}; margin-bottom: 2px; height: 5px; width: ${per}%;"></div>
				</c:forEach>
				</div>
				</c:forEach>
			</div>
			</c:when>
			<c:otherwise><bg:dataNotFound/></c:otherwise>
			</c:choose>
		</c:when>
		<c:otherwise><bg:dataNotFound/></c:otherwise>
	</c:choose>
</div>