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

<br/>
<br/>

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      
      {% if data.container %}
      <h1><a href="/containers">Software Containers</a> <span style="font-size:18px"> / {{ data.container.name }}</span></h1>
      {% else %}
      {% if data.mode == 'new_task' %}
      <h1>New Task</h1>
      <hr/>
      <h3>Step 1: choose software container.</h3>
      <br/> 
      {% else %}
      <h1>Software Containers</h1>
      <hr/>
      {% endif %}
 

      
      
      <div class="form-filter" style="margin-bottom:20px">
        <form action="" method="POST">
          
          <input type="hidden" name="mode" value="{{data.mode}}">
                    
          <input type="text" class="form-control" id="search_text" name="search_text" placeholder="Search..." style="width:200px; margin:0; display:inline" value="{{data.search_text}}" autofocus>

          <select class="form-control" id="search_type" name="search_type" style="width:120px; margin:0; display:inline">
            
            {% if data.search_type == 'All' %}
            <option selected>All</option>
            {% else %}
            <option>All</option>            
            {% endif %}
            
            {% if data.search_type == 'Docker' %}
            <option selected>Docker</option>
            {% else %}
            <option>Docker</option>            
            {% endif %}
            
            {% if data.search_type == 'Singularity' %}
            <option selected>Singularity</option>
            {% else %}
            <option>Singularity</option>            
            {% endif %}
            
          </select>
          {% csrf_token %}
          <button type="submit" class="btn btn-secondary">Go</button>
        </form>
      </div>
      
      
      {% endif %}
      
      <div class="row" style="padding:5px">
      {% if data.container %}
      {% include "components/container.html" with container=data.container details=True %}
      {% else %} 
      {% for container in data.containers %}
      {% include "components/container.html" with container=container %}
      {% endfor %}
      {% endif %}
      </div>
      
      {% if not data.container %}
      <div class="row" style="padding:10px; padding-left:15px">   
      <a href="/add_container">Add new...</a>
      </div>
      {% endif %}
        
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>

    </div>
  </div>
</div>

{% include "footer.html" %}

<script>

$(document).ready(function() {
	  
    var search_text_input = $("#search_text");
    var len = search_text_input.val().length;
    search_text_input[0].focus();
    search_text_input[0].setSelectionRange(len, len);

});
</script>



