<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>{{ tool.name_or_child_in_use_name }}</h1>

{# 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();">force {{ tool.get_current_usage_event.operator }} off this tool</a>.</p>
            {% 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 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-right 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">
								<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.allow_delayed_logoff 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="120" 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>
		<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>
	{% else %}
		{% 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 %}
			{% include 'kiosk/tool_project_selection_snippet.html' with active_projects=customer.active_projects tool=tool %}
			<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="alert alert-success" style="text-align:center; margin-bottom:0; font-size:x-large" onclick="enable_tool()">
							<span class="glyphicon glyphicon-play"></span> Start using the {{ tool.name }}
						</div>
					</div>
					{% for alternate_tool in tool.tool_children_set.all %}
						<div class="col-xs-6" style="margin-top: 15px">
							<div class="alert alert-success" style="text-align:center; margin-bottom:0; font-size:x-large" onclick="enable_tool('{{ alternate_tool.id }}')">
								<span class="glyphicon glyphicon-play"></span> Start using the {{ alternate_tool.name }}
							</div>
						</div>
					{% endfor %}
					<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>
				{% else %}
					<div class="col-xs-offset-1 col-xs-5">
						<div class="alert alert-success" style="text-align:center; margin-bottom:0; font-size:x-large" onclick="enable_tool()">
							<span class="glyphicon glyphicon-play"></span> Start using the {{ tool.name }}
						</div>
					</div>
					<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 %}
			</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 %}
	{% endif %}
</form>
<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();
		}
	}

	update_stop_button();
	$('body').on('question-group-changed', update_stop_button);
	$('body').on('change keyup', '#tool_control input, #tool_control select, #tool_control textarea, #downtime', update_stop_button);
	$('#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>