{% extends "course_flow/base.html" %}

{% load static compress i18n %}
{% load static i18n %}

{% get_current_language as LANGUAGE_CODE %}

{% block title %}
  {% trans "Project Comparison" %} - CourseFlow
{% endblock %}

{% block body %}

  <div id="sidebar" class="side-bar hide-print">
    <ul>
      <li class="hover-shade">
        <a href="#edit-menu"
        ><span class="material-symbols-rounded filled" title='{% trans "Edit" %}'
        >edit</span></a>
      </li>
      <li class="hover-shade">
        <a href="#node-bar"
        ><span class="material-symbols-rounded filled" title='{% trans "Add" %}'
        >add_circle</span></a>
      </li>
      {% if is_strategy == "false" %}
        <li class="hover-shade">
          <a href="#outcome-bar"
          ><span class="material-symbols-rounded filled" title='{% trans "Outcomes" %}'
          >spoke</span></a>
        </li>
        <li class="hover-shade">
          <a href="#view-bar"
          ><span class="material-symbols-rounded filled" title='{% trans "View Options" %}'
          >remove_red_eye</span></a>
        </li>
      {% endif %}
      <li class="hover-shade">
        <a href="#restore-bar"
        ><span class="material-symbols-rounded filled" title='{% trans "Restore Deleted" %}'
        >restore_from_trash</span></a>
      </li>
    </ul>
    <div id="edit-menu" class="right-panel-container"></div>
    <div id="node-bar" class="right-panel-container"></div>
    {% if is_strategy == "false" %}
      <div id="outcome-bar" class="right-panel-container"></div>
      <div id="view-bar" class="right-panel-container"></div>
      <div id="strategy-bar" class="right-panel-container"></div>
    {% endif %}
    <div id="restore-bar" class="right-panel-container"></div>
    <div class="window-close-button" id="side-bar-close-button">
      <img src="{% static 'course_flow/img/images_svg/close.svg' %}"/>
    </div>
  </div>

  {{ is_strategy }}
{% endblock %}

{% csrf_token %}

{% block scripts %}
  {{ block.super }}
  <script nonce="{{ request.csp_nonce }}">

    const workflow_paths = {
      activity: '{% url "course_flow:workflow-update" pk=object.pk %}',
      course: '{% url "course_flow:workflow-update" pk=object.pk %}',
      program: '{% url "course_flow:workflow-update" pk=object.pk %}',
      workflow: '{% url "course_flow:workflow-update" pk=object.pk %}',
    }

    $("#sidebar").detach().appendTo("#sidebar-container");

    $("#sidebar").tabs({
      active: 1,
      disabled: [0],
      collapsible: true,
      activate: (evt, ui) => {
        if (ui.oldTab.length === 0) $("#sidebar").removeClass("collapsed");
        else if (ui.newTab.length === 0) $("#sidebar").addClass("collapsed");
      }
    });

    $("#sidebar").on("dblclick mousedown", (evt) => {
      evt.stopPropagation();
    });

    jQuery('<div>', {
      class: 'load-screen'
    }).appendTo("#container");


    const user_permission = {{user_permission|safe}}

      $("#side-bar-close-button").on("click", () => {
        $("#sidebar").addClass("collapsed");
        $("#sidebar").tabs("option", "active", false);
      });


    const user_id = {{ user.id }};
    const user_name = "{{ user.username }}";

    const project_data = {{project_data|safe}};
    const public_view = false;

    const myColour = 'hsl(' + (((user_id * 5) % 360) + 1) + ',50%,50%)';

    const changeFieldID = Math.floor(Math.random() * 10000);

    window.addEventListener("load", function () {
      const comparison_renderer = new renderers.ComparisonRenderer(project_data);

      $(document).ajaxError(renderers.fail_function);
      comparison_renderer.render($("#container"));
    });
  </script>

{% endblock %}
