<div class="row" style="background:transparent">
	{% if areas_exist %}
		<div class="{% if alerts or disabled_resources %}{% if tools_exist %}col-lg-4{% else %}col-lg-6{% endif %}{% else %}{% if tools_exist %}col-lg-6{% else %}col-lg-12{% endif %}{% endif %}" style="text-align:center; background:transparent">
			{% if not facility_occupants %}
				<h2>Nobody is in an access controlled<br>{{ facility_name }} area</h2>
			{% else %}
				{% regroup facility_occupants by area as area_occupants %}
				<h2>Area occupancy</h2>
				<p>
					Staff members are highlighted in <span class="success-highlight">green</span>.<br>
					Service personnel are highlighted in <span class="warning-highlight">orange</span>.<br>
					Users with expired reservations are highlighted in <span class="danger-highlight">red</span>.
				</p>
				{% for area in area_occupants %}
					{% include 'occupancy/occupancy_content.html' with area=area.grouper occupants=area.list transparent_bg=True center_th=True %}
				{% endfor %}
			{% endif %}
		</div>
	{% endif %}
	{% if tools_exist %}
		<div class="{% if alerts or disabled_resources %}{% if areas_exist %}col-lg-4{% else %}col-lg-6{% endif %}{% else %}{% if areas_exist %}col-lg-6{% else %}col-lg-12{% endif %}{% endif %}" style="text-align:center; background:transparent">
			{% if usage_events %}
				<h2>Tool usage</h2>
				<p>{% if usage_events|length > 1 %}{{ usage_events|length }} tools are in use{% endif %}&nbsp;</p>
				{# Panel is used to make table borders rounded. #}
				<div class="panel panel-default" style="background:transparent">
					<table class="table table-bordered table-condensed" style="background:transparent">
						<thead>
							<tr>
								<th style="text-align: center">Tool</th>
								<th style="text-align: center">User</th>
								<th style="text-align: center">In use since...</th>
							</tr>
						</thead>
						<tbody style="background:transparent">
						{% for u in usage_events %}
							<tr style="background:transparent">
								<td>{{ u.tool }}</td>
								<td><span {% if u.operator.is_staff %}class="success-highlight"{% endif %}>{{ u.operator.first_name }} {{ u.operator.last_name }}{% if u.user != u.operator %} on behalf of {{ u.user.first_name }} {{ u.user.last_name }}{% endif %}</span></td>
								<td>{{ u.start|date:"l @ g:i A" }}</td>
							</tr>
						{% endfor %}
						</tbody>
					</table>
				</div>
			{% else %}
				<h2>No {{ facility_name }} tools are in use</h2>
			{% endif %}
		</div>
	{% endif %}
	{% if alerts or disabled_resources %}
		<div class="{% if areas_exist and tools_exist %}col-lg-4{% else %}col-lg-6{% endif %}" style="text-align:center">
			<h2>Alerts and outages</h2>
			<p>{# For spacing #}&nbsp;</p>
			{% for a in alerts %}
				<div class="alert alert-danger">
					<table style="width:100%">
						<tr>
							<td style="width:100px"><span class="glyphicon glyphicon-alert danger-highlight" style="font-size:64px"></span></td>
							<td>
								{% if a.title %}<span style="font-weight:bold">{{ a.title }}</span><br>{% endif %}
								{{ a.contents|linebreaks }}
							</td>
						</tr>
					</table>
				</div>
			{% endfor %}
			{% for r in disabled_resources %}
				<div class="alert alert-danger">
					<table style="width:100%">
						<tr>
							<td style="width:100px"><span class="glyphicon glyphicon-leaf danger-highlight" style="font-size:64px"></span></td>
							<td>
								<span style="font-weight:bold">Resource outage: {{ r }}</span><br>
								{{ r.restriction_message }}
							</td>
						</tr>
					</table>
				</div>
			{% endfor %}
		</div>
	{% endif %}
</div>