<!--
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.
-->
{% extends "userpage.html" %}

{% block content %}

<h1><b>Task List</b></h1>

<!-- progress bar -->
{% if user.userprofile.experiment.show_progress %}
<h2><b>Status</b></h2>
<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" 
      aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: {{user.userprofile.progress}}%;">
      {{user.userprofile.progress}}% Complete
   </div>
</div>
{% endif %}

<!-- instructions -->
<div class="instructions" >
  <a href="{% url 'op_tasks:instruct' %}">
    {% if user.userprofile.exp_inst_complete and user.userprofile.portal_inst_complete %}
    
    <h3>
      <span class="glyphicon glyphicon-check"></span>
      Click here to review instructional materials
    </h3>
    <h5 class='text'>This material is available throughout the experiment</h5>

    {% else %}
    
    <div class="task-current">
      <h3>
        <span class="glyphicon glyphicon-unchecked"></span>
        Click here to review instructional materials
      </h3>
    </div>

    {% endif %}
  </a>
</div>

<!-- tasklistitem list table -->
<table class="ot-list table table-bordered">
  <tbody>
    {% for tasklistitem in userprofile.tasklistitem_set.all %}
    
      {% if tasklistitem.task_complete and not tasklistitem.task_active and tasklistitem.exit_complete %}
      <!-- tasklistitem not active, complete, and exit complete -->
        <tr class="ot-disabled">
          <td class="status">
            <span class="glyphicon glyphicon-check"></span>
          </td>
          <td>
            <div style="font-size: 18px;">
              <span class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</span>
              <span class="pull-right text">Task Complete. Thank You!</span>
            </div>     
          </td>
        </tr>
        
      {% elif tasklistitem.task_complete and not tasklistitem.task_active and not tasklistitem.exit_complete %}
      <!-- tasklistitem not active, complete, and exit active -->
        <tr class="task-current">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>   
          <td>
            <div class="task-current">
              <h3 class="heading disabled">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</h3>
              <p class="text disabled">Task Complete. Thank You!</p>
              <a href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
                <span class="glyphicon glyphicon-hand-right"></span>
                Complete Post-Task Survey to Continue
              </a>
            </div>
          </td>
        </tr>
        
      {% elif not tasklistitem.task_complete and not tasklistitem.task_active %}
      <!-- task not active and not complete -->
        <tr class="ot-disabled">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>
          <td>
            <div style="font-size: 18px;">
              <span class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</span>
              <span class="pull-right text">Complete previous tasks first.</span>
            </div>      
          </td>
        </tr>
        
      {% elif tasklistitem.task_complete and tasklistitem.task_active and tasklistitem.exit_active and not tasklistitem.exit_complete %}
      <!-- task active and complete with exit active -->
        <tr>
          <td class="status" >
            <span class="glyphicon glyphicon-check" style="color:#428bca"></span>
          </td>
          <td>
            <a href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <h3 class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</h3>
              <p class="text">Task Complete.  Thank you!</p>
            </a>
            <a class="task-current" href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
              <span class="glyphicon glyphicon-hand-right"></span>
              Complete Post-Task Survey Here
            </a>
          </td>
        </tr>
        
      {% elif tasklistitem.task_active and tasklistitem.task_complete and tasklistitem.exit_complete %}
      <!-- task active, complete, exit complete -->
        <tr>
          <td class="status">
            <span class="glyphicon glyphicon-check" style="color:#428bca"></span>
          </td>
          <td>
            <a href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <h3 class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</h3>
              <p class="text">Task Complete.  Thank you!</p>
            </a>
            <a href="" data-toggle="modal" data-target="#exit-{{tasklistitem.pk}}">
              <span class="glyphicon glyphicon-check"></span>
              Post-task survey complete
            </a>
          </td>
        </tr>
        
      {% elif tasklistitem.task_active and not tasklistitem.task_complete %}
      <!-- task active, not complete and exit task not active -->
        <tr class="task-current">
          <td class="status">
            <span class="glyphicon glyphicon-unchecked"></span>
          </td>   
          <td>
            <a class="task-current" href="{% url 'op_tasks:task_test' task_pk=tasklistitem.pk %}">
              <h3 class="heading">{{tasklistitem.op_task.name}} with {{tasklistitem.product.name}}</h3>
              <p class="text">Task not yet completed. Click to start this Operational Task</p>
            </a>
          </td>
        </tr>

      {% endif %}

      <!-- exit survey popup -->
      <div class="modal fade" id="exit-{{tasklistitem.pk}}" tabindex="-1" role="dialog" aria-labelledby="intake" aria-hidden="true">
        <div class="modal-dialog" width="940px" height="540px">
          <div class="modal-content">
            <div class="modal-body" id="surveymonkeyframe">
              <iframe src="{{tasklistitem.op_task.exit_url}}?sid={{userprofile.user_hash}}::{{tasklistitem.pk}}" width="1100px" height="500px"></iframe>
            </div>
            <div class="modal-footer">
              <div>
                <button type="button" style="float: left;" class="btn btn-primary" data-dismiss="modal">Hide</button>
              </div>
              <div>
                <form id="exit-survey-complete" method="post" action="{% url 'op_tasks:product' task_pk=tasklistitem.pk %}">{% csrf_token %}
                  <button type="submit" style="float: right;" class="btn btn-success">Submit survey</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>

    {% endfor %}

  </tbody>
</table>


{% if all_complete %}
  <hr>
  <h4>Thank you for participating, you have completed all Operational Tasks!</h4>
  <p>If you are interested in future study components or engagement with analytic tools, 
    we will contact you if you indicated such interest in the intake questionnaire.</p>
  <p>If you are interested in working on developing these analytic tools, which are free 
    and open source, please see the DARPA <a href="http://www.darpa.mil/opencatalog/XDATA.html">open catalogue.</a> </p>
{% endif %}

{% endblock %}