<!-- 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="loadBtn" class="metricsNavBtn active">Load</div>
						<div id="difficultyBtn" class="metricsNavBtn">Difficulty</div>
						<div id="performanceBtn" class="metricsNavBtn">Performance</div>
						<div id="confidenceBtn" class="metricsNavBtn">Confidence</div>
						<div id="activityBtn" class="metricsNavBtn">Activity</div>
						<div id="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 %}
								<option value="APERTURE">APERTURE</option>
								<option value="GeoMap">GeoMap</option>
								<option value="GeoMen">GeoMen</option>
								<option value="Influent">Influent</option>
								<option value="LineUP">LineUP</option>
								<option value="NEON">NEON</option>
								<option value="NEWMAN">NEWMAN</option>
								<option value="TrackCom">TrackCom</option>
							</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="load" class="metricsSection active">
							<svg id="loadChart" class="chart"></svg>
						</div>
						<div id="difficulty" class="metricsSection">
							<svg id="difficultyChart" class="chart"></svg>
						</div>
						<div id="performance" class="metricsSection">
							<svg id="performanceChart" class="chart"></svg>
						</div>
						<div id="confidence" class="metricsSection">
							<svg id="confidenceChart" class="chart"></svg>
						</div>
						<div id="activity" class="metricsSection">
							<svg id="activityChart" class="chart"></svg>
						</div>
						<div id="time" class="metricsSection">
							<svg id="timeChart" class="chart"></svg>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	{% endfor %}
{% endblock %}