{% extends "bootstrap.html" %}
{% block title %}{{super()}} :: {{ user.nickname }}{% 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">
	.navbar, .table-condensed {
		margin-bottom: 0;
	}
	.table-condensed tr:last-child td, th {
		border-bottom: 1px solid #ddd;
	}
	@media(min-width:991px) {
		.text-nowrap-responsive {
			white-space: nowrap;
		}
	}
</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;">User: {{ user.nickname }}</h2></div>
	{%- if user.created and is_authorized_for(user.nickname) -%}
	<div class="col-xs-12 col-sm-2 text-right" style="margin-top: 10px; margin-bottom: 10px;">
		<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="#" data-toggle="modal" data-target="#changepw">Change Password</a></li>
				<li><a href="#" data-toggle="modal" data-target="#changemail">Change E-Mail Address</a></li>
				<li><a href="#" onclick="$('#delaccform').submit()">Delete Account</a></li>
				{%- endif %}
				{%- if authadmin %}
				<li><a href="#" onclick="$('#adminform').submit()">Toggle admin</a></li>
				<li><a href="#" onclick="$('#abuseform').submit()">Toggle abuse</a></li>
				{%- endif %}
			</ul>
		</div>
	</div>
	{%- endif %}
</div>
<div class="row">
	<div class="hidden-xs col-sm-2">
		<div class="panel panel-default">
			<div class="panel-body" style="padding: 5px;">
				<a href="https://de.gravatar.com/" rel="nofollow" title="&Auml;ndere dein Avatar auf gravatar.com"><img id="avatar" alt="Avatar" class="img-responsive center-block" src="{{ user.get('email', '')|gravatar_url }}&s=150" style="width: 150px; height: 150px;" /></a>
			</div>
		</div>
	</div>
	<div class="col-xs-12 col-sm-10">
		<div class="panel panel-default">
			<div class="panel-heading">User Info</div>
			<div class="panel-body">
				<table class="table table-condensed">
					<tr><th>Nickname</th><td>
						{{ user.nickname }}
						(<a href="{{ url_for('router_list', q='nickname:^%s$' % user.nickname.replace(" ","_")) }}">Filter</a>)
					</td></tr>
					{%- if user.email %}
					<tr><th>E-Mail</th><td>
						{{ user.email|anon_email }}
					</td></tr>
					{%- endif %}
					<tr><th>Created</th><td>
						{%- if user.created -%}
							{{ user.created|utc2local|format_dt_date }}
						{%- else -%}
							<span class="glyphicon glyphicon-remove"></span>
							Automatically imported stub from netmon
						{%- endif -%}
					</td></tr>
					<tr><th>Admin</th><td>
						<span class="glyphicon glyphicon-{%- if user.admin -%}ok{%- else -%}remove{%- endif -%}"></span>
					</td></tr>
					<tr><th>Receive abuse reports</th><td>
						<span class="glyphicon glyphicon-{%- if user.abuse -%}ok{%- else -%}remove{%- endif -%}"></span>
					</td></tr>
				</table>
			</div>
		</div>
	</div>
</div>
<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: 90px;">Hostname</th>
				<th style="width: 45px; padding-right: 5px;">Status</th>
				<th style="padding-right: 5px;">Hood</th>
				<th style="padding-right: 5px;">Firmware</th>
				<th style="padding-right: 5px;">Hardware</th>
				<th style="padding-right: 5px;">Created</th>
				<th style="padding-right: 5px;">Uptime</th>
				<th>Clients</th>
			</tr>
		</thead>
		<tbody>
			{%- set total_clients = 0 %}
			{%- for router in routers %}
			<tr>
				<td class="text-nowrap-responsive"><a href="{{ url_for("router_info", dbid=router.id) }}">{{ router.hostname }}</a>
				{%- if router.reset %} - <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>{{ router.firmware }}</td>
				<td class="text-nowrap">{{ router.get("hardware", "") }}</td>
				<td class="text-nowrap">{{ router.created|utc2local|format_dt_date }}</td>
				<td class="text-nowrap">{{ router.sys_uptime|format_ts_diff }}</td>
				<td>{{ router.clients }}</td>
				{%- set total_clients = total_clients + router.clients %}
			</tr>
			{%- endfor %}
		</tbody>
	</table>
</div>
<div style="margin-bottom: 20px;">
	{{ routers_count }} Router{{ "s" if (routers_count == 1) else "" }} found.
</div>
<script type="text/javascript">
	$(document).ready(function() {
		$("#routerlist").DataTable({
			"paging": false,
			"info": false,
			"searching": false,
			/*"responsive": {
				"details": false
			},*/
			"columnDefs": [
				{"orderable": false, "targets": -2}
			]
		});
	});
</script>
{# FIXME: User's router list #}

<div class="modal fade" id="changepw" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Change Password for {{ user.nickname }}</h4>
			</div>
			<form method="post" class="form-horizontal">
				<div class="modal-body">
					<div class="form-group">
						<label class="col-sm-4 control-label">New password</label>
						<div class="col-sm-8">
							<input type="password" name="password" class="form-control" placeholder="Password" autocomplete="new-password" required />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">Repeat new Password</label>
						<div class="col-sm-8">
							<input type="password" name="password_rep" class="form-control" autocomplete="off" placeholder="Repeat password" required />
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<input type="hidden" name="action" value="changepw" />
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="modal fade" id="changemail" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Change E-Mail address for {{ user.nickname }}</h4>
			</div>
			<form method="post" class="form-horizontal">
				<div class="modal-body">
					<div class="form-group">
						<label class="col-sm-4 control-label">New E-Mail address</label>
						<div class="col-sm-8">
							<input type="email" name="email" class="form-control" placeholder="New E-Mail" required />
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-4 control-label">Repeat E-Mail address</label>
						<div class="col-sm-8">
							<input type="email" name="email_rep" class="form-control" autocomplete="off" placeholder="Repeat E-Mail" required />
						</div>
					</div>
					{%- if not session.admin %}
					<b>Warning</b>:
					When you change your E-Mail address, your password will be reset and sent to your new address.
					{%- endif %}
				</div>
				<div class="modal-footer">
					<input type="hidden" name="action" value="changemail" />
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-primary">Save</button>
				</div>
			</form>
		</div>
	</div>
</div>

{%- if authadmin %}
<form method="post" id="adminform">
	<input type="hidden" name="action" value="changeadmin" />
	<input type="hidden" name="admin" value="{{ "false" if user.admin else "true" }}" />
</form>
<form method="post" id="abuseform">
	<input type="hidden" name="action" value="changeabuse" />
	<input type="hidden" name="abuse" value="{{ "false" if user.abuse else "true" }}" />
</form>
{%- endif %}
{%- if authuser %}
<form method="post" id="delaccform">
	<input type="hidden" name="action" value="deleteaccount" />
</form>
{%- endif %}
{% endblock %}