{% if occupants|length > 0 %}
	Staff members are highlighted in <span class="success-highlight">green</span>.<p>
	{# 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.name }} occupancy</span>
					{% if occupants|length > 1 %}
						<span class="pull-right">
							{% if area.maximum_capacity != 0 and area.occupancy_count >= area.danger_capacity %}<span style="color:red"><span class="glyphicon glyphicon-alert" style="margin-right: 10px"></span>
							{% elif area.maximum_capacity != 0 and area.occupancy_count >= area.warning_capacity %}<span style="color:orange"><span class="glyphicon glyphicon-alert" style="margin-right: 10px"></span>
							{% else %}<span>{% endif %}
								{{ area.occupancy_count }}
							</span>{% if area.maximum_capacity != 0 %} / {{ area.maximum_capacity }}{% endif %} people
							{% if occupants|length != area.occupancy_count %}
								{% with occupancy=area.occupancy_count|stringformat:"d"  %}
									{% with negative_occupancy="-"|add:occupancy %}
										(+ {{ occupants|length|add:negative_occupancy }} staff)
									{% endwith %}
								{% endwith %}
							{% endif %}
						</span>
					{% endif %}
				</th>
			</tr>
			<tr>
				<th>User</th>
				<th>Since</th>
				<th>Working on project...</th>
			</tr>
			</thead>
			<tbody>
			{% for o in occupants %}
				<tr>
					<td><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>
{% endif %}