{% extends "bootstrap.html" %}
{% block title %}{{super()}} :: {{ router.hostname }}{% endblock %}
{% block head %}{{super()}}
	<link rel="stylesheet" href="{{ url_for('static', filename='leaflet/leaflet.css') }}" />
	<script src="{{ url_for('static', filename='leaflet/leaflet.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/date.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/jquery.flot.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/jquery.flot.time.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/jquery.flot.byte.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/jquery.flot.selection.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/jquery.flot.downsample.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/jquery.flot.resize.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph/jquery.flot.hiddengraphs.js') }}"></script>
	<script src="{{ url_for('static', filename='js/graph.js') }}"></script>
	<style type="text/css">
		#map {
			height: 467px;
			width: 100%;
		}
		.navbar, .table-condensed {
			margin-bottom: 0;
		}
		.table-condensed tr:last-child td, th {
			border-bottom: 1px solid #ddd;
		}
		li.list-group-item:hover {
			background-color: #f5f5f5;
		}
		.wlaninfo {
			font-weight:bold;
			font-style:italic;
		}
		.clientinfo {
			font-weight:bold;
		}
		.netifdesc {
			font-style:italic;
		}

		/* hack to remove flex css on small single-column layout */
		@media(max-width:991px) {
			.row {
				display: block !important;
			}
		}
	</style>
{% endblock %}

{% block content %}
	<div class="row" style="margin-top: 5px; margin-bottom: 5px;">
		<div class="col-xs-12 col-sm-10">
		<h2 style="margin-top: 10px;">{%- if router.gateway %}Gateway{%- else %}Router{%- endif %}: {{ router.hostname }}</h2>
		{%- if mac %}
		<h4 style="margin-top: 10px;margin-bottom: 20px">Perma-Link: <a href="{{ url_for('router_mac', mac=mac|int2shortmac, _external=True) }}">{{ url_for('router_mac', mac=mac|int2shortmac, _external=True) }}</a></h4>
		{%- endif %}
		</div>
		<div class="col-xs-12 col-sm-2 text-right" style="margin-top: 10px; margin-bottom: 10px;">
			<form method="post" id="actform">
				<input type="hidden" name="act" id="act" value="" />
				<div class="btn-group">
					<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						Actions
						<span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						{%- if authuser %}
						<li><a href="#" onclick="$('#act').val('delete'); $('#actform').submit()">Delete Router</a></li>
						{%- endif %}
						{%- if authadmin %}
						<li><a href="#" onclick="$('#act').val('ban'); $('#actform').submit()">Ban Router</a></li>
						<li><a href="#" onclick="$('#blockedform').submit()">{{ "Remove blocked status" if router.blocked else "Mark as blocked" }}</a></li>
						{%- endif %}
						<li><a href="#" onclick="$('#act').val('report'); $('#actform').submit()">Report abusive/illegal content</a></li>
					</ul>
				</div>
			</form>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="panel panel-default">
				<div class="panel-body" style="padding: 0;">
					<div id="map"></div>
					<script type="text/javascript">
						var url_get_nearest_router = "{{ url_for('api.get_nearest_router') }}";
						var url_router_info = "{{ url_for('router_info', dbid='') }}";
						var url_load_neigh_stats = "{{ url_for('api.load_neighbor_stats', dbid='%s' % router.id) }}";
						var url_load_netif_stats = "{{ url_for('api.load_netif_stats', dbid='%s' % router.id) }}";
						var tileurls = {{ tileurls|tojson|safe }};
					</script>
					<script src="{{ url_for('static', filename='js/map.js') }}"></script>
					<script type="text/javascript">
						initialLayers();
						{%- if router.lng and router.lat %}
						var router_pos = [{{ router.lat }}, {{ router.lng }}];
						map.setView(router_pos, 18);
						var marker = L.marker(router_pos, {
							icon: L.icon({
								iconUrl: "{{ url_for('static', filename='img/router_blue_white.svg') if router.wan_uplink else url_for('static', filename='img/router_blue.svg') }}",
								iconSize: [14, 14]
							}),
							clickable: false
						}).addTo(map);
						{%- else %}
						map.setView([49.45, 11.1], 10);
						{%- endif %}
					</script>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-6">
			<div class="panel panel-default">
				<div class="panel-heading">System</div>
				<div class="panel-body">
					<table class="table table-condensed">
						<tr><th>Hostname</th><td>
							{{ router.hostname }}
							{%- if router.netifs|webui_addr %}
							(<a href="http://[{{ router.netifs|webui_addr }}]">WebUI</a>)
							{%- endif %}
						</td></tr>
						<tr><th>Status</th><td><span class="{{ router.status|status2css }}">{{ router.status }}</span>
							{%- if router.status == "online" %}
							({{ router.sys_uptime|format_ts_diff }} up)
							{%- endif -%}
						</td></tr>
						<tr><th>Created</th><td>
							{{ router.created|utc2local|format_dt }}
						</td></tr>
						<tr><th class="text-nowrap">Last contact</th><td>
							{{ router.last_contact|utc2local|format_dt }}
							({{ router.last_contact|utc2local|format_dt_ago }}){{- "" -}}
						</td></tr>
						{%- if router.status_text %}
						<tr><th>Status Text</th><td>{{ router.status_text }}</td></tr>
						{%- endif %}
						{%- if router.description %}
						<tr><th>Description</th><td>{{ router.description }}</td></tr>
						{%- endif %}
						{%- if router.position_comment %}
						<tr><th>Position</th><td>{{ router.position_comment }}</td></tr>
						{%- endif %}
						{%- if router.hoodname %}
						<tr><th>Hood</th><td><span{%- if router.local %} class="hoodlocal"{%- elif router.v2 %} class="hoodv2"{%- endif %}><a href="{{ url_for('router_list', q='hood:^%s$' % router.hoodname) }}">{{ router.hoodname }}</a></span>
							{%- if router.community and router.community != 'franken' %}
							({{ router.community }})
							{%- elif router.local %}
							(local hood)
							{%- elif router.v2 %}
							(V2)
							{%- else %}
							(V1)
							{%- endif -%}
							{%- if router.reset %}
							<span style="color:#d90000">- Router has lost its position!</span>
							{%- elif not router.lat and not router.lng %}
							<span style="color:#d90000">- Router has no position!</span>
							{%- endif -%}
						</td></tr>
						{%- endif %}
						<tr><th>User</th><td>
						{%- if router.user -%}
						<a href="{{ url_for('user_info', nickname=router.user) }}">{{ router.user }}</a>
						{%- if router.contact %}
						(<a href="{{ url_for('router_list', q='contact:%s' % router.contact|anon_email_regex) }}">{{ router.contact|anon_email }}</a>)
						{%- endif -%}
						{%- else -%}
						{%- if router.contact %}
						<a href="{{ url_for('router_list', q='contact:%s' % router.contact|anon_email_regex) }}">{{ router.contact|anon_email }}</a>
						{%- else -%}
						<span style="color:#d90000">FFF routers must have a contact address, but none is set.<br />Please provide a valid e-mail address!</span>
						{%- endif -%}
						{%- endif -%}
						</td></tr>
						<tr><th>Hardware</th><td><span title="{{ router.chipset }}">{{ router.hardware }}</span></td></tr>
						<tr><th>WAN Uplink</th><td><span class="{{ "glyphicon glyphicon-ok" if router.wan_uplink else "glyphicon glyphicon-remove" }}"></span>
						{%- if router.blocked and not router.v2 %}
						<span style="color:#d90000"> &nbsp; - &nbsp; Router BLOCKED by KeyXchange!</span>
						{%- endif -%}
						</td></tr>
						{%- if router.tc_enabled != None %}
						<tr><th>Traffic control</th><td><span class="{{ "glyphicon glyphicon-ok" if router.tc_enabled else "glyphicon glyphicon-remove" }}"></span>
						{%- if router.tc_enabled %} &nbsp; (up: {{ router.tc_out }} kBit/s, down: {{ router.tc_in }} kBit/s){%- endif -%}
						</td></tr>
						{%- endif -%}
						<tr><th>Clients</th><td><span class="clientinfo">{{ router.clients }}</span>
						{%- if router.clients_eth or router.clients_w2 or router.clients_w5 %}
						 &nbsp; (Ethernet: <span class="clientinfo">{{ router.clients_eth }}</span>{%- if router.clients_w2 != None %}, 2.4 GHz: <span class="clientinfo">{{ router.clients_w2 }}</span>{%- endif -%}{%- if router.clients_w5 != None %}, 5 GHz: <span class="clientinfo">{{ router.clients_w5 }}</span>{%- endif -%})
						{%- endif -%}
						</td></tr>
						{%- if router.w2_airtime != None or router.w5_airtime != None -%}
						<tr><th>Airtime</th><td>
						{%- if router.w2_airtime != None -%}2.4 GHz: <span class="clientinfo">{{ router.w2_airtime|format_airtime }}</span>{%- endif -%}{%- if router.w2_airtime != None and router.w5_airtime != None -%},&nbsp;{%- endif -%}{%- if router.w5_airtime != None -%}5 GHz: <span class="clientinfo">{{ router.w5_airtime|format_airtime }}</span>{%- endif -%}
						</td></tr>
						{%- endif -%}
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="row" style="display: flex;">
		<div class="col-xs-12 col-md-6" style="display: flex; flex-flow: column;">
			<div class="panel panel-default">
				<div class="panel-heading">Software</div>
				<div class="panel-body">
					<table class="table table-condensed">
						<tr><th>Firmware</th><td><span title="{{ router.firmware_rev }}">{{ router.firmware }}</span></td></tr>
						<tr><th>Operating&nbsp;System</th><td>{{ router.os }}</td></tr>
						<tr><th>Kernel</th><td>{{ router.kernel }}</td></tr>
						<tr><th>B.A.T.M.A.N. adv</th><td>{{ router.batman }}{%- if router.routing_protocol -%}&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;Routing: {{ router.routing_protocol }}{%- endif -%}</td></tr>
						<tr><th>Nodewatcher</th><td>{{ router.nodewatcher }}</td></tr>
					</table>
				</div>
			</div>
		{%- if not router.neighbours|length > 0 %}
		</div>
		<div class="col-xs-12 col-md-6" style="display: flex; flex-flow: column;">
		{%- endif %}
			<div class="panel panel-default" style="flex: 1 1 auto;">
				<div class="panel-heading">Events</div>
				<div class="panel-body" style="max-height:186px;overflow-y:auto">
					<table class="table table-condensed">
					{%- for event in router.events[-250:][::-1] %}
						<tr>
							<td style="width: 11em;">{{ event.time|utc2local|format_dt|nbsp|safe }}</td>
							<td style="width: 1em;"><span class="{{ event.type|status2css }}">{{ event.type }}</span></td>
							<td>{{ event.comment }}</td>
						</tr>
					{%- endfor %}
					</table>
					<div style="height:10px"></div>
				</div>
			</div>
		</div>
		{%- if router.neighbours|length > 0 %}
		<div class="col-xs-12 col-md-6" style="display: flex; flex-flow: column;">
			<div class="panel panel-default" style="flex: 1 1 auto;">
				<div class="panel-heading">Neighbours <span id="loadneighstats">(<a  href="#" onclick="load_neigh_stats();return false;">Load full stats</a>)</span></div>
				<div class="panel-body" style="height: 100%;">
					<div class="table-responsive">
						<table class="neighbours" style="width: 100%; margin-bottom: 6px;">
							<tr>
								<th>Hostname</th>
								<th>MAC Address</th>
								<th>Quality</th>
								<th>Interface</th>
							</tr>
							{%- for neighbour in router.neighbours %}
							<tr style="background-color: {{ neighbour.color }};">
								
								<td>{%- if neighbour.hostname -%}<a href="{{ url_for('router_info', dbid=neighbour.id) }}" style="color:#000000">{{ neighbour.hostname }}</a>{%- else -%}---{%- endif -%}</td>
								<td>{{ neighbour.mac|int2mac }}</td>
								<td>{{ neighbour.quality }}</td>
								<td>{{ neighbour.netif }}</td>
							</tr>
							{%- endfor %}
						</table>
					</div>
					{# hack for graph vertical align #}
					{%- if  router.neighbours|length < 3 %}
					{%- for n in range(3- router.neighbours|length) %}
					<br />
					{%- endfor %}
					{%- endif %}
					<div id="meshstat" class="graph" style="height: 300px;"></div>
				</div>
			</div>
		</div>
		{%- endif %}
	</div>
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="panel panel-default">
				<div class="panel-heading">Network Interfaces</div>
				<div class="panel-body">
					<div id="netstat" class="graph"></div>
				</div>
				<ul class="list-group" id="netif-list">
				{# make sure that br-mesh is on top of the list #}
				{%- for netif in router.netifs if netif.netif == 'br-mesh' %}
					<li class="list-group-item active" data-name="{{ netif.netif|replace('.', '')|replace('$', '') }}">
						<div class="row">
							<div class="col-xs-7 col-sm-7"><h4 class="list-group-item-heading">br-mesh: <span class="netifdesc">Bridge</span></h4></div>
							<div class="col-xs-5 col-sm-5 text-right" style="text-transform: uppercase;"><h4 class="list-group-item-heading">{{ netif.mac|int2mac }}</h4></div>
						</div>
						<div class="row">
							<div class="col-xs-5 col-sm-5">
								{%- if netif.fe80_addr -%}
								{{ netif.fe80_addr|bin2ipv6 }}
								{%- else -%}
								<em title="Calculated from MAC Address">{{ netif.mac|macint2fe80 }}</em>
								{%- endif -%}
								{%- if netif.ipv4_addr -%}
								<br />{{ netif.ipv4_addr|int2ipv4 }}
								{%- endif -%}
								{%- for ipv6_addr in netif.ipv6_addrs -%}
								<br />{{ ipv6_addr|bin2ipv6 }}
								{%- endfor -%}
							</div>
							{%- if netif.rx is defined %}
							<div class="col-xs-7 col-sm-7 text-right">
								<span class="glyphicon glyphicon-arrow-down"></span>{{ netif.rx|bytes_to_bits }}/s
								<span class="glyphicon glyphicon-arrow-up"></span>{{ netif.tx|bytes_to_bits }}/s
							</div>
							{%- endif %}
						</div>
					</li>
				{%- endfor %}
				{%- for netif in router.netifs if netif.netif != 'br-mesh' %}
					<li class="list-group-item" data-name="{{ netif.netif|replace('.', '')|replace('$', '') }}">
						<div class="row">
							<div class="col-xs-7 col-sm-7"><h4 class="list-group-item-heading" style="{%- if netif.color -%}color:{{ netif.color }}{%- endif -%}">{{ netif.netif }}{%- if netif.description -%}: <span class="netifdesc">{{ netif.description }}</span>{%- endif %}</h4></div>
							<div class="col-xs-5 col-sm-5 text-right" style="text-transform: uppercase;"><h4 class="list-group-item-heading">{{ netif.mac|int2mac }}</h4></div>
						</div>
						<div class="row">
							<div class="col-xs-12 col-sm-12" style="padding-bottom:6px;font-size:14px">
							{%- if netif.wlan_type -%}
							<span class="wlaninfo">{{netif.wlan_type}}</span>,&nbsp;
							{%- endif -%}
							{%- if netif.wlan_channel -%}
							Channel: <span class="wlaninfo">{{netif.wlan_channel}}</span>,&nbsp;
							{%- endif -%}
							{%- if netif.wlan_ssid -%}
							SSID: <span class="wlaninfo">{{netif.wlan_ssid}}</span>,&nbsp;
							{%- endif -%}
							{%- if netif.wlan_txpower -%}
							Tx-Power: <span class="wlaninfo">{{netif.wlan_txpower}}</span>
							{%- endif -%}
							</div>
						</div>
						<div class="row">
							<div class="col-xs-5 col-sm-5">
								{%- if netif.fe80_addr -%}
								{{ netif.fe80_addr|bin2ipv6 }}
								{%- else -%}
								<em title="Calculated from MAC Address">{{ netif.mac|macint2fe80 }}</em>
								{%- endif -%}
								{%- if netif.ipv4_addr -%}
								<br />{{ netif.ipv4_addr|int2ipv4 }}
								{%- endif -%}
								{%- for ipv6_addr in netif.ipv6_addrs -%}
								<br />{{ ipv6_addr|bin2ipv6 }}
								{%- endfor -%}
							</div>
							{%- if netif.rx is defined %}
							<div class="col-xs-7 col-sm-7 text-right">
								<span class="glyphicon glyphicon-arrow-down"></span>{{ netif.rx|bytes_to_bits }}/s
								<span class="glyphicon glyphicon-arrow-up"></span>{{ netif.tx|bytes_to_bits }}/s
							</div>
							{%- endif %}
						</div>
					</li>
				{%- endfor %}
				</ul>
			</div>
			{%- if router.gws|length > 0 %}
			<div class="panel panel-default" style="flex: 1 1 auto;">
				<div class="panel-heading">Gateways</div>
				<div class="panel-body" style="height: 100%;">
					<div class="table-responsive">
						<table class="neighbours" style="width: 100%; margin-bottom: 6px;">
							<tr>
								<th>Gateway</th>
								<th>batX</th>
								<th>Qual</th>
								<th>Netif</th>
								<th>Class</th>
							</tr>
							{%- for gw in router.gws %}
							{%- if gw.selected %}
							<tr style="background-color:#04ff0a">
							{%- else %}
							<tr>
							{%- endif %}
								<td><a href="{{ url_for('router_list', q='selected:^%s$' % gw.mac|int2shortmac) }}">{{ gw.label }}</a></td>
								<td>{{ gw.batX }}</td>
								<td>{{ gw.quality }}</td>
								<td>{{ gw.netif }}</td>
								<td>{{ gw.gw_class }}</td>
							</tr>
							{%- endfor %}
						</table>
					</div>
					{# hack for graph vertical align #}
					{%- if  router.gws|length < 3 %}
					{%- for n in range(3- router.gws|length) %}
					<br />
					{%- endfor %}
					{%- endif %}
					<div id="gwstat" class="graph" style="height: 150px;"></div>
				</div>
			</div>
			{%- endif %}
		</div>
		<div class="col-xs-12 col-md-6">
			<div class="panel panel-default">
				<div class="panel-heading">Clients</div>
				<div class="panel-body">
					<div id="clientstat" class="graph"></div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">Average Load</div>
				<div class="panel-body">
					<div id="loadstat" class="graph"></div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">Airtime (requires Firmware-Update)</div>
				<div class="panel-body">
					<div id="airstat" class="graph"></div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">Memory</div>
				<div class="panel-body">
					<div id="memstat" class="graph"></div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">Processes</div>
				<div class="panel-body">
					<div id="procstat" class="graph"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var router_stats = {{ router.stats|statbson2json|safe }};
		var netif_stats = null;
		var neigh_stats = {{ neighstats|safe }};
		var neigh_label = {{ neighlabel|bson2json|safe }};
		var gw_stats = {{ gwstats|statbson2json|safe }};
		var neighbours = [
		{%- for neighbour in router.neighbours %}
			{"name": "{{ neighbour.hostname or neighbour.mac|int2mac }}", "mac": "{{ neighbour.mac }}", "netif": "{{ neighbour.netif }}"},
		{%- endfor %}
		];
		var gws = [
		{%- for gw in router.gws %}
			{"name": "{{ gw.label }}", "mac": "{{ gw.mac }}", "netif": "{{ gw.netif }}"},
		{%- endfor %}
		];
		$(document).ready(function() {
			{%- if router.neighbours|length > 0 %}
			neighbour_graph(neigh_label);
			{%- endif %}
			{%- if router.gws|length > 0 %}
			gw_graph(gws);
			{%- endif %}
			memory_graph();
			process_graph();
			client_graph();
			loadavg_graph();
			airtime_graph();

			$("#netif-list li").on("click", function() {
				$("#netif-list li").removeClass("active");
				var netif = this.getAttribute("data-name");
				load_netif_stats(netif);
				$(this).addClass("active");
			});
			load_netif_stats("br-mesh");
		});
		{%- if router.neighbours|length > 0 %}
		function load_neigh_stats() {
			$("#loadneighstats").css('font-style', 'italic');
			$("#loadneighstats").html("(Loading ...)");
			var starttimeneigh = performance.now();
			ajax_get_request(url_load_neigh_stats, function(neighstats) {
				neigh_stats = neighstats;
				neighbour_graph(neigh_label) && $("#loadneighstats").hide();
				console.debug("Loaded full neighbor stats in "+((performance.now() - starttimeneigh)/1000).toFixed(3)+" seconds.");
				});
		}
		{%- endif %}
		function load_netif_stats(netif) {
			var starttimenetif = performance.now();
			ajax_get_request(url_load_netif_stats + "?netif=" + netif, function(netifstats) {
				network_graph(netifstats,"netstat","tx","rx");
				console.debug("Loaded netif stats for "+netif+" in "+((performance.now() - starttimenetif)/1000).toFixed(3)+" seconds.");
				});
		}
	</script>

{%- if session.admin %}
<form method="post" id="blockedform">
	<input type="hidden" name="act" value="changeblocked" />
	<input type="hidden" name="blocked" value="{{ "false" if router.blocked else "true" }}" />
</form>
{%- endif %}
{% endblock %}