{% load static %} 
{% include "header.html" %}
{% include "navigation.html" with main_path='/main/' %}

<br/>
<br/>

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      <h1>New Task</h1> 
      <hr>


      {% if data.step == 'two' %} 
      <h3>Step 2: set task name and computing.</h3> 
      {% elif data.step == 'three' %}  
      <h3>Step 3: add authentication and computing details.</h3>    
      {% endif %}

      <br/>

      {% if data.step != 'created' %}
      <div style="width:300px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:15px">
        <div style="padding:10px; margin-top:5px; text-align:center; border-bottom: {{data.task_container.color}} solid 10px; ">
        <a href="?uuid={{ container.uuid }}">{{ data.task_container.name }}</a>&nbsp; 
        {% if data.task_container.type == 'docker' %}<img src="/static/img/docker-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}
        {% if data.task_container.type == 'singularity' %}<img src="/static/img/singularity-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}
        </div>  
        <div style="padding:10px; height: 64px; vertical-align: middle;">
        <b>Image:</b> {{ data.task_container.image_name }}<br/>
        <b>Version:</b> {{ data.task_container.image_tag }}
        </div>
      </div>
      {% endif %}

      {% if data.step == 'two' %}

          <form action="/create_task/" method="POST">
          {% csrf_token %}
          <input type="hidden" name="step" value="{{ data.next_step }}" />
          <input type="hidden" name="task_container_uuid" value="{{data.task_container.uuid}}">

      <div style="width:300px; float:left; border: #e0e0e0 solid 0px; margin:10px; background:#f8f8f8; margin-bottom:15px">

          <table style="max-width:100%; border: #e0e0e0 solid 1px; margin:0">
          <tr><td colspan="2"></td></tr>

           <tr>
            <td><b>Task name </b></td>
            <td>
             <input type="text" name="task_name" value="" placeholder="" size="" required />
            </td>
           </tr>

           <tr>
            <td><b>Computing</b></td><td>
              <select name="task_computing_uuid" >
              {% for computing in data.computings %}}
              <option value="{{ computing.uuid }}">{{ computing.name}}</option>
              {% endfor %}
              </select>
            </td>
           </tr>

           <tr>
           <td colspan=2 align=center style="padding:9px">
           <input type="submit" value="Next">
           </td>
           </tr>
          </table>
          </div>
          </form>

      {% elif data.step == 'three' %}
          
          
          <div style="width:300px; float:left; border: #e0e0e0 solid 0px; margin:10px; background:#f8f8f8; margin-bottom:15px">
          <table style="width:100%; height:126px;  border: #e0e0e0 solid 1px; margin:0">

           <tr valign="bottom">
            <td><b>Task name </b></td>
            <td>
             <input type="text" name="task_name_RECAP" value="{{ data.task_name }}" placeholder="" size="" disabled />
            </td>
           </tr>

           
           <tr valign="top">
            <td><b>Computing</b></td><td>
              <select name="task_computing_uuid_RECAP" >
              <option value="">{{ data.task_computing.name}}</option>
              </select>
            </td>
           </tr>

          </table>
          </div>
          
          <div style="width:640px; float:left; border: #e0e0e0 solid 0px; margin:10px; background:#f8f8f8; margin-bottom:15px">
          
          {% if data.task_container.type == 'singularity' and not data.task_container.supports_dynamic_ports %}
          <div> <p style="font-size:15px; max-width:700px; margin-bottom:20px; margin-left:5px">
          <i class="fa fa-exclamation-triangle" style="color:orange"></i> This container does not support dynamic ports and you are running it with Singularity, without network insulation. This means that if the container port is already occupied, it will not be able to start.
          </p></div>
          {% endif %}
          
          {% if data.task_container.ports and not data.task_container.supports_pass_auth %}
          <div> <p style="font-size:15px; max-width:700px; margin-bottom:20px; margin-left:5px">
          <i class="fa fa-exclamation-triangle" style="color:orange"></i> This container does not support configuring any authentication. This means that unless it is built-in within the container, anyone running on the same network will be able to access it.
          </p></div>
          {% endif %}
        
          <form action="/create_task/" method="POST">
          {% csrf_token %}
          <input type="hidden" name="task_container_uuid" value="{{data.task_container.uuid}}">
          <input type="hidden" name="step" value="{{ data.next_step }}" />
          <input type="hidden" name="task_name" value="{{ data.task_name }}" />
          <input type="hidden" name="task_container_uuid" value="{{ data.task_container.uuid }}" />
          <input type="hidden" name="task_computing_uuid" value="{{ data.task_computing.uuid }}" />

          <table class="dashboard" style="max-width:700px">
          <tr><td colspan="2"></td></tr>
           {% if data.task_container.supports_user_auth %}
           <tr>
            <td><b>Task user</b></td>
            <td>
             <input type="text" name="auth_user" value="" placeholder="" size="23" />
            </td>
           </tr>
           {% endif %}

           {% if data.task_container.supports_dynamic_ports and data.task_computing.type == 'remotehop' %}
           <tr>
            <td valign="top" style="width:180px"><b>Set custom port </b></td>
            <td>
             <input type="text" name="task_base_port" value="" placeholder="" size="23" style="margin-bottom:5px"/><br>
             <p style="line-height: 0.95"><font size=-1>This container supports dynamic ports and you can thus set a custom port (>5900) to avoid clashes with services already running on the computing resource.</font></p>
            </td>
           </tr>
           {% endif %}

           {% if data.task_container.supports_pass_auth %}
           <tr>
            <td valign="top"><b>Set task password</b></td>
            <td>
             <input type="password" name="auth_password" value="" placeholder="" size="23" /><br>
             <font size=-1>Use a non-sensitive password as it will be stored in plain text. 6 chars min.</font>
            </td>
           </tr>
           {% endif %}


           {% if data.task_container.type == 'singularity' %}
           <tr>
            <td valign="top" style="width:180px"><b>Extra binds</b></td>
            <td>
             <input type="text" name="extra_binds" value="" placeholder="" size="40" /><br>
             <p style="line-height: 0.95"><font size=-1>Here you can set extra binds on top of the ones already define by the administrator. Format is <i>host_directory:container_directory</i>, comma separated.</font></p>
            </td>
           </tr>
           {% endif %}

           <tr>
            <td><b>Access method</b></td><td>
              <select name="access_method" >
              <option value="https_proxy" disabled>HTTPS proxy</option>
              <option value="direct_tunnel" selected>Direct tunnel</option>
              <option value="None">None</option>
              </select>
            </td>
           </tr>

           <!-- <tr>
            <td><b>Run using</b></td><td>
              <select name="run_using" >
              <option value="docker" selected>Docker</option>
              <option value="singularity">Singularity</option>
              </select>
            </td>
           </tr>  -->
           
           {% if data.task_computing.access_method == 'slurm+ssh' %}
           <tr>
            <td><b>Computing options</b></td>
            <td>
            <table>
             <tr><td>Partition</td><td><input type="text" name="computing_partition" value="{{ data.task_computing.conf.default_partition }}" placeholder="" size="20" /></td></tr>
             <tr><td>Cpus</td><td><input type="text" name="computing_cpus" value="{{ data.task_computing.conf.default_cpus }}" placeholder="" size="5" /></td></tr>
             <tr><td>Memory</td><td><input type="text" name="computing_memory" value="{{ data.task_computing.conf.default_memory }}" placeholder="" size="5" /></td></tr>
             </table>
            </td>
           </tr>
           {% endif %}
             
           <tr><td colspan=2>
           <table><tr><td  style="border: 1px solid lightgray;" >
           I understand that files saved or modified in this container, if not explicitly saved to a persistent bind, will be LOST when the task ends.
           </td><td  style="border: 1px solid lightgray;" >
           <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
           </td></table>
           </td></tr>
           <tr>
           <td colspan=2 align=center style="padding:20px">
           <input type="submit" value="Create">
           </td>
           </tr>
          </table>
          </form>
          </div>


      {% else %}
        Ok, task created. Go back to your <a href="/tasks">task list</a>.
        

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

{% include "footer.html" %}






