{% extends "scanpipe/base.html" %}
{% load static %}

{% block title %}ScanCode.io: {{ project.name }} - Dependency tree{% endblock %}

{% block extrahead %}
  <link rel="stylesheet" href="{% static 'iamkate-tree-views/tree.css' %}" crossorigin="anonymous">
{% endblock %}

{% block content %}
  <div id="content-header" class="container is-max-widescreen mb-3">
    {% include 'scanpipe/includes/navbar_header.html' %}
    <section class="mx-5">
      <div class="is-flex is-justify-content-space-between">
        {% include 'scanpipe/includes/breadcrumb.html' with linked_project=True current="Dependency tree" %}
      </div>
    </section>
  </div>

  <div class="container is-max-widescreen mb-3">
    <section class="mx-5">
      {% if recursion_error %}
        <article class="message is-danger">
          <div class="message-body">
            The dependency tree cannot be rendered as it contains circular references.
            {{ message|linebreaksbr }}
          </div>
        </article>
      {% endif %}

      <div class="mb-4">
        <button id="collapseAll" class="button is-small">
          <span>Collapse All</span>
          <span class="icon is-small">
            <i class="fas fa-minus"></i>
          </span>
        </button>
        <button id="expendAll" class="button is-small">
          <span>Expend All</span>
          <span class="icon is-small">
            <i class="fas fa-plus"></i>
          </span>
        </button>
        <button id="showVulnerableOnlyButton" class="button is-small">
          <span>Show Vulnerable only</span>
          <span class="icon is-small">
            <i class="fa-solid fa-bug"></i>
          </span>
        </button>
        <button id="showComplianceAlertOnlyButton" class="button is-small">
          <span>Show Compliance Alert only</span>
          <span class="icon is-small ">
            <i class="fa-solid fa-scale-balanced"></i>
          </span>
        </button>
      </div>

      <ul id="dependency-tree" class="tree">
        <li>
          <details open>
            <summary class="has-text-weight-semibold">
              {{ dependency_tree.name }}
            </summary>
            {% include 'scanpipe/tree/dependency_children.html' with children=dependency_tree.children %}
          </details>
        </li>
      </ul>
    </section>
  </div>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const treeContainer = document.getElementById('tree');
    const collapseAllButton = document.getElementById('collapseAll');
    const expendAllButton = document.getElementById('expendAll');

    function collapseAllDetails() {
      document.querySelectorAll('details').forEach(details => {
        details.removeAttribute('open');
      });
      showAllListItems();
    }

    function expendAllDetails() {
      document.querySelectorAll('details').forEach(details => {
        details.setAttribute('open', ''); // Adding 'open' attribute to open the details
      });
      showAllListItems();
    }

    collapseAllButton.addEventListener('click', collapseAllDetails);
    expendAllButton.addEventListener('click', expendAllDetails);

    // Following function are use to limit the display to specific elements.

    function expandAncestors(detailsElement) {
      let parent = detailsElement.parentElement.closest('details');
      while (parent) {
        parent.setAttribute('open', '');
        parent.parentElement.style.display = '';
        parent = parent.parentElement.closest('details');
      }
    }

    function showAllListItems() {
      const listItems = treeContainer.querySelectorAll('li');
      listItems.forEach(item => {
          item.style.display = '';
      });
    }

    function hideAllListItems() {
      const listItems = treeContainer.querySelectorAll('li');
      listItems.forEach(item => {
          item.style.display = 'none';
      });
    }

    function handleItems(attribute, value) {
      collapseAllDetails();
      hideAllListItems();

      const items = document.querySelectorAll(`li[${attribute}="${value}"]`);
      items.forEach(item => {
          item.style.display = 'block';
          expandAncestors(item);
      });
    }

    function handleVulnerableItems() {
      handleItems('data-is-vulnerable', 'true');
    }

    function handleComplianceAlertItems() {
      handleItems('data-compliance-alert', 'true');
    }

    showVulnerableOnlyButton.addEventListener('click', handleVulnerableItems);
    showComplianceAlertOnlyButton.addEventListener('click', handleComplianceAlertItems);
  });
</script>
{% endblock %}