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

{% block head %}
	{{super()}}
	<link href="/static/css/.table.min.css" rel="stylesheet">
{% endblock %}

{% block main %}
	<section class='container'>
			
		<div id='users'>
			
			<h1 class='left'>Users</h1>
			<div id='stat' class='right'>
				<p><b>Total</b>: {{total}}</p>
			</div>
			
			<table id='users-table'>
				
				<thead><tr>
					<th>Name</th>
					<th>Slug</th>
					<th>Joined</th>
					<th>Last login</th>
					<th>Moved</th>
					<th>Social</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.auth.google %}<a href="https://plus.google.com/{{usr.auth.google}}/">G</a>{% endif %}
							{% if usr.auth.facebook %}<a href="https://facebook.com/{{usr.auth.facebook}}/">F</a>{% endif %}
							{% if usr.auth.twitter %}<a href="https://twitter.com/{{usr.auth.twitter}}/">T</a>{% endif %}
						</td>
						<td id='{{usr.id}}-edit'>
							<a class='btn' href="/admin/delete/{{usr.id}}">DELETE</a>
						</td>
					</tr>
					{% endfor %}
				</tbody>
				</table>
		</div>
			
	</section>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
	<!-- TODO: Move this script to own file -->
	<script type="application/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 %}