{% 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">
                        {{ name }}
                        {% if request.user.is_staff %}
                        <div class="dropdown pull-right">
                            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-expanded="true">
                                <span class="fa fa-wrench"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu"
                                aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                      {% if product_tab %}
                                        <a href="{% url 'add_endpoint' product_tab.product.id %}">
                                      {% else %}
                                        <a href="{% url 'add_product_endpoint' %}">
                                      {% endif %}
                                            <i class="fa fa-plus"></i> New Endpoint
                                        </a>
                                    </li>
                            </ul>
                        </div>
                        {% endif %}
                    </h3>
                </div>
                <div id="the-filters" class="panel-body collapse">
                    {% include "dojo/filter_snippet.html" with form=filtered.form %}
                </div>
            </div>
            {% if endpoints %}
				<div class="hidden" style="padding-bottom: 5px;" id="bulk_remedy">
					<form action="{% url 'endpoints_bulk_all' %}" method="post" id="bulk_change_form">
						{% csrf_token %}
						<button class="btn btn-sm btn-primary" type="submit" id="remedy_endpoint" title="Remediate Endpoints">
                Bulk Remediate
            </button>
						<button type="button" class="btn btn-sm  btn-primary" data-toggle="tooltip" data-placement="bottom" title="Delete Endpoint">
								<a class="white-color delete-bulk" href="#" alt="Delete Endpoints">
								<i class="fa fa-trash"></i>
								</a>
						</button>
					</form>	
				</div>
				
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=endpoints page_size=True %}
                </div>
                <div class="table-responsive panel panel-default">

                    <table id="endpoints"
                           class="tablesorter-bootstrap table table-condensed table-striped table-hover">
                        <tr>
                            <th class="hidden-sm centered" title="Select all visible endpoint." id="bulk_edit">
                                <form class="inline-form cenetered" action="#">
                                    <input type="checkbox" title="Select All" name="select_all" id="select_all"></input>
                                </form>
                            </th>
                            <th>{% dojo_sort request 'Endpoint' 'host' %}</th>
                            <th>{% dojo_sort request 'Product' 'product' 'asc' %}</th>
							<th nowrap="nowrap">Open Findings</th>
							<th>Status</th>
                        </tr>

                        {% for e in endpoints %}
                            <tr>
                                <td class="hidden-sm centered">
                                    <form action="#">
                                        <input type="checkbox" title= "Select_{{ e.id }}" name="select_{{ e.id }}" id="{{ e.id }}"
                                                class="select_one {{ e.id }}"></input>
                                    </form>
                                </td>
                                {% if show_uri %}
                                <td><a href="{% url 'view_endpoint' e.id %}">{{ e }}</a>
                                {% else %}
                                <td><a href="{% url 'view_endpoint' e.id %}">{{ e.host_no_port }}</a>
                                {% endif %}
                                  {% if e.tags %}
                                      <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 %}
                                </td>
                                <td><a href="{% url 'view_product' e.product.id %}">{{ e.product }}</a>
                                  <sup>
                                      {% for tag in e.product.tags %}
                                          <a title="Search {{ tag }}" class="tag-label tag-color"
                                             href="{% url 'simple_search' %}?query={{ tag }}">{{ tag }}</a>
                                      {% endfor %}
                                  </sup>
                                </td>
                                <td>
                                  {% if e.finding_count > 0 %}
                                  {% if tab_product %}
                                  <a href="{% url 'product_open_findings' tab_product.id %}?test__engagement__product={{ tab_product.id }}&endpoints={{ e.id }}">{{ e.finding_count_endpoint }}</a>
                                  {% else %}
                                  <a href="{% url 'open_findings' %}?endpoints={{ e.id }}">{{ e.finding_count_endpoint }}</a>
                                  {% endif %}
                                  {% else %}
                                  No Open, Active Findings
                                  {% endif %}
                                </td>
                                <td>
                                  {% if e.remediated%}
                                    Remediated
                                  {% else %}
                                    Vulnerable
                                  {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=endpoints page_size=True %}
                </div>
            {% else %}
                <h5> No endpoints </h5>
            {% endif %}
        </div>
    </div>

{% endblock %}
{% block postscript %}
<script>
        var checkbox_count = 0;
        function check_checked_endpoint()
        {
          var checkbox_values = $("input[type=checkbox][name^='select_']");

          for (var i = 0; i < checkbox_values.length; i++) {
            if ($(checkbox_values[i]).prop("checked")) {
              if (checkbox_values[i].name != 'select_all') {
                checkbox_count++;
              }
            }
          }
          if (checkbox_count > 0)
          {
              $('div#bulk_remedy').removeClass('hidden');
          }
        }
        $(function () {
            $(document).ready(function(){
              $('[data-toggle="tooltip"]').tooltip();
            });
            check_checked_endpoint();

            $('#id_status').on('click', function (e) {
                var checked = this.checked;
                // $('#bulk_remedy #id_active').prop('disabled', !checked);
            })
            
            $('.table-responsive').on('hide.bs.dropdown', function () {
              $('.table-responsive').css( "overflow", "auto" );
            })

            $('[id^=delete-endpoint-menu-]').on('click', function () {
              if (confirm('Are you sure you want to delete this endpoint?'))
              {
                  var form_element = "form#" + this.id + "-form";
                  $( form_element ).submit();
              }
            });

            $('[data-toggle="tooltip"]').tooltip();

            $('input[type="checkbox"]').change(function () {
              checkbox_count = 0;
              endpoint = $(this).attr("name");
              if (endpoint.indexOf("select_") >= 0)
              {
                var checkbox_values = $("input[type=checkbox][name^='select_']");
                for (var i = 0; i < checkbox_values.length; i++) {
                  if ($(checkbox_values[i]).prop("checked")) {
                    checkbox_count++;
                  }
                }

                if ($(this).prop("checked")) {
                  $('div#bulk_remedy').removeClass('hidden');
                } else {
                  checkbox_count--;
                  var checkbox_values = $("input[type=checkbox][name^='select_']");
                  var checked = false;

                  for (var i = 0; i < checkbox_values.length; i++) {
                    if ($(checkbox_values[i]).prop("checked")) {
                      checked = true;
                    }
                  }
                  if (checked == false) {
                    $('div#bulk_remedy').addClass('hidden');
                  }
                }

              }
            });

			      $('form#bulk_change_form').on('submit', function(e){
                $('input[type=checkbox].select_one:checked').each(function(){
                    var hidden_input = $('<input type="hidden" value="' + this.id + '" name="endpoints_to_update">')
                    $('form#bulk_change_form').append(hidden_input);
                });
            });

            $('input#select_all').on('click', function (e) {
                if ($(this).is(":checked")) {
                    $('input.select_one').prop('checked', true);
                    console.log($('input.select_one').prop('checked', true));
                    $('div#bulk_remedy').removeClass('hidden');
                }
                else {
                    $('input.select_one').prop('checked', false);
                    $('div#bulk_remedy').addClass('hidden');
                }
            });

            $('a.delete-bulk').on('click', function (e) {
                if (confirm('Are you sure you want to delete this endpoint?'))
                {
                    var hidden_input = $('<input type="hidden" value="delete_bulk_endpoints" name="delete_bulk_endpoints">')
                    $('form#bulk_change_form').append(hidden_input);
                    $( "form#bulk_change_form" ).submit();
                }
            });

            $( document ).on( "click", "button.delete-endpoints", function (e) {
                return confirm('Are you sure you want to delete this endpoint(s)?')
            });

            if (document.referrer.indexOf('simple_search') > 0) {
                var terms = '';
                if ($.cookie('highlight')) {
                    terms = $.cookie('highlight').split(' ');

                    for (var i = 0; i < terms.length; i++) {
                        $('body').highlight(terms[i]);
                    }
                }
                $('input#simple_search').val(terms);
            };
        });
    </script>
    {% include "dojo/filter_js_snippet.html" %}
{% endblock %}