{% extends 'templates/base.html' %}
{% block title %}{{super()}} | Admin{% endblock %}

{% block head %}
	{{ super() }}
	<style>
		.container { max-width:90%; }
	</style>
{% endblock %}

{% block main %}
	<section class='dark'>
		<div class='container' id='tabs'>
			
			<div id='users'>
				<h1>Users</h1>
				<table id='users-table' class='table table-hover'>
						<thead><tr>
							<th>Name</th>
							<th>Slug</th>
							<th>Joined</th>
							<th>Last login</th>
							<th>Moved</th>
							<th>Accounts</th>
							<th>Edit</th>
						</tr></thead>
						<tbody>
						{% for usr in users %}
							<tr>
								<td>{{usr.name}}</td>
								<td><a href="/map/{{usr.slug}}">/{{usr.slug}}</a></td>
								<td id='{{usr.id}}-created'></td>
								<td id='{{usr.id}}-logged'></td>
								<td id='{{usr.id}}-moved'></td>
								<td id='{{usr.id}}-accounts'>
									{% if usr.googleID %}
										<a href="https://plus.google.com/{{usr.googleID}}/">Google</a>
									{% endif %}
								</td>
								<td id='{{usr.id}}-edit'><form action="/admin/users" method="POST">
									<button type="submit" class='btn btn-block btn-danger' name="delete" value="{{usr.id}}">DELETE</button>
								</form></td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
			</div>
			
		</div>
	</section>

	<script src="/static/js/moment.min.js"></script>
	<script type="text/javascript">
	
		/* DATE/TIME FORMATS */ {
			
			// Users
			{% for usr in users %}
				{% if usr.created %}
					$('#{{usr.id}}-created').text(
						moment("{{usr.created}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").format('l')
					);
				{% endif %}
				
				{% if usr.lastLogin %}
					$('#{{usr.id}}-logged').text(
						moment("{{usr.lastLogin}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
					);
				{% endif %}
				
				{% if usr.last.time %}
					$('#{{usr.id}}-moved').text(
						moment("{{usr.last.time}}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
					);
				{% else %}
					$('#{{usr.id}}-moved').text("never");
				{% endif %}
			{% endfor %}
			
		}
		
	</script>

{% endblock %}