{% load static %}
{% include "header.html" %}
{% include "navigation.html" %}
{% include "logo.html" %}

<div class="container">
  <div class="dashboard">
    <div class="span8 offset2">
      {% if data.details or data.container %}
      {% if data.container_families %}
      <h1><a href="/software">Software</a> <span style="font-size:18px"> / {{ data.containers.0.name }}</span></h1>
      {% else %}
      <h1><a href="/software">Software</a> <span style="font-size:18px"> / <a href="/software/?container_family_id={{data.container.family_id}}&details=True">{{ data.container.name }}</a> / {{ data.container.image_tag}}</span></h1>
      {% endif %}
      {% else %}
      {% if data.mode == 'new_task' %}
      <h1><a href="/tasks">Tasks</a> <span style="font-size:18px"> / new</span></h1>
      <hr/>
      <div style="padding-left:0px; padding-top:1px"><h4>Choose Software</h4></div>
      <br/>
      {% else %}
      <h1>Software</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="filter_text" name="filter_text" placeholder="Search..." style="width:200px; margin:0; display:inline" value="{{data.filter_text}}" autofocus>
          <!-- onchange="this.form.submit()"  -->
          <select class="form-control" id="filter_owner" name="filter_owner" style="width:120px; margin:0; display:inline">
            <option value="all" {% if data.filter_owner == 'all' %}selected{% endif %}>All</option>
            <option value="platform" {% if data.filter_owner == 'platform' %}selected{% endif %}>Platform</option>
            <option value="user" {% if data.filter_owner == 'user' %}selected{% endif %}>Personal</option>
            {% for group in user.groups.all %}
            {% with "group:"|add:group.name as group_identifier %}
            <option value="group:{{ group.name }}" {% if data.filter_owner == group_identifier %}selected{% endif %}>{{ group.name }}</option>
            {% endwith %}
            {% endfor %}
          </select>
          {% csrf_token %}
          <button type="submit" class="btn btn-secondary">Go</button>
          {% if not data.mode == 'new_task' %}
          &nbsp; &nbsp; <font size=4.0em>|</font> &nbsp; <a href="/add_software">Add new...</a>
          {% endif %}
        </form>
      </div>
      {% endif %}
      <div class="row" style="padding:5px">
      {% if data.container %}
      {% include "components/container_card.html" with container=data.container user=data.user details=True %}
      {% else %}
      {% if data.container_families %}
      {% for container_family_id, container_family in data.container_families.items %}
      {% include "components/container_family_card.html" with container_family=container_family container_family_id=container_family_id user=data.user%}
      {% endfor %}
      {% else %}
      {% for container in data.containers %}
      {% include "components/container_card.html" with container=container user=data.user %}
      {% empty %}
      <p>No software found.</p>
      {% endfor %}
      {% endif  %}
      {% endif %}
      </div>
    </div>
  </div>
</div>

{% include "footer.html" %}

<script>
$(document).ready(function() {

    var filter_text_input = $("#filter_text");
    var len = filter_text_input.val().length;
    filter_text_input[0].focus();
    filter_text_input[0].setSelectionRange(len, len);

});
</script>
