<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- shows the status of "interesting" data about the current experiment -->

{% extends "experimentpage.html" %}

{% block content %}

<h1 id="expStatusHeader">Experiment Status</h1>
	{% for experimentName, experimentVal in experimentList.items %}
	<div id="{{ experimentName }}" class="experimentStatusRow">
		<div class="expShelf">
			<div class="topShelf">
				<div class="expName">{{ experimentName }}</div>
				<div class="expDates">
					<!-- <div class="expDate expDateCreated">
						<div class="expDateLabel">Created</div>
						<div class="expDateValue">2015/07/23</div>
					</div>
					<div class="expDate expDateBegins">
						<div class="expDateLabel">Begins</div>
						<div class="expDateValue">2015/07/23</div>
					</div> -->
				</div>
			</div>
			<div class="expStatsWrapper">
				<div class="users expStat">
					<div class="expStatsImg">
						<img src="{{STATIC_URL}}images/users.png" title="users">
					</div>
					<div class="expStatsValue">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'users' in expObjKey %}
								{{ expObjVal|length }}
							{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="products expStat">
					<div class="expStatsImg">
						<img src="{{STATIC_URL}}images/products.png" title="products">
					</div>
					<div class="expStatsValue">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'products' in expObjKey %}
								{{ expObjVal|length }}
							{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="tasks expStat">
					<div class="expStatsImg">
						<img src="{{STATIC_URL}}images/tasks.png" title="tasks">
					</div>
					<div class="expStatsValue">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'tasks' in expObjKey %}
								{{ expObjVal|length }}
							{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="completedTasks expStat">
					<div class="expStatsImg">
						<img src="{{STATIC_URL}}images/tasksComplete.png" title="completed tasks">
					</div>
					<div class="expStatsValue">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'completedTasks' in expObjKey %}
								{{ expObjVal|length }}
							{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="incompleteTasks expStat">
					<div class="expStatsImg">
						<img src="{{STATIC_URL}}images/tasksIncomplete.png" title="incomplete tasks">
					</div>
					<div class="expStatsValue">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'incompleteTasks' in expObjKey %}
								{{ expObjVal|length }}
							{% endif %}
						{% endfor %}
					</div>
				</div>
				<div class="percentageTasks expStat">
					<div class="expStatsImg">
						<img src="{{STATIC_URL}}images/tasksPercentage.png" title="% complete">
					</div>
					<div class="expStatsValue">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'percentageComplete' in expObjKey %}
								{{ expObjVal }}%
							{% endif %}
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
		<div class="expTray">
			<div class="expTrayNav">
				<div id="usersBtn" class="expTrayNavBtn active">
					<div class="expTrayNavBtnImg">
						<img src="{{STATIC_URL}}images/users.png">
					</div>
				</div>
				<div id="productsBtn" class="expTrayNavBtn">
					<div class="expTrayNavBtnImg">
						<img src="{{STATIC_URL}}images/products.png">
					</div>
				</div>
				<div id="tasksBtn" class="expTrayNavBtn">
					<div class="expTrayNavBtnImg">
						<img src="{{STATIC_URL}}images/tasks.png">
					</div>
				</div>
				<div id="tasksCompletedBtn" class="expTrayNavBtn">
					<div class="expTrayNavBtnImg">
						<img src="{{STATIC_URL}}images/tasksComplete.png">
					</div>
				</div>
				<div id="tasksIncompleteBtn" class="expTrayNavBtn">
					<div class="expTrayNavBtnImg">
						<img src="{{STATIC_URL}}images/tasksIncomplete.png">
					</div>
				</div>
				<div id="metricsBtn" class="expTrayNavBtn">
					<div class="expTrayNavBtnImg">
						<img src="{{STATIC_URL}}images/metrics.png">
					</div>
				</div>
				<div id="expTrayNavBtnLabels">
					<div id="usersLabel" class="expTrayNavBtnLabel active">Users</div>
					<div id="productsLabel" class="expTrayNavBtnLabel">Products</div>
					<div id="tasksLabel" class="expTrayNavBtnLabel">Tasks</div>
					<div id="tasksCompletedLabel" class="expTrayNavBtnLabel">Completed Tasks</div>
					<div id="tasksIncompleteLabel" class="expTrayNavBtnLabel">Incomplete Tasks</div>
					<div id="metricsLabel" class="expTrayNavBtnLabel">Metrics</div>
				</div>
			</div>
			<div class="expTrayBody">
				<div id="users" class="expTraySection active">
					<ul id="usersHeader" class="trayTableHeader">
						<li class="username">Username</li>
						<li class="progressBar">Progress</li>
						<li class="lastLogin">Last Login</li>
					</ul>
					<ul id="usersBody" class="trayTableBody">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'users' in expObjKey %}
								{% for user in expObjVal %}
								<li>
									<div class="username">
										<a href="{% url 'exp_portal:view_user_tasks' profile=user.user_hash %}">
											{{ user }}
										</a>
									</div>
									<div class="progressBar">
										<div class="progress">
											<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 0em; width: {{ user.progress }}%;
											{% if user.progress < 30 %} color: #000; {% else %} color: #fff; {% endif %}
											">
												{{ user.progress }}%
											</div>
										</div>
									</div>
									<div class="lastLogin">
										{{ user.user.last_login }}
									</div>
								</li>
								{% endfor %}
							{% endif %}
						{% endfor %}
					</ul>
				</div>
				<div id="products" class="expTraySection">
					<ul id="productsHeader" class="trayTableHeader">
						<li class="productActive">Active</li>
						<li class="productName">Name</li>
						<li class="productTeam">Team</li>
						<li class="productVersion">Version</li>
						<li class="productDataset">Dataset</li>
						<li class="productURL">URL</li>
						<li class="productInst">Instructions</li>
					</ul>
					<ul id="productsBody" class="trayTableBody">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'products' in expObjKey %}
								{% for product in expObjVal %}
								<li>
									<div class="productActive">
										{% if product.is_active %}
										<span class="glyphicon glyphicon-ok" style="color:green"></span>
										{% else %}
										<span class="glyphicon glyphicon-remove" style="color:red"></span>
										{% endif %}
									</div>
									<div class="productName">
										<a href="{% url 'exp_portal:view_product_details' productname=product.name %}">
											{{ product.name }}
										</a>
									</div>
									<div class="productTeam">
										{{ product.team }}
									</div>
									<div class="productVersion">
										{{ product.version }}
									</div>
									<div class="productDataset">
										{{ product.dataset.name }}
									</div>
									<div class="productURL">
										<a href="{{ product.url }}" target='_blank'>
											<img src="{{STATIC_URL}}images/globe.png" title="{{ product.url }}">
										</a>
									</div>
									<div class="productInst">
										<a href="{{ product.instructions }}" target='_blank'>
											<img src="{{STATIC_URL}}images/globe.png" title="{{ product.instructions }}">
										</a>
									</div>
								</li>
								{% endfor %}
							{% endif %}
						{% endfor %}
					</ul>
				</div>
				<div id="tasks" class="expTraySection">
					<ul id="" class="trayTableHeader">
						<li class="taskActive">Active</li>
						<li class="taskName">Name</li>
						<li class="taskSurvey">Survey</li>
						<li class="taskExit">Exit Survey</li>
					</ul>
					<ul id="" class="trayTableBody">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'tasks' in expObjKey %}
								{% for task in expObjVal %}
								<li>
									<div class="taskActive">
										{% if task.is_active %}
										<span class="glyphicon glyphicon-ok" style="color:green"></span>
										{% else %}
										<span class="glyphicon glyphicon-remove" style="color:red"></span>
										{% endif %}
									</div>
									<div class="taskName">
										<a href="{% url 'exp_portal:view_task_details' taskname=task.name %}">
											{{ task.name }}
										</a>
									</div>
									<div class="taskSurvey">
										<a href="{{ task.survey_url }}" target='_blank'>
											<img src="{{STATIC_URL}}images/globe.png" title="{{ task.survey_url }}">
										</a>
									</div>
									<div class="taskExit">
										<a href="{{ task.exit_url }}" target='_blank'>
											<img src="{{STATIC_URL}}images/globe.png" title="{{ task.exit_url }}">
										</a>
									</div>
								</li>
								{% endfor %}
							{% endif %}
						{% endfor %}
					</ul>
				</div>
				<div id="tasksCompleted" class="expTraySection">
					<ul class="trayTableHeader">
						<li class="taskCompletedUser">User</li>
						<li class="taskCompletedName">Task Name</li>
						<li class="taskCompletedDateCompleted">Date Completed</li>
						<li class="taskCompletedActCount">Activity Count</li>
					</ul>
					<ul class="trayTableBody">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'completedTasks' in expObjKey %}
								{% for completedTask in expObjVal %}
								<li>
									<div class="taskCompletedUser">
										{{ completedTask.userprofile.user.username }}
									</div>
									<div class="taskCompletedName">
										{{ completedTask.op_task.name }}
									</div>
									<div class="taskCompletedDateCompleted">
										{{ completedTask.date_complete }}
									</div>
									<div class="taskCompletedActCount">
										{{ completedTask.activity_count }}
									</div>
								</li>
								{% endfor %}
							{% endif %}
						{% endfor %}
					</ul>
				</div>
				<div id="tasksIncomplete" class="expTraySection">
					<ul class="trayTableHeader">
						<li class="taskIncompleteUser">User</li>
						<li class="taskIncompleteName">Task Name</li>
						<li class="taskIncompleteDateAssigned">Date Assigned</li>
					</ul>
					<ul class="trayTableBody">
						{% for expObjKey, expObjVal in experimentVal.items %}
							{% if 'incompleteTasks' in expObjKey %}
								{% for incompleteTask in expObjVal %}
								<li>
									<div class="taskIncompleteUser">
										{{ incompleteTask.userprofile.user.username }}
									</div>
									<div class="taskIncompleteName">
										{{ incompleteTask.op_task.name }}
									</div>
									<div class="taskIncompleteDateAssigned">
										{{ incompleteTask.userprofile.user.date_joined }}
									</div>
								</li>
								{% endfor %}
							{% endif %}
						{% endfor %}
					</ul>
				</div>
				<div id="metrics" class="expTraySection">
					<div id="metricsNav">
						<div id="{{ experimentName }}LoadBtn" class="metricsNavBtn active">Load</div>
						<div id="{{ experimentName }}DifficultyBtn" class="metricsNavBtn">Difficulty</div>
						<div id="{{ experimentName }}PerformanceBtn" class="metricsNavBtn">Performance</div>
						<div id="{{ experimentName }}ConfidenceBtn" class="metricsNavBtn">Confidence</div>
						<!-- <div id="{{ experimentName }}ActivityBtn" class="metricsNavBtn">Activity</div> -->
						<div id="{{ experimentName }}TimeBtn" class="metricsNavBtn">Time</div>
					</div>
					<div class="metricsBody">
						<div class="metricsDropdowns">
							<div class="selectTitle">Tool</div>
							<select name="tools" id="toolsSelect">
								<!-- <option value="all">All</option> -->
								{% for expObjKey, expObjVal in experimentVal.items %}
									{% if 'products' in expObjKey %}
										{% for product in expObjVal %}
										<!-- <option value="{{ product.name }}">{{ product.name }}</option> -->
										{% endfor %}
									{% endif %}
								{% endfor %}
							</select>
							<div class="selectTitle">Task</div>
							<select name="tasks" id="tasksSelect">
								<option value="all">All</option>
								{% for expObjKey, expObjVal in experimentVal.items %}
									{% if 'tasks' in expObjKey %}
										{% for task in expObjVal %}
										<option value="{{ task.name }}">{{ task.name }}</option>
										{% endfor %}
									{% endif %}
								{% endfor %}
							</select>
						</div>
						<div id="{{ experimentName }}Load" class="metricsSection active">
							<svg id="{{ experimentName }}LoadChart" class="chart"></svg>
						</div>
						<div id="{{ experimentName }}Difficulty" class="metricsSection">
							<svg id="{{ experimentName }}DifficultyChart" class="chart"></svg>
						</div>
						<div id="{{ experimentName }}Performance" class="metricsSection">
							<svg id="{{ experimentName }}PerformanceChart" class="chart"></svg>
						</div>
						<div id="{{ experimentName }}Confidence" class="metricsSection">
							<svg id="{{ experimentName }}ConfidenceChart" class="chart"></svg>
						</div>
						<!-- <div id="activity" class="metricsSection">
							<svg id="{{ experimentName }}ActivityChart" class="chart"></svg>
						</div> -->
						<div id="{{ experimentName }}Time" class="metricsSection">
							<svg id="{{ experimentName }}TimeChart" class="chart"></svg>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{% endfor %}
{% endblock %}