{% if data.task %} 
          <center>
          <div style="width:350px; display:block; 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; ">
            Task <b>{{data.task.name}}</b> summary
            </div>
            <hr style="margin:0">
            
          {% 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; padding-left:15px; padding-right:15px; text-align:left;">
            <!-- <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>Software container:</b>
            <a href="/software/?container_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 resource:</b> <a href="/computing/?uuid={{ task.computing.uuid }}">{{ task.computing.name }}</a>
            <!-- <a href="/computing/?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.interface_port %}
            {% if task.status == "running" %}
            <a href="/task_connect/?uuid={{task.uuid}}" class="btn btn-connect" target="_blank">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 %}      
          <br/>
          <div style="display:block"; 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>Short ID</b></td>
            <td>{{ task.short_uuid }}</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>Interface IP</b></td>
            <td>{{ task.interface_ip }}</td>
           </tr>

           <tr>
            <td><b>Interface port</b></td>
            <td>{{ task.interface_port }}</td>
           </tr>
           
           <tr>
            <td><b>Tunnel port</b></td>
            <td>{{ task.tcp_tunnel_port }}</td>
           </tr>

           {% if task.auth_token %}
           <tr>
            <td><b>Auth token</b></td>
            <td>{{ task.auth_token }}</td>
           </tr>
           {% endif %}
           
           {% if task.computing_options %}
           <tr>
            <td><b>Computing options</b></td>
            <td>{{ task.computing_options }}</td>
           </tr>
           {% endif %}           


            <!-- <tr><td style="padding-right:0"><b>Direct link</b>
            <td>{% if task.status == "running" %}<a href="{{ task.sharable_link }}">{{ task.sharable_link }}</a>{% else %}N.A. (task not running) {% 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>

          </center>

          
          {% endif  %}