{% extends 'templates/base.html' %}
{% block title %}Tracman | Invite Requests{% endblock %}

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

{% block main %}
	<section class='dark'>
		<div class='container'>
			<h1>Requests</h1>

			<table id='requests-table' class='table table-hover'>
				<thead><tr>
					<th>Name</th>
					<th>Email</th>
					<th>Message</th>

					<th>Requested</th>
					<th>Invited</th>
					<th>User</th>
				</tr></thead>
				<tbody>
				{% for request in requests %}
					<tr class="table-{% if request.userId %}success{% elif request.granted %}info{% else %}danger{% endif %}">
						<td>{{ request.name }}</td>
						<td>{{ request.email }}</td>
						<td>{{ request.beg | replace("\r\n", "<br>") | safe }}</td>
						<td id='{{ request.id }}-requested'></td>
						<td id='{{ request.id }}-granted'>
							{% if not request.granted %}
								<form action="" method="POST">
									<button type="submit" class='btn btn-block btn-default' name="invite" value="{{ request.id }}">INVITE</button>
								</form>
							{% endif %}
						</td>
						<td>
							{% if request.userId %}
								User: <a href="/trac/id/{{ request.userId }}">{{ request.userId }}</a>
							{% endif %}
						</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
			
		</div>
	</section>

	<script src="/static/js/moment.min.js"></script>
	<script>
		{% for request in requests %}
			$('#{{ request.id }}-requested').text(
				moment("{{ request.requestedTime }}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
				// Sun Mar 20 2016 19:21:55 GMT+0100 (CET)
			);
			{% if request.granted %}
				$('#{{ request.id }}-granted').text(
					moment("{{ request.granted }}", "ddd MMM DD YYYY HH:mm:ss [GMT]ZZ").fromNow()
				);
			{% endif %}
		{% endfor %}
	</script>

{% endblock %}