extends layout

block headContent
	title Peers

	link(rel="stylesheet", href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css", integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==", crossorigin="")

	script(src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js", integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==", crossorigin="")

	style.
		.versions-hidden-rows, .services-hidden-rows {
			display: none;
		}

		#map { height: 700px; }

block content
	h1(class="h3") Peers
	hr

	ul(class='nav nav-tabs mb-3')
		li(class="nav-item")
			a(data-toggle="tab", href="#tab-summary", class="nav-link active", role="tab") Summary
		li(class="nav-item")
			a(data-toggle="tab", href="#tab-details", class="nav-link", role="tab") Details
		li(class="nav-item")
			a(data-toggle="tab", href="#tab-json", class="nav-link", role="tab") JSON

	div(class="tab-content")
		div(id="tab-summary", class="tab-pane active", role="tabpanel")
			h2(class="h5 mb-3") Connected to #{peerSummary.getpeerinfo.length} 
				if (peerSummary.getpeerinfo.length == 1)
					span Peer
				else
					span Peers

			if (config.credentials.ipStackComApiAccessKey && config.credentials.ipStackComApiAccessKey.trim().length > 0)
				div(id="map", class="mb-4")

			div(class="card mb-4")
				div(class="card-header")
					h2(class="h6 mb-0") Top Versions
				div(class="card-body")
					table(class="table table-striped table-responsive-sm")
						thead
							tr
								th
								th(class="data-header") Version
								th(class="data-header") Count
						tbody
							each item, index in peerSummary.versionSummary
								tr(class=(index >= 5 ? "versions-hidden-rows" : false))
									th(class="data-cell") #{index + 1}

									td(class="data-cell") #{item[0]}
									td(class="data-cell") #{item[1].toLocaleString()}

			div(class="card mb-4")
				div(class="card-header")
					h2(class="h6 mb-0") Top Service Flags
				div(class="card-body")
					table(class="table table-striped table-responsive-sm")
						thead
							tr
								th
								th(class="data-header") Services
								th(class="data-header") Count
						tbody
							each item, index in peerSummary.servicesSummary
								tr(class=(index >= 5 ? "services-hidden-rows" : false))
									th(class="data-cell") #{index + 1}

									td(class="data-cell") #{item[0]}
									td(class="data-cell") #{item[1].toLocaleString()}



		div(id="tab-details", class="tab-pane", role="tabpanel")
			table(class="table table-striped table-responsive-sm mt-4")
				thead
					tr
						th
						th(class="data-header") Version
						th(class="data-header") Address
						th(class="data-header") Services
						th(class="data-header") Location
						th(class="data-header") Last Send / Receive

				tbody
					each item, index in peerSummary.getpeerinfo
						- var lastSendAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(item.lastsend) * 1000)))).format().replace("milliseconds", "ms");
						- var lastRecvAgo = moment.duration(moment.utc(new Date()).diff(moment.utc(new Date(parseInt(item.lastrecv) * 1000)))).format().replace("milliseconds", "ms");

						tr
							th(class="data-cell") #{index + 1}

							td(class="data-cell") #{item.subver}
							td(class="data-cell") #{item.addr}
							td(class="data-cell") #{item.services}
							td(class="data-cell")
								- var ipAddr = item.addr.substring(0, item.addr.lastIndexOf(":"));
								if (peerIpSummary.ips.includes(ipAddr))
									- var ipDetails = peerIpSummary.detailsByIp[ipAddr];
									if (ipDetails.city)
										span #{ipDetails.city}, 
									if (ipDetails.country_name)
										span #{ipDetails.country_name}
									if (ipDetails.location && ipDetails.location.country_flag_emoji)
										span  #{ipDetails.location.country_flag_emoji}
								else
									span ?

								- var ipAddr = null;

							td(class="data-cell") #{lastSendAgo} / #{lastRecvAgo}


		div(id="tab-json", class="tab-pane", role="tabpanel")
			each item, index in peerSummary.getpeerinfo
				div(class="border-bottom p-1")
					a(href="javascript:void(0)" onclick=("javascript:var peer = document.getElementById('peerinfo_" + index + "'); peer.style.display = peer.style.display === 'none' ? '' : 'none';"))
						i(class="fas fa-plus-circle") 

					span(class="monospace")  #{item.addr}

				div(style="display: none;", id=("peerinfo_" + index), class="p-3")
					h6 Peer Details
					pre
						code #{JSON.stringify(item, null, 4)}

					if (peerIpSummary.detailsByIp[item.addr.substring(0, item.addr.lastIndexOf(":"))])
						hr

						h6 IP Geo-Location Info
						pre
							code #{JSON.stringify(peerIpSummary.detailsByIp[item.addr.substring(0, item.addr.lastIndexOf(":"))], null, 4)}

	
block endOfBody
	if (config.credentials.ipStackComApiAccessKey && config.credentials.ipStackComApiAccessKey.trim().length > 0)
		script.
			var mymap = L.map('map').setView([21.505, -0.09], 3);

			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
				maxZoom: 18,
				attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
					'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
					'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				id: 'mapbox.streets'
			}).addTo(mymap);

			/*L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(mymap);*/

			$(document).ready(function() {
				window.dispatchEvent(new Event('resize'));
			});

		each ipAddress, index in peerIpSummary.ips
			- var ipDetails = peerIpSummary.detailsByIp[ipAddress];
			if (ipDetails && ipDetails.latitude && ipDetails.longitude)
				- var ipDetailsPopupHtml = "<b>" + ipAddress + "</b><br>";
				if (ipDetails.city)
					- var ipDetailsPopupHtml = ipDetailsPopupHtml + ipDetails.city + ", ";

				if (ipDetails.country_name)
					- var ipDetailsPopupHtml = ipDetailsPopupHtml + ipDetails.country_name + " ";

				if (ipDetails.location && ipDetails.location.country_flag_emoji)
					- var ipDetailsPopupHtml = ipDetailsPopupHtml + ipDetails.location.country_flag_emoji;

				script L.marker([#{ipDetails.latitude}, #{ipDetails.longitude}]).addTo(mymap).bindPopup("!{ipDetailsPopupHtml}");