<!DOCTYPE html>
<html><head>
	<meta charset="utf-8">
	<title>SMEServer Mailstats</title>
	<link rel='stylesheet' type='text/css' href='css/mailstats.css' />
	<!-- Check links -->
	<script>
		function LinkCheck(url){
			var http = new XMLHttpRequest();
			http.open('HEAD', url, false);
			http.send();
			return http.status!=404;
		}
		function doNavs() {
			var aTags = document.getElementsByTagName('a'),
				atl = aTags.length,i;
			for (i = 0; i < atl; i++) {
				if (aTags[i].innerText == "Previous") {
					if (!LinkCheck(aTags[i].href)) { 
						aTags[i].style.visibility = "hidden";
					} else {
						aTags[i].style.visibility = "visible";
					}
				} else if (aTags[i].innerText == "Next") {
					if (!LinkCheck(aTags[i].href)) { 
						aTags[i].style.visibility = "hidden";
					} else {
						aTags[i].style.visibility = "visible";
					}
				}
			}
		}
	</script>
	<style>
	<!--css here-->
	</style>
</head>
<body>
   	<div style="width:100%;overflow-x:auto;font-size:1cqw">
		<!---Navigation here-->
		<div class='linksattop'>
			<a class='prevlink' href='http://${DomainName}/mailstats/mailstats_for_${PreviousDate}.html'>Previous</a>
			<div class='divshowindex'><a class='showindex' href='http://${DomainName}/mailstats/'>Index of files</a></div>
			<a class='nextlink' href='http://${DomainName}/mailstats/mailstats_for_${NextDate}.html'>Next</a></div> <!--format important here - used to insert see in browser for email -->
    <br />
    <h2>${structure:title}</h2>
    <br />
    <div class="headerpanel">
		<div class = "innerheaderpanel">
			<!---Add in header information here -->
		</div>
    </div>
    <br />
    <br />
    <!--Tabs -->
    <div class="tab-container">
    <div class="tab tab-active" data-index="0" onclick="openTab(event, 'tab1')">Table</div>
    <div class="tab" data-index="1" onclick="openTab(event, 'tab2')">Stacked Bar Graph</div>
    <div class="tab" data-index="2" onclick="openTab(event, 'tab3')">Heat Map</div>
    <div class="tab" data-index="3" onclick="openTab(event, 'tab4')">Line Graph</div>
    </div>

	<div id="tab1" class="tab-content tab-content-active">
	<div class = "maintable">
	<table style="border-collapse:collapse;width:98%">
		<thead>
			<tr>
				<th>Date/Time</th>
				<th tal:repeat="header column_headers" tal:content="header">Header</th>
			</tr>
		</thead>
		<tbody>
			<tr tal:repeat="row array_2d" tal:attributes="class python: 'row-total' if repeat.row.index == 24  else 'row-percent' if repeat.row.index == 25 else None">
				<td tal:condition="repeat.row.index == 24" tal:attributes="class python:'col-total'" tal:content="'TOTALS'">Totals</td>
				<td tal:condition="repeat.row.index == 25" tal:attributes="class python:'col-percent'" tal:content="'PERCENT'">Percent</td>
				<td tal:condition="repeat.row.index < 24" tal:content="string:${reporting_date}, ${repeat.row.index}">Hour</td>
                <td tal:repeat="cell row" tal:attributes="class python: 'col-' + str(repeat.cell.index)">
                    <!-- Check if 'nolinks' is true. If not, generate links for rows 0 to 23 except 'PERCENT' column -->
                    <tal:case tal:condition="not: nolinks">
                        <tal:case tal:condition="repeat.row.index >= 0 and repeat.row.index < 24 and repeat.cell.index != 16">
                            <a tal:attributes="href string:./showSummaryLogs.php?date=${reporting_date}&hour=${repeat.row.index}">
                                <!-- Check if cell value is zero and print "" -->
                                <tal:case tal:condition="cell != 0" tal:content="cell">Cell</tal:case>
                                <tal:case tal:condition="cell == 0" tal:content="''">-</tal:case>
                            </a>
                        </tal:case>
                        <!-- For 'PERCENT' column or other rows, just display the cell content -->
                        <tal:case tal:condition="not (repeat.row.index >= 0 and repeat.row.index < 24 and repeat.cell.index != 16)">
                            <!-- Check if cell value is zero and print "" -->
                            <tal:case tal:condition="cell != 0" tal:content="cell">Cell</tal:case>
                            <tal:case tal:condition="cell == 0" tal:content="''">-</tal:case>
                        </tal:case>
                    </tal:case>
                    <tal:case tal:condition="nolinks">
                        <!-- Display cell content without link if 'nolinks' is true -->
                        <tal:case tal:condition="cell != 0" tal:content="cell">Cell</tal:case>
                        <tal:case tal:condition="cell == 0" tal:content="''">-</tal:case>
                    </tal:case>
                </td>
        </tr>
		</tbody>
	</table>
	</div>
	</div>
	<!-- Next Tab-->
	<div id="tab2" class="tab-content">
		<a href="stacked_bar_${reporting_date}.html">${structure: stacked_bar_graph}</a>
	</div>
	<!-- Next Tab-->
	<div id="tab3" class="tab-content">
		<a href="heatmap_${reporting_date}.html">${structure: heatmap}</a>
	</div>
	<!-- Next Tab-->
	<div id="tab4" class="tab-content">
		<a href="line_graph_${reporting_date}.html">${structure: line_graph}</a>
	</div>
	
	<div class = "subtables">
    <!---Add in sub tables here -->
    </div>
    <br />
    
    <footer class="footer">${version}</footer>
    
	<script>
		window.onload = function(){doNavs();} 
		//function openTab(event, tabId){
		//// Get all elements with class="tab-content" and hide them
		//const tabContents = document.querySelectorAll('.tab-content');
		//tabContents.forEach(content => content.classList.remove('tab-content-active'));

		//// Get all elements with class="tab" and remove the class "tab-active"
		//const tabs = document.querySelectorAll('.tab');
		//tabs.forEach(tab => tab.classList.remove('tab-active'));

		//// Show the current tab content, and add an "active" class to the clicked tab
		//document.getElementById(tabId).classList.add('tab-content-active');
		//event.target.classList.add('tab-active');}
		
		function openTab(evt, tabName) {
		// Declare all variables
		var i, tab_content, tab;

		// Get all elements with class="tab_content" and hide them
		tab_content = document.getElementsByClassName("tab-content");
		for (i = 0; i < tab_content.length; i++) {
		tab_content[i].style.display = "none";
		}

		// Get all elements with class="tab" and remove the class "active"
		tab = document.getElementsByClassName("tab");
		for (i = 0; i < tab.length; i++) {
		tab[i].className = tab[i].className.replace(" tab-active", "");
		}

		// Show the current tab, and add an "active" class to the link that opened the tab
		document.getElementById(tabName).style.display = "block";
		evt.currentTarget.className += " tab-active";

		// Store the active tab index
		sessionStorage.setItem('activeTab', evt.currentTarget.getAttribute("data-index"));
		}

		document.addEventListener("DOMContentLoaded", function() {
		// Get the stored tab index from sessionStorage
		let activeTab = sessionStorage.getItem('activeTab');

		// If there's a stored tab, show that tab
		if (activeTab !== null) {
		document.querySelector(`[data-index="$${activeTab}"]`).click();
		}
		});

		
	</script> 

<!--	
	<p class="cssvalid">
		<a href="http://jigsaw.w3.org/css-validator/check/referer">
			<img style="border:0;width:88px;height:31px"
				src="http://jigsaw.w3.org/css-validator/images/vcss"
				alt="Valid CSS!" />
		</a>
	</p>

	<p class="htmlvalid">
		  <a href="https://validator.w3.org/check?uri=referer"><img
			  src="http://www.w3.org/Icons/valid-xhtml10"
			  alt="Valid XHTML 1.0!" height="31" width="88" /></a>
	</p>
-->
	</div>
</body>
</html>