{% load custom_tags_and_filters %}
<div class="row" style="margin-top:30px">
    <div class="col-xs-offset-3 col-xs-6"
         onclick="{% if back == 'back_to_start' %}load_choices('{{ customer.badge_number }}'){% elif back == 'back_to_category' %}view_category('{% url 'kiosk_category_choices' tool.category customer.id %}'){% endif %}">
        <div class="alert alert-warning" style="text-align:center; margin-bottom:0; font-size:x-large">Go back</div>
    </div>
</div>
<h1 style="display:inline-block">{{ tool.name_or_child_in_use_name }}</h1>
<button class="btn btn-default"
        style="text-align:center;
               margin-top:50px;
               margin-bottom:10px;
               margin-left:30px;
               vertical-align:super;
               font-size:x-large"
        onclick="tool_report_problem('{% url 'kiosk_tool_report_problem' tool.id customer.id back %}')">
    Report a problem
</button>
<button class="btn btn-default"
        style="text-align:center;
               margin-top:50px;
               margin-bottom:10px;
               margin-left:10px;
               vertical-align:super;
               font-size:x-large"
        onclick="tool_post_comment('{% url 'kiosk_tool_post_comment' tool.id customer.id back %}')">
    Post a comment
</button>
{# Display tool status... #}
<div class="tool-status">
    {% if tool.in_use %}
        <div class="primary-highlight media">
            <span class="glyphicon glyphicon-user pull-left notification-icon"></span>
            {% with tool.get_current_usage_event as current_usage_event %}
                <h2>
                    {% if current_usage_event.operator.id == customer.id %}
                        You are using this tool
                    {% else %}
                        {{ current_usage_event.operator }} is using this tool
                    {% endif %}
                    {% if current_usage_event.operator.id != current_usage_event.user.id %}
                        on behalf of {{ current_usage_event.user }}
                    {% endif %}
                    for the project named {{ current_usage_event.project.name }} since {{ current_usage_event.start }}.
                </h2>
            {% endwith %}
        </div>
        {% if tool.in_use %}
            {% if customer.is_staff or customer.is_user_office %}
                <p>
                    You may <a href="javascript:void(0)" onclick="disable_tool(undefined, true);">force {{ tool.get_current_usage_event.operator }} off this tool</a>.
                </p>
            {% elif not tool.post_usage_questions %}
                {% if remaining_reservation_duration and "tool"|customization:"tool_control_ongoing_reservation_force_off" == "enabled" %}
                    <p>
                        You may <a href="javascript:void(0)" onclick="disable_tool(undefined, true)">force {{ tool.get_current_usage_event.operator }} off this tool</a> since you have an ongoing reservation and the tool has no post usage questions.
                    </p>
                {% endif %}
            {% endif %}
        {% endif %}
    {% elif tool.delayed_logoff_in_progress %}
        {% with tool.get_delayed_logoff_usage_event as delayed_logoff_event %}
            <div class="primary-highlight media">
                <span class="glyphicon glyphicon-time pull-left notification-icon"></span>
                <h2>
                    {{ delayed_logoff_event.operator }} has finished using the {{ tool.name_or_child_in_use_name }} but delayed logoff is in effect. The tool will be available at {{ delayed_logoff_event.end|time }}.
                </h2>
            </div>
        {% endwith %}
    {% elif not tool.operational or tool.required_resource_is_unavailable or tool.scheduled_outages %}
        <div class="danger-highlight media">
            <span class="glyphicon glyphicon-ban-circle pull-left notification-icon"></span>
            <h2>
                This tool is <strong>shut down</strong>.
            </h2>
        </div>
    {% elif tool.nonrequired_resource_is_unavailable %}
        <div class="warning-highlight media">
            <span class="glyphicon glyphicon-exclamation-sign pull-left notification-icon"></span>
            <h2>
                This tool is <strong>operational</strong> but not all resources are available.
            </h2>
        </div>
    {% else %}
        <div class="success-highlight media">
            <span class="glyphicon glyphicon-ok pull-left notification-icon"></span>
            <h2>
                This tool is <strong>operational</strong> and <strong>idle</strong>.
            </h2>
        </div>
    {% endif %}
</div>
{% if tool.active_counters %}
    <div class="tool-counters">
        {% for counter in tool.active_counters %}
            <div class="tool-counter">
                <div class="tool-counter-name">
                    {{ counter.name }}: <span style="font-weight: bold; {% if counter.value_color %}color: {{ counter.value_color }}{% endif %}">{{ counter.value|floatformat:-2 }}</span>
                </div>
                <div class="tool-counter-description">{{ counter.description|linebreaksbr }}</div>
            </div>
        {% endfor %}
    </div>
{% endif %}
{# dangers #}
{% if tool.unavailable_required_resources or tool.scheduled_outages %}
    <div class="danger-status">
        {# Display any unavailable required resources... #}
        {% for r in tool.unavailable_required_resources %}
            <div class="media">
                <span class="glyphicon glyphicon-leaf pull-left notification-icon danger-highlight"></span>
                <div class="media-body">
                    <span class="media-heading">A required resource is unavailable: {{ r.name }} <span class="light-grey">({{ r.category }})</span></span>
                    <span class="media-middle">{{ r.restriction_message }}</span>
                </div>
            </div>
        {% endfor %}
        {# Display any resources scheduled outages... #}
        {% for o in tool.scheduled_outages %}
            <div class="media">
                <span class="glyphicon glyphicon-time pull-left notification-icon danger-highlight"></span>
                <div class="media-body">
                    <span class="media-heading">{{ o.title }}<span class="light-grey">({{ o.resource.category }})</span></span>
                    {% if o.details %}<span class="media-middle">{{ o.details }}</span>{% endif %}
                    <span class="media-bottom">{{ o.creator }} scheduled this outage from {{ o.start }} until {{ o.end }}.</span>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
{# warnings #}
{% if tool.unavailable_nonrequired_resources or tool.scheduled_partial_outages or tool.problems %}
    <div class="warning-status">
        {# Display any unavailable non-required resources... #}
        {% for r in tool.unavailable_nonrequired_resources %}
            <div class="media">
                <span class="glyphicon glyphicon-leaf pull-left notification-icon warning-highlight"></span>
                <div class="media-body">
                    <span class="media-heading">An optional resource is unavailable: {{ r.name }} <span class="light-grey">({{ r.category }})</span></span>
                    <span class="media-middle">{{ r.restriction_message }}</span>
                </div>
            </div>
        {% endfor %}
        {# Display any non-required resources scheduled outages... #}
        {% for o in tool.scheduled_partial_outages %}
            <div class="media">
                <span class="glyphicon glyphicon-time pull-left notification-icon warning-highlight"></span>
                <div class="media-body">
                    <span class="media-heading">An optional resource has an outage: {{ o.resource.name }} <span class="light-grey">({{ o.resource.category }})</span></span>
                    <span class="media-middle">{{ o.title }}
                        {% if o.details %}: {{ o.details }}{% endif %}
                    </span>
                    <span class="media-bottom">{{ o.creator }} scheduled this outage from {{ o.start }} until {{ o.end }}.</span>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
{% if user.is_staff and tool_credentials %}
    <div class="media" style="margin-bottom: 20px">
        <a onclick="toggle_details(this)"
           data-toggle="collapse"
           data-target="#tool_credentials"
           class="pointer">
            <span class="glyphicon glyphicon-lock pull-left notification-icon warning-highlight"></span><span class="glyphicon glyphicon-chevron-right pull-left chevron"></span>
        </a>
        <div class="media-body">
            <div style="margin-bottom: 15px">Credentials</div>
            <div id="tool_credentials" class="collapse">
                <ul>
                    {% for cred in tool_credentials %}
                        <li>
                            <i class="glyphicon glyphicon-user"></i> {{ cred.username|default_if_none:"" }}
                            {% if cred.password %}<i class="glyphicon glyphicon-lock"></i> {{ cred.password }}{% endif %}
                            {% if cred.comments %}({{ cred.comments }}){% endif %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endif %}
{% if tool.problems %}
    <div class="tool-problems">
        {# Display all problems and shutdowns... #}
        {% for t in tool.problems %}
            <div class="media">
                <a onclick="toggle_details(this)"
                   data-toggle="collapse"
                   data-target="#task_{{ t.id }}_details"
                   class="pointer">
                    {% if t.force_shutdown %}
                        <span class="glyphicon glyphicon-fire pull-left notification-icon danger-highlight"></span>
                    {% else %}
                        <span class="glyphicon glyphicon-wrench pull-left notification-icon warning-highlight"></span>
                    {% endif %}
                    <span class="glyphicon glyphicon-chevron-{% if tool_control_show_task_details %}down{% else %}right{% endif %} pull-left chevron"></span>
                </a>
                <div class="media-body">
                    {% if t.problem_category %}<span class="media-heading">{{ t.problem_category }}</span>{% endif %}
                    <span class="media-middle">{{ t.problem_description }}</span>
                    {% if t.estimated_resolution_time %}
                        <span class="media-middle">Estimated resolution time is {{ t.estimated_resolution_time }}.</span>
                    {% endif %}
                    <div id="task_{{ t.id }}_details" class="collapse{% if tool_control_show_task_details %} in{% endif %}">
                        <span class="media-bottom">
                            This task was created by {{ t.creator }} on {{ t.creation_time }}.
                            {% if t.force_shutdown %}The tool will remain shut down until this task is resolved.{% endif %}
                        </span>
                        {% if t.progress_description %}
                            <div class="media">
                                <span class="glyphicon glyphicon-info-sign pull-left notification-icon primary-highlight"></span>
                                <div class="media-body">
                                    <span class="media-heading">Progress updates</span>
                                    <span class="media-middle">{{ t.progress_description|linebreaksbr }}</span>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endif %}
{% if tool.comments or customer.is_staff and tool.staff_only_comments %}
    <div class="tool-comments">
        {# Display all comments... #}
        {% for c in tool.comments %}
            <div class="media">
                <span class="glyphicon glyphicon-comment pull-left notification-icon primary-highlight"></span>
                <div class="media-body">
                    <span class="media-middle">{{ c.content|linebreaksbr }}</span>
                    <span class="media-bottom">{{ c.author }} wrote this comment on {{ c.creation_date }}</span>
                </div>
            </div>
        {% endfor %}
        {# Display all staff comments #}
        {% if customer.is_staff and tool.staff_only_comments %}
            <div class="media">
                <a onclick="toggle_details(this)"
                   data-toggle="collapse"
                   data-target="#staff_only_comments"
                   class="pointer">
                    <span class="glyphicon glyphicon-eye-close pull-left notification-icon warning-highlight"></span><span class="glyphicon glyphicon-chevron-right pull-left chevron"></span>
                </a>
                <div class="media-body">
                    Staff Only
                    <div id="staff_only_comments" class="collapse">
                        {% for c in tool.staff_only_comments %}
                            <div class="media">
                                <span class="glyphicon glyphicon-comment pull-left notification-icon primary-highlight"></span>
                                <div class="media-body">
                                    <span class="media-middle">{{ c.content|linebreaksbr }}</span>
                                    <span class="media-bottom">{{ c.author }} wrote this comment on {{ c.creation_date }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
{% endif %}
{% if rendered_configuration_html %}
    <div class="form-group">
        <h2>Configuration</h2>
        {{ rendered_configuration_html }}
    </div>
{% endif %}
{# Display tool control... #}
<form id="tool_control" style="margin-top:20px">
    {% csrf_token %}
    <input type="hidden" name="tool_id" value="{{ tool.id }}">
    <input type="hidden" name="customer_id" value="{{ customer.id }}">
    <input type="hidden" name="back" value="{{ back }}">
    {% if tool.in_use %}
        {% if tool.get_current_usage_event.operator.id == customer.id or tool.get_current_usage_event.user.id == customer.id %}
            {% if post_usage_questions %}
                <h2>Post usage questions</h2>
                {{ post_usage_questions }}
            {% endif %}
            {% if tool.max_delayed_logoff is not None and not tool.delayed_logoff_in_progress %}
                <h2>Delayed logoff</h2>
                <div class="form-group">
                    Use the following field to prevent others from using the tool for
                    <input id="downtime"
                           type="number"
                           name="downtime"
                           class="form-control"
                           style="display:inline;
                                  width:auto"
                           min="5"
                           max="{{ tool.max_delayed_logoff }}"
                           inputmode="numeric"
                           pattern="[0-9]*"
                           placeholder="0">
                    minutes after disabling the tool.
                    <a id="delayed_logoff_help"
                       class="pointer"
                       tabindex="0"
                       data-toggle="popover"
                       data-placement="bottom"
                       data-trigger="focus"
                       data-content="Some tools may require downtime after you finish using them. (For example, to perform automated cleaning or pump-down). Once you click &quot;Stop using the {{ tool.name_or_child_in_use_name }}&quot; the tool interlock will immediately disable the tool and it will remain unusable for the specified duration. Leave the duration blank to indicate that no post-usage downtime is required.">What's this?</a>
                </div>
            {% endif %}
            <div class="row">
                <div class="col-xs-offset-3 col-xs-6" style="margin-top:30px">
                    <h2 id="answer_to_proceed" style="text-align:center">
                        Please answer the required questions (above) to stop using the {{ tool.name_or_child_in_use_name }}
                    </h2>
                    <div id="stop_button">
                        <div class="alert alert-danger"
                             style="text-align:center;
                                    margin-bottom:0;
                                    font-size:x-large"
                             onclick="disable_tool()">
                            <span class="glyphicon glyphicon-stop"></span> Stop using the {{ tool.name_or_child_in_use_name }}
                            {% if not user.is_staff and remaining_reservation_duration %}
                                and relinquish the remaining {{ remaining_reservation_duration }} minutes of your reservation
                            {% endif %}
                        </div>
                        {% if remaining_reservation_duration and user.is_staff %}
                            <div class="alert alert-danger"
                                 style="text-align:center;
                                        margin-bottom:0;
                                        margin-top: 10px;
                                        font-size:x-large"
                                 onclick="disable_tool(true)">
                                <span class="glyphicon glyphicon-stop"></span> Stop using the {{ tool.name_or_child_in_use_name }} and relinquish the remaining {{ remaining_reservation_duration }} minutes of your reservation
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}
        <div style="width: 100%;padding-top: 40px;border-bottom: 1px dashed lightgray"></div>
        {% if not enable_is_take_over and tool.allow_reservation %}
            <h1>Make a reservation</h1>
            {% include 'kiosk/tool_project_selection_snippet.html' with active_projects=customer.active_projects tool=tool %}
            <div id="start_reserve" class="col-xs-offset-3 col-xs-6" style="display:none;margin-top:30px">
                <div class=" alert alert-info"
                     style="text-align:center;
                            margin-bottom:0;
                            font-size:x-large"
                     onclick="tool_reservation('{% url 'kiosk_tool_reservation' tool.id customer.id back %}')">
                    <span class="glyphicon glyphicon-calendar"></span> Reserve the {{ tool.name }}
                </div>
            </div>
        {% endif %}
    {% endif %}
    {% if not tool.in_use or enable_is_take_over %}
        {% if show_wait_list and not wait_list_position == 1 or show_wait_list and enable_is_take_over %}
            <a onclick="toggle_details(this)"
               data-toggle="collapse"
               data-target="#use-tool"
               class="pointer"
               style="padding-bottom: 10px;
                      padding-top: 10px;
                      display: block;
                      color: darkgrey;
                      font-size: large">
                <span class="glyphicon glyphicon-chevron-right chevron"></span>Skip Wait List
            </a>
        {% endif %}
        <div id="use-tool"
             class="{% if show_wait_list and not wait_list_position == 1 or show_wait_list and enable_is_take_over %}collapse{% endif %}">
            {% if customer.is_staff or customer.is_service_personnel and tool in customer.qualifications.all or tool.ready_to_use and tool in customer.qualifications.all %}
                {% if enable_is_take_over %}<h1>Take over using this tool</h1>{% endif %}
                {% include 'kiosk/tool_project_selection_snippet.html' with active_projects=customer.active_projects tool=tool %}
                {% if pre_usage_questions %}
                    <div id="pre_usage_questions" style="display:none">
                        <h2>Pre usage questions</h2>
                        {{ pre_usage_questions }}
                    </div>
                {% endif %}
                <div id="start_reserve" style="display:none; margin-top:20px">
                    {% if tool.is_parent_tool %}
                        <h4>You have {{ tool.tool_children_set.all|length|add:1 }} options to use this tool:</h4>
                        <div class="col-xs-6" style="margin-top: 15px">
                            <div class="start_button alert alert-success"
                                 style="text-align:center;
                                        margin-bottom:0;
                                        font-size:x-large;
                                        display:none"
                                 onclick="enable_tool()">
                                <span class="glyphicon glyphicon-play"></span>
                                {% if enable_is_take_over %}
                                    Take over using the {{ tool.name }}
                                {% else %}
                                    Start using the {{ tool.name }}
                                {% endif %}
                            </div>
                        </div>
                        {% for alternate_tool in tool.tool_children_set.all %}
                            <div class="col-xs-6" style="margin-top: 15px">
                                <div class="start_button alert alert-success"
                                     style="text-align:center;
                                            margin-bottom:0;
                                            font-size:x-large;
                                            display:none"
                                     onclick="enable_tool('{{ alternate_tool.id }}')">
                                    <span class="glyphicon glyphicon-play"></span>
                                    {% if enable_is_take_over %}
                                        Take over using the {{ alternate_tool.name }}
                                    {% else %}
                                        Start using the {{ alternate_tool.name }}
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                        {% if tool.allow_reservation %}
                            <div class="col-xs-offset-3 col-xs-5" style="margin-top: 15px">
                                <div class=" alert alert-info"
                                     style="text-align:center;
                                            margin-bottom:0;
                                            font-size:x-large"
                                     onclick="tool_reservation('{% url 'kiosk_tool_reservation' tool.id customer.id back %}')">
                                    <span class="glyphicon glyphicon-calendar"></span> Reserve the {{ tool.name }}
                                </div>
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="{% if tool.allow_reservation %} col-xs-offset-1 col-xs-5 {% else %} col-xs-offset-3 col-xs-6 {% endif %}">
                            <div class="start_button alert alert-success"
                                 style="text-align:center;
                                        margin-bottom:0;
                                        font-size:x-large;
                                        display:none"
                                 onclick="enable_tool()">
                                <span class="glyphicon glyphicon-play"></span>
                                {% if enable_is_take_over %}
                                    Take over using the {{ tool.name }}
                                {% else %}
                                    Start using the {{ tool.name }}
                                {% endif %}
                            </div>
                        </div>
                        {% if tool.allow_reservation %}
                            <div class="col-xs-5">
                                <div class=" alert alert-info"
                                     style="text-align:center;
                                            margin-bottom:0;
                                            font-size:x-large"
                                     onclick="tool_reservation('{% url 'kiosk_tool_reservation' tool.id customer.id back %}')">
                                    <span class="glyphicon glyphicon-calendar"></span> Reserve the {{ tool.name }}
                                </div>
                            </div>
                        {% endif %}
                    {% endif %}
                </div>
            {% elif tool not in customer.qualifications.all %}
                <h2>
                    <p>You have not been qualified to use this tool yet.</p>
                    <p>
                        Please contact the primary tool owner, {{ tool.primary_owner }}, if you would like to receive training for tool qualification.
                    </p>
                    {% if tool.backup_owners.all.exists %}
                        <p>
                            {% if tool.backup_owners.all.count == 1 %}
                                If you are unable to reach {{ tool.primary_owner }} then please contact the backup tool owner, {{ tool.backup_owners.all|first }}.
                            {% elif tool.backup_owners.all.count > 1 %}
                                If you are unable to reach {{ tool.primary_owner }} then please contact one of the backup tool owners:
                                <ul>
                                    {% for x in tool.backup_owners.all %}<li>{{ x }}</li>{% endfor %}
                                </ul>
                            {% endif %}
                        </p>
                    {% endif %}
                    {% if tool.superusers.all.count == 1 %}
                        {% with tool.superusers.all|first as superuser %}
                            <p>
                                For equipment training, you can contact the primary, backup or the superuser, {{ superuser.get_contact_info_html|safe }}.
                            </p>
                        {% endwith %}
                    {% elif tool.superusers.all.count > 1 %}
                        <p>
                            For equipment training, you can contact the primary, backup or one of the superusers:
                            <ul>
                                {% for x in tool.superusers.all %}<li>{{ x }}</li>{% endfor %}
                            </ul>
                        </p>
                    {% endif %}
                </h2>
            {% endif %}
        </div>
    {% endif %}
</form>
{% if show_wait_list %}
    <div style="margin-top: 15px; display: inline-block; width: 100%;">
        <div style="margin-bottom: 10px; font-size: x-large; width: 100%;">
            <span>This tool has a wait list. There are <strong>{{ wait_list.count }}</strong> people in line to use this tool.</span>
            {% if not wait_list_position == 0 %}
                <br>
                <span>You are number <strong>{{ wait_list_position }}</strong> in line to use this tool.</span>
            {% endif %}
        </div>
        <div id="wait-list" style="margin-top: 20px;">
            {% if wait_list_position == 0 %}
                <div class="alert alert-success"
                     style="text-align:center;
                            margin-bottom:0;
                            font-size:x-large"
                     onclick="enter_wait_list('{{ tool.id }}', '{{ customer.id }}'); return false;">
                    <span class="glyphicon glyphicon-save"></span> Enter Wait List for {{ tool.name }}
                </div>
            {% else %}
                <div class="alert alert-danger"
                     style="text-align:center;
                            margin-bottom:0;
                            font-size:x-large"
                     onclick="exit_wait_list('{{ tool.id }}', '{{ customer.id }}'); return false;">
                    <span class="glyphicon glyphicon-trash"></span> Exit Wait List for {{ tool.name }}
                </div>
            {% endif %}
            {% if wait_list.count > 0 %}
                <div style="margin-top: 20px;">
                    <a onclick="toggle_details(this)"
                       style="font-size: x-large"
                       data-toggle="collapse"
                       data-target="#wait-list-content"
                       class="pointer">
                        <span class="glyphicon glyphicon-chevron-right chevron"></span>Show Wait List
                    </a>
                </div>
            {% endif %}
        </div>
        {% if wait_list.count > 0 %}
            <div id="wait-list-content" style="padding-top: 10px;" class="collapse">
                <table style="margin-top: 10px;" class="table table-condensed table-striped table-bordered">
                    <thead>
                        <tr style="font-size: x-large;">
                            <th>Position</th>
                            <th>User</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for entry in wait_list %}
                            <tr class="{% if customer.id == entry.user.id %}success{% endif %}" style="font-size: large;">
                                <td>{{ forloop.counter }}</td>
                                <td>{{ entry.user.get_full_name }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}
    </div>
{% endif %}
<div style="height:150px">{# Spacer #}</div>
<script>
	function update_stop_button()
	{
		if(document.querySelector('#tool_control').checkValidity())
		{
			$('#answer_to_proceed').hide();
			$("#stop_button").show();
		}
		else
		{
			$('#answer_to_proceed').show();
			$("#stop_button").hide();
		}
	}

    function update_start_button()
	{
		$("#start_reserve").show();

		if(document.querySelector('#tool_control').checkValidity())
		{
			$(".start_button").show();
		}
		else
		{
			$(".start_button").hide();
		}
	}

	update_stop_button();
	{% if customer.active_projects|length == 1 %}update_start_button();{% endif %}

	{% if tool.in_use %}
		$('body').on('dynamic-form-group-changed dynamic-form-field-changed', update_stop_button);
		$('body').on('change keyup', '#downtime', update_stop_button);
	{% else %}
    	$('body').on('dynamic-form-group-changed dynamic-form-field-changed', update_start_button);
	{% endif %}
	$('#downtime').numpad({'readonly': false, 'hidePlusMinusButton': true, 'hideDecimalButton': true});
	$('#delayed_logoff_help').popover();
	revert(60);
	{# reset timeout if user is active in the tool control form #}
	$('#tool_control :input').on('change', function (){revert(60)})
</script>
