<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 tool_reservations_can_expire %}
        Users with expired reservations are highlighted in <span class="bg-danger">&nbsp;red&nbsp;</span>
        <br>
    {% endif %}
    Users logged in outside their allowed usage schedule are highlighted in <span class="bg-danger">&nbsp;red&nbsp;</span>
    <br>
</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 {% elif tool.in_use_without_reservation or tool.in_use_outside_authorized_schedule %}danger {% 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>
