{% extends "base.html" %}
{% load navigation_tags %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        Active Engagements
                        <div class="dropdown pull-right">

                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="panel-body collapse {% if request.META.QUERY_STRING %}in{% endif %}">
                    {% include "dojo/filter_snippet.html" with form=filtered.form %}
                </div>
            </div>
            {% if products %}

                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=products page_size=True %}
                </div>

                <div class="table-responsive panel panel-default">
                    <table id="engagements"
                           class="tablesorter-bootstrap table table-bordered table-condensed table-striped table-hover">
                        <tr>
                            <th class="prod_name">{% dojo_sort request 'Product' 'name' 'asc' %}</th>
                            <th class="prod_name">{% dojo_sort request 'Product Type' 'prod_type__name' %}</th>
                            <th>Active Engagements</th>
                            {% if user.is_staff %}
                                <th> Engagement</th>
                            {% endif %}
                        </tr>

                        {% for p in products %}
                            <tr>
                                <td class="prod_name"><a href="{% url 'view_product' p.id %}">{{ p.name }}</a>
                                  <sup>
                                   {% for tag in p.tags %}
                                        <a title="Search {{ tag }}" class="tag-label tag-color" href="{% url 'simple_search' %}?query={{ tag }}">{{ tag }}</a>
                                    {% endfor %}
                                  </sup>
                                </td>
                                <td class="prod_name"><a
                                        href="{% url 'product_type_metrics' p.prod_type.id %}">{{ p.prod_type.name }}</a>
                                </td>
                                <td>
                                    {% for e in p.engagement_set.all %}
                                        {% if e.active %}
						<div class="lineContainer">
							<a  style="display: inline" class="eng_link" href="{% url 'view_engagement' e.id %}">
                                                {% if e.name %}{{ e.name }} {% endif %}{{ e.target_start }}</a>
							| Lead: {{ e.lead.first_name }}
                                                        |
                                                        {%  for test in e.test_set.all %}
								{% if test.lead %}
                                                                <a href="{% url 'view_test' test.id %}"> {{ test }}: {{ test.lead.first_name }} </a> |
								{% else %}
                                                                <a href="{% url 'view_test' test.id %}"> {{ test }} </a> |
								{% endif %}
                                                        {% endfor %}
						</div>
                                                <sup>
                                                 {% for tag in e.tags %}
                                                      <a title="Search {{ tag }}" class="tag-label tag-color" href="{% url 'simple_search' %}?query={{ tag }}">{{ tag }}</a>
                                                  {% endfor %}
                                                </sup>
                                        {% endif %}
                                    {% endfor %}
                                </td>
                                {% if user.is_staff %}
                                    <td>
                                        <a class="btn btn-sm btn-success" href="{% url 'new_eng_for_prod' p.id %}">
                                            <i class="fa fa-plus"></i> Add
                                        </a>
                                    </td>
                                {% endif %}
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=products page_size=True %}
                </div>
            {% else %}
                <h5> No active engagements </h5>
            {% endif %}
        </div>
    </div>

{% endblock %}
{% block postscript %}
    <script>
        $(function () {
            var availableTags = [
                {% for word in name_words %}
                    "{{word}}",
                {% endfor %}
            ];
            var engWords = [
                {% for word in eng_words %}
                    "{{word}}",
                {% endfor %}
            ];
            $("#id_name").autocomplete({
                source: availableTags
            });
            $("#id_engagement__name").autocomplete({
                source: engWords
            });
        });
    </script>
    {% include "dojo/filter_js_snippet.html" %}
{% endblock %}