{% extends "base.html" %}
{% load i18n %}
{% load navigation_tags %}
{% load display_tags %}
{% load authorization_tags %}
{% block content %}
    {{ block.super }}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        <i class="fa-solid fa-sitemap dd-card-icon" aria-hidden="true"></i>{{ name }}
                        <div class="dropdown pull-right">
                            <button id="show-filters"
                                    aria-label="{% trans 'Filters' %}"
                                    data-toggle="collapse"
                                    data-target="#the-filters"
                                    class="btn btn-primary toggle-filters">
                                <i class="fa-solid fa-filter"></i> <i class="caret"></i>
                            </button>
                            {% if product_tab and product_tab.product|has_object_permission:"add" %}
                                <button class="btn btn-primary dropdown-toggle"
                                        type="button"
                                        id="dropdownMenu1"
                                        data-toggle="dropdown"
                                        aria-expanded="true"
                                        aria-label="{% trans 'Endpoint actions' %}">
                                    <span class="fa-solid fa-screwdriver-wrench"></span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-right"
                                    role="menu"
                                    aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                        <a href="{% url 'add_endpoint_to_product' product_tab.product.id %}">
                                            <i class="fa-solid fa-plus"></i> New Endpoint
                                        </a>
                                    </li>
                                </ul>
                            {% endif %}
                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="is-filters panel-body collapse">
                    {% include "dojo/filter_snippet.html" with form=filtered.form %}
                </div>
            </div>
            {% if locations %}
                <div class="hidden" style="padding-bottom: 5px" id="bulk_remedy">
                    <form action="{% if product_tab %} {% url 'endpoints_bulk_update_all_product' product_tab.product.id %} {% else %} {% url 'endpoints_bulk_all' %} {% endif %}"
                          method="post"
                          id="bulk_change_form">
                        {% csrf_token %}
                        {% if not product_tab or product_tab and product_tab.product|has_object_permission:"edit" %}
                            <button class="btn btn-sm btn-primary"
                                    type="submit"
                                    id="remedy_endpoint"
                                    title="{% trans 'Mitigate Endpoints' %}">Bulk Mitigate</button>
                        {% endif %}
                        {% if not product_tab or product_tab and product_tab.product|has_object_permission:"delete" %}
                            <button type="button"
                                    class="btn btn-sm btn-primary"
                                    data-toggle="tooltip"
                                    data-placement="bottom"
                                    title="{% trans 'Delete Endpoint' %}"
                                    aria-label="{% trans 'Delete endpoint' %}">
                                <a class="white-color delete-bulk" href="#" alt="{% trans 'Delete Endpoints' %}">
                                    <i class="fa-solid fa-trash"></i>
                                </a>
                            </button>
                        {% endif %}
                    </form>
                </div>
                <div class="clearfix">{% include "dojo/paging_snippet.html" with page=locations 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>
                            {% if not product_tab or product_tab and product_tab.product|has_object_permission:"edit" %}
                                <th class="centered"
                                    title="{% trans 'Select all visible endpoints.' %}"
                                    aria-label="{% trans 'Select all visible endpoints.' %}"
                                    id="bulk_edit"
                                    scope="col">
                                    <form class="inline-form centered" action="#">
                                        <input aria-label="{% trans 'Select all visible endpoints checkbox' %}"
                                               type="checkbox"
                                               title="{% trans 'Select All' %}"
                                               name="select_all"
                                               id="select_all" />
                                    </form>
                                </th>
                            {% endif %}
                            {% if host_view %}
                                <th>Host</th>
                            {% else %}
                                <th>Endpoint</th>
                            {% endif %}
                            {% if not product_tab %}<th class="text-center" nowrap="nowrap">Active (Total) Products</th>{% endif %}
                            <th class="text-center" nowrap="nowrap">{% dojo_sort request 'Active (Total) Findings' 'active_findings' field='ordering' %}</th>
                            <th class="text-center" nowrap="nowrap">Overall Status</th>
                        </tr>
                        {% for location in locations %}
                            <tr>
                                {% if not product_tab or product_tab and product_tab.product|has_object_permission:"edit" %}
                                    <td class="centered">
                                        <form action="#">
                                            <input type="checkbox"
                                                   title="Select_{{ location.id }}"
                                                   name="select_{{ location.id }}"
                                                   id="{{ location.id }}"
                                                   class="select_one {{ location.id }}" />
                                        </form>
                                    </td>
                                {% endif %}
                                {% if host_view %}
                                    <td>
                                        <a href="{% url 'view_endpoint_host' location.id %}"
                                           title="{{ location.host }}">{{ location.host|url_shortener }}</a>
                                    </td>
                                {% else %}
                                    <td>
                                        <a href="{% url 'view_endpoint' location.id %}" title="{{ location }}">{{ location|url_shortener }}
                                            {% if location.host_validation_failure %}
                                                <span data-toggle="tooltip"
                                                      title="{% trans 'Endpoint is broken. Check documentation to look for fix process' %}">&#128681;</span>
                                            {% endif %}
                                        </a>
                                        {% include "dojo/snippets/tags.html" with tags=location.readable_tags %}
                                    </td>
                                {% endif %}
                                {% if not product_tab %}
                                    <td class="text-center">
                                        {% if host_view %}
                                            <a href="{% url 'product' %}?endpoints__host={{ location.host }}&location_status=Active">{{ location.active_products }}</a>
                                            <a href="{% url 'product' %}?endpoints__host={{ location.host }}">({{ location.total_products }})</a>
                                        {% else %}
                                            <a href="{% url 'product' %}?endpoints={{ location.id }}&location_status=Active">{{ location.active_products }}</a>
                                            <a href="{% url 'product' %}?endpoints={{ location.id }}">({{ location.total_products }})</a>
                                        {% endif %}
                                    </td>
                                {% endif %}
                                <td class="text-center">
                                    {% if host_view %}
                                        <a href="{% url 'all_findings' %}?endpoints__host={{ location.host }}&location_status=Active">{{ location.active_findings }}</a>
                                        <a href="{% url 'all_findings' %}?endpoints__host={{ location.host }}">({{ location.total_findings }})</a>
                                    {% else %}
                                        <a href="{% url 'all_findings' %}?endpoints={{ location.id }}&location_status=Active">{{ location.active_findings }}</a>
                                        <a href="{% url 'all_findings' %}?endpoints={{ location.id }}">({{ location.total_findings }})</a>
                                    {% endif %}
                                </td>
                                <td class="text-center">{{ location.overall_status }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
                <div class="clearfix">{% include "dojo/paging_snippet.html" with page=locations page_size=True %}</div>
            {% else %}
                {% if host_view %}
                    <div id="no_hosts">
                        <p class="text-center">No hosts found.</p>
                    </div>
                {% else %}
                    <div id="no_endpoints">
                        <p class="text-center">No endpoints found.</p>
                    </div>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endblock content %}
{% block postscript %}
    {{ block.super }}
    <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() {
            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();
                }
            });

            $('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)?");
            });
        });
    </script>
    {% include "dojo/filter_js_snippet.html" %}
{% endblock postscript %}