{% extends "course_flow/base.html" %}
<!-- -->
{% load static compress i18n %} {% get_current_language as LANGUAGE_CODE %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block title %}{% trans "Project Comparison" %} - CourseFlow{% endblock %}
<!-- -->
{% block metadescription %} {% endblock %}
<!-- -->
{% block header %}{% 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 %}
<!-- -->
{% block foot %} {% 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 %}',
  }
  const iconpath = "{% static 'course_flow/img/images_svg/' %}";

  $("#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;
  var comparison_renderer;


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

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

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



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

{% endblock %}
