{% extends "bootstrap.html" %}
{% block title %}{{super()}} :: Routers{% endblock %}
{% block head %}{{super()}}
	<script src="{{ url_for('static', filename='js/datatables/jquery.dataTables.min.js') }}"></script>
	<script src="{{ url_for('static', filename='js/datatables/dataTables.bootstrap.min.js') }}"></script>
	<link rel="stylesheet" href="{{ url_for('static', filename='css/datatables/dataTables.bootstrap.min.css') }}">
	<style type="text/css">
		@media(min-width:991px) {
			.text-nowrap-responsive {
				white-space: nowrap;
			}
		}
	</style>
{% endblock %}
{%- block search %}
<form class="navbar-form navbar-left" role="search">
	<div class="input-group">
		<input type="text" class="form-control" placeholder="Search routers" name="q" value="{{ query_str }}">
		<span class="input-group-btn">
			<button type="submit" class="btn btn-default">
				<span class="glyphicon glyphicon-search"></span>
			</button>
		</span>
	</div>
</form>
{%- endblock %}
{% block content %}
<div class="table-responsive">
	<table id="routerlist" class="table table-condensed table-striped table-bordered" style="margin-bottom: 8px;">
		<thead>
			<tr>
				<th style="width: 1%; padding-right: 5px; min-width: 240px;">Hostname</th>
				<th style="width: 45px; padding-right: 5px;">Status</th>
				<th style="padding-right: 5px;">Hood</th>
				<th style="padding-right: 5px;">User</th>
				<th style="padding-right: 5px;">Hardware</th>
				<th style="padding-right: 5px;">Created</th>
				<th style="padding-right: 5px;">Uptime</th>
				<th style="padding-right: 5px;">Last contact</th>
				<th>Users</th>
			</tr>
		</thead>
		<tbody>
			{%- for router in routers %}
			<tr>
				<td class="text-responsive"><a href="{{ url_for("router_info", dbid=router.id) }}">{{ router.hostname }}</a>
				{%- if not router.lat and not router.lng %} - <span style="color:#d90000">Reset!</span>{%- endif %}{%- if router.blocked and not router.v2 %} - <span style="color:#d90000">Blocked!</span>{%- endif %}
				</td>
				<td class="text-center" data-order="{{ router.status }}"><span class="{{ router.status|status2css }}">{{ router.status }}</span></td>
				<td{%- if router.local %} class="hoodlocal"{%- elif router.v2 %} class="hoodv2"{%- endif %}>{{ router.hood }}</td>
				<td>{%- if router.nickname %}{{ router.nickname }}{%- elif not router.contact %}<span style="color:#d90000">missing</span>{%- endif %}</td>
				<td class="text-nowrap">{{ router.hardware }}</td>
				<td class="text-nowrap">{{ router.created|utc2local|format_dt_date }}</td>
				<td class="text-nowrap" data-order="{{ router.sys_uptime if router.status == "online" else 0 }}">{{ router.sys_uptime|format_ts_diff }}</td>
				<td class="text-nowrap">{{ router.last_contact|utc2local|format_dt_date }}</td>
				<td>{{ router.clients }}</td>
			</tr>
			{%- endfor %}
		</tbody>
	</table>
</div>
<div style="margin-bottom: 20px;">
	{{ numrouters }} Router{{ "s" if (numrouters == 1) else "" }} found.
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$("#routerlist").DataTable({
			"paging": false,
			"info": false,
			"searching": false
		});
	});
</script>
{% endblock %}