<p>
    Staff members are highlighted in <span class="bg-success">&nbsp;green&nbsp;</span><br>
    Service personnel are highlighted in <span class="bg-warning">&nbsp;orange&nbsp;</span><br>
    {% if reservations_can_expire %}
    Users with expired reservations are highlighted in <span class="bg-danger">&nbsp;red&nbsp;</span>
    {% endif %}
</p>
<table class="table table-bordered table-condensed">
	<thead>
	<tr>
		<th>Tool</th>
		<th>User</th>
		<th>In use since...</th>
	</tr>
	</thead>
	<tbody>
	{% for tool in tool_summary %}
		<tr class="{% if tool.operator_is_any_part_of_staff %}success {% elif tool.operator_is_service_personnel %}warning {% endif %}{% if tool.problematic or not tool.operational or tool.required_resource_is_unavailable or tool.nonrequired_resource_is_unavailable %}problematic{% else %}healthy{% endif %} {% if tool.in_use %}in_use{% else %}idle{% endif %}">
			<td>
				{{ tool.get_tool_info_html|safe }}
				{# Output the state of the tool, summarizing any associated problems. #}
				{% if tool.in_use %}
					<span class="glyphicon glyphicon-user primary-highlight" title="{{ tool.user }} is using this tool"></span>
				{% endif %}
				{% if tool.delayed_logoff_in_progress %}
					<span class="glyphicon glyphicon-time primary-highlight" title="Delayed logoff is in effect for this tool"></span>
				{% endif %}
				{% if tool.scheduled_outage %}
					<span class="glyphicon glyphicon-time danger-highlight" title="A scheduled outage is in effect for this tool"></span>
				{% endif %}
				{% if tool.scheduled_partial_outage %}
					<span class="glyphicon glyphicon-time warning-highlight" title="An optional resource for this tool has an outage in effect"></span>
				{% endif %}
				{% if tool.problematic %}
					<span class="glyphicon glyphicon-wrench warning-highlight" title="This tool requires maintenance"></span>
				{% endif %}
				{% if tool.operational == False %}
					<span class="glyphicon glyphicon-fire danger-highlight" title="This tool is shut down"></span>
				{% endif %}
				{% if tool.required_resource_is_unavailable %}
					<span class="glyphicon glyphicon-leaf danger-highlight" title="This tool is unavailable because a required resource is unavailable"></span>
				{% endif %}
				{% if tool.nonrequired_resource_is_unavailable %}
					<span class="glyphicon glyphicon-leaf warning-highlight" title="This tool is operating in a diminished capacity because an optional resource is unavailable"></span>
				{% endif %}
			</td>
			{% if tool.in_use %}
				{# Output the operator & user of the tool. If the person viewing this page is a staff member, then also allow them to force the operator off the tool. #}
				<td>
					{% if user.is_staff or user.is_user_office %}
						<span class="glyphicon glyphicon-remove-circle grey pointer" onclick="force_user_off_of_tool('{% url 'disable_tool' tool.id %}')" title="Force {{ tool.operator }} to stop using the {{ tool.name }}"></span>
					{% endif %}
					{{ tool.user }}
				</td>
				<td>{{ tool.in_use_since|date:"MONTH_DAY_FORMAT" }} @ {{ tool.in_use_since|time }}</td>
			{% else %}
				<td aria-label="No user"></td>
				<td aria-label="Not in use"></td>
			{% endif %}
		</tr>
	{% endfor %}
	</tbody>
</table>
<script>
    $(".tool-info-tooltip").on('click', function () {
        let tooltip_class = $(this).data("tooltip-id");
        {# Remove other tool tooltips except for the tool we clicked on #}
        $("#tools .tooltip").not('.'+tooltip_class).remove();
        {# Check if current tool tooltip is open #}
        if ($('.'+tooltip_class).length)
        {
            {# Remove current tool tooltip #}
            $('.tooltip.'+tooltip_class).remove();
        }
        else
        {
            {# Set up new tooltip #}
            $(this).tooltip({template: '<div class="tooltip '+tooltip_class+'" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>', trigger: 'manual', html: 'true', container: '#tools'}).tooltip("show");
        }
    });
    $("[data-toggle='tooltip']").tooltip({html: 'true'});
</script>