
      {% if data.details %}
      {% for container in container_family.members %}
      {% include "components/container.html" with container=container details=data.details %}
      {% endfor %}
      
      {% else %}    

      <div style="width:300px; float:left; border: #e0e0e0 solid 1px; margin:10px; background:#f8f8f8; margin-bottom:15px">
        <form action="/new_task" method=GET>
        <input type="hidden" name="step" value="two">
        
        
        <div style="padding:10px; margin-top:5px; text-align:center; border-bottom: {{container_family.color}} solid 10px; ">
        <a href="/software/?container_family_id={{ container_family_id }}&details=True">{{ container_family.name }}</a>&nbsp; 
        </div>
        
        <div style="padding:10px; height: 125px; ">
        <!-- <div style="position: relative; top: 50%; transform: translateY(-50%);"> -->
        
        {% if container_family.description %} 
        <div class="description-box" title="{{ container_family.description }}">
        {{ container_family.description }}
        </div>
        {% else %}
        <br/>  
        {% endif %}
        
        <div class="image-version-box">
        <b>Image:</b> <code>{{ container_family.image_name }}</code><br/>
        <div style="margin-top:2px">
        
        <!-- <span style="vertical-align:top;"><b>Tag:</b>&nbsp;</span>
        <select name="task_container_uuid" style="font-size:0.8em">
        {% for container in container_family.members %}
        <option value="{{ container.uuid }}">{{ container.image_tag }} ({{ container.image_arch }})</option>
        {% endfor %}
        </select> -->

        <!--<span style="vertical-align:top; margin-left:0px"><b>Tag:</b>&nbsp;</span>
        <select name="task_container" style="font-size:0.8em">
        {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}
        {% if not arch %}
        {% for tag,container in container_by_tags.items %}
        <option value="family:{{ container_family_id }},tag:{{ tag }}">{{ tag }}</option>
        {% endfor %}
        {% endif %}
        {% endfor %}

        {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}
        {% if arch %}
        <optgroup label="{{ arch }}">
        {% for tag,container in container_by_tags.items %}
        <option value="uuid:{{ container.uuid }}">{{ tag }}</option>
        {% endfor %}
        {% endif %}
        {% endfor %}
        </optgroup>-->


        <span style="vertical-align:top; margin-left:0px"><b>Tag:</b>&nbsp;</span>
        <select name="task_container_uuid" style="font-size:0.8em">
        {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}
        {% if not arch %}
        {% for tag,container in container_by_tags.items %}
        <option value="{{container.uuid}}">{{ tag }}</option>
        {% endfor %}
        {% endif %}
        {% endfor %}

        {% for arch,container_by_tags in container_family.container_by_tags_by_arch.items %}
        {% if arch %}
        <optgroup label="{{ arch }}">
        {% for tag,container in container_by_tags.items %}
        <option value="{{container.uuid}}">{{ tag }}</option>
        {% endfor %}
        {% endif %}
        {% endfor %}
        </optgroup>


   

        </select>

            
        </div>
        </div>
        <!-- </div> -->
        </div>
        
        <div style="margin-bottom:8px; margin-top: 3px; text-align:center">
        {% if not disable_play_button %}
        
               
        <button type="submit" onclick="myFunction()" class="btn-link btn btn-light" style="border: #c0c0c0 1px solid; padding-left:14px">
        <i class="fa fa-play" style="color:green"></i>
        </button>
        
        {% endif %}
        </form>
        </div>    
      
      
      
      </div>
      
      {% endif %}






      