{% if nanofab_occupants|length == 0 %}
	Nobody is in an access controlled NanoFab area.
{% else %}
	Staff members are highlighted in <span class="success-highlight">green</span>.<p>
	{% regroup nanofab_occupants|dictsort:"area.name" by area as area_occupants %}
	{% for area in area_occupants %}
		{# Panel is used to make table borders rounded. #}
		<div class="panel panel-default">
			<table class="table table-bordered table-condensed">
				<thead>
				<tr>
					<th colspan="4">
						<span class="primary-highlight">{{ area.grouper }}</span>
						{% if area.list|length > 1 %}<span class="light-grey pull-right">{{ area.list|length }} people</span>{% endif %}
					</th>
				</tr>
				<tr>
					<th>User</th>
					<th>Since</th>
					<th>Working on project...</th>
				</tr>
				</thead>
				<tbody>
				{% for o in area.list %}
					<tr>
						<td>
							{% if user.is_staff %}
								<span class="glyphicon glyphicon-remove-circle grey pointer" onclick="force_user_out_of_the_area('{% url 'force_area_logout' o.customer_id %}')" title="Force {{ o.customer }} to log out of the {{ o.area }}"></span>
							{% endif %}
							<span {% if o.customer.is_staff %}class="success-highlight"{% endif %}>{{ o.customer.first_name }} {{ o.customer.last_name }}</span>
						</td>
						<td>{{ o.start|date:"l @ g:i A" }}</td>
						<td>{{ o.project }}</td>
					</tr>
				{% endfor %}
				</tbody>
			</table>
		</div>
	{% endfor %}
{% endif %}