task.html

          {% if data.task %} 
          <div style="width:350px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:20px">
            <div style="margin-top:5px; padding:10px; text-align:center; border-bottom: #f8f8f8 solid 1px; ">
            <b>Summary</b>
            </div>
          {% else %}
          <div style="width:350px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:20px">
            
            <div style="margin-top:5px; padding:10px; text-align:center; border-bottom: #e0e0e0 solid 1px; ">
            <a href="?uuid={{ task.uuid }}"><b>{{ task.name }}</b></a>
            </div>


          {% endif %}
            

            
            <!-- <div style="background:{{task.color}}; height:24px;"></div> -->

            <!-- <div style="background:{{ task.container.color }}; height:14px;"></div> -->
            
            <!-- <div style="margin-bottom:15px; margin-top:0px">
              <div style="background:{{task.container.color}}; height:14px; width:149px; float:left"></div>
              <div style="background:{{task.computing.color}}; height:14px; width:149px; float:left"></div>
            </div> -->

            
            <div style="padding:10px;">
            <!-- <b>Container:</b> {{ task.container.name }} <span style="font-size:14px; background-color:{{task.container.color}}">&nbsp;&nbsp;&nbsp;&nbsp;</span> <br/>
            <b>Computing:</b> {{ task.computing.name }} <span style="font-size:14px; background-color:{{task.computing.color}}">&nbsp;&nbsp;&nbsp;&nbsp;</span><br/> -->

            <b>Container:</b>
            <a href="/containers/?uuid={{ task.container.uuid }}" style="color:{{task.container.color}}">{{ task.container.name }}</a>
            {% if task.container.type == 'docker' %}<img src="/static/img/docker-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}
            {% if task.container.type == 'singularity' %}<img src="/static/img/singularity-logo.svg" style="height:18px; width:18px; margin-bottom:4px" />{% endif %}

            <br/>
            
            <b>Computing:</b> <a href="/computings/?uuid={{ task.computing.uuid }}">{{ task.computing.name }}</a>
            <!-- <a href="/computings/?uuid={{ task.computing.uuid }}" no_style="color:{{task.computing.color}}"><i class="fa fa-external-link" ></i></a><br/> -->           
            
            <div style="margin-top:2px">
            {% if task.status == "running" %}
             <b>Status:</b> <font color="green">running</font>
            {% else %}
             <b>Status:</b> {{ task.status }}
            {% endif %}
            </div>
            </div>
 
            <div style="margin-bottom:10px; text-align:center; padding:5px">
            
            <!-- Stop / Delete / Cancel -->
            {% if task.status == "stopped" or task.status == "created" %}
            <a href="?uuid={{task.uuid}}&action=delete&fromlist=True" class="btn btn-action">Delete</a>
            {% else %}            
            <a href="?uuid={{task.uuid}}&action=stop&fromlist=True" class="btn btn-action">Stop</a>
            {% endif %}
            
            <!-- Connect -->
            {% if task.port %}
            {% if task.status == "running" %}
            <a href="?uuid={{task.uuid}}&action=connect" class="btn btn-connect">Connect</a>
            {% else %}
            <a href="" class="btn btn-disabled">Connect</a>  
            {% endif %}
            {% endif %}
                        
            <!-- View log -->
            {% if task.status == "running" %}
            <a href="/task_log/?uuid={{task.uuid}}&action=viewlog" class="btn btn-action">Logs</a> 
            {% else %}
            <a href="" class="btn btn-disabled">Logs</a> 
            {% endif %}
            </div>    
          
          
          
          </div>


          {% if data.task %}      
          <div style="float:left; max-width:450px">
          <table class="dashboard" style="margin:10px">

            <!-- <tr>
             <td colspan="2">
              <div>
               <div style="background:{{task.container.color}}; height:24px; width:149px; float:left"></div>
               <div style="background:{{task.computing.color}}; height:24px; width:149px; float:left"></div>
              </div>
             </td>
            </tr>
             -->

           <tr>
            <td colspan="2" align="center" style="padding:15px"><b>Details</b></td>
           </tr>

           <!-- <tr>
            <td><b>Name</b></td>
            <td>{{ task.name }}</td>
           </tr> -->

           <tr>
            <td><b>ID</b></td>
            <td>{{ task.id }}</td>
           </tr>

           <tr>
            <td><b>Image</b></td>
            <td><a href="/containers/?uuid={{ task.container.uuid }}">{{ task.container.image }}</a></td>
           </tr>

           <!-- <tr>
            <td><b>Status</b></td>
            <td>{{ task.status }}</td>
           </tr>  -->

           <tr>
            <td><b>Created at</b></td>
            <td>{{ task.created }}</td>
           </tr>

           <tr>
            <td><b>Extra binds</b></td>
            <td>{{ task.extra_binds }}</td>
           </tr>  

           <tr>
            <td><b>Host</b></td>
            <td>{{ task.ip }}</td>
           </tr>

           <tr>
            <td><b>Port</b></td>
            <td>{{ task.port }}</td>
           </tr>
           
           <tr>
            <td><b>Tunnel port</b></td>
            <td>{{ task.tunnel_port }}</td>
           </tr>

           {% if task.auth_pass %}
           <tr>
            <td><b>Auth pass</b></td>
            <td>******</td>
           </tr>
           {% endif %}

           <tr>
            <td style="padding-right:0"><b>Direct link</b>
            <td>{% if task.status == "running" %}<a href="{{ task.direct_link }}">{{ task.direct_link }}</a>{% else %}N.A. (task not running) {% endif %}</td>
           </tr>


           <!--  <tr>
            <td><b>Operations</b></td>
            
            <td>
            {% if task.status == "running" %}
            <a href="?uuid={{task.uuid}}&action=stop&details={{details}}">Stop</a> | 
            {% else %}-->
            <!-- <a href=?uuid={{task.uuid}}&action=start>Start</a> |  -->
            <!-- <font color="#c0c0c0">Stop</font> | 
            {% endif %}
            <a href="?uuid={{task.uuid}}&action=delete&details=False">Delete</a>
            
            {% if task.port %}
            {% if task.status == "running" %}
             | <a href="?uuid={{task.uuid}}&action=connect">Connect</a>
            {% else %}
             | <font color="#c0c0c0">Connect</font>
            {% endif%}
            {% endif %}
            
            {% if task.status == "created" %}
             | <font color="#c0c0c0">View Log</font>
            {% else %}
             | <a href="/task_log/?uuid={{task.uuid}}&action=viewlog">View Log</a>             
            {% endif %}
            
            </td>
  
           </tr>
           -->

          </table>
          <p style="margin-left:10px; font-size:0.9em; color:#484848">
          <i class="fa fa-info-circle" style="color:#337ab7"></i> You can share a direct link with other people, but remember that if you have no authentication in place anyone will be able to access.
          </p>
          </div>

















          
          {% endif  %}