{% extends "course_flow/base.html" %}
<!-- -->
{% load static compress i18n %} {% get_current_language as LANGUAGE_CODE %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block title %}{% 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"
        ><img title='{% trans "Edit" %}'
          src="{% static 'course_flow/img/images_svg/edit_pencil_blue.svg' %}"
      /></a>
    </li>
    <li class="hover-shade">
      <a href="#node-bar"
        ><img title='{% trans "Nodes" %}' src="{% static 'course_flow/img/images_svg/add_new_blue.svg' %}"
      /></a>
    </li>
    {% if is_strategy == "false" %}
    <li class="hover-shade">
      <a href="#outcome-bar"
        ><img title='{% trans "Outcomes" %}' src="{% static 'course_flow/img/images_svg/outcomes_blue.svg' %}"
      /></a>
    </li>
    <li class="hover-shade">
      <a href="#strategy-bar"
        ><img title='{% trans "Strategies" %}' src="{% static 'course_flow/img/images_svg/strategy_blue.svg' %}"
      /></a>
    </li>
    <li class="hover-shade">
      <a href="#view-bar"
        ><img title='{% trans "View Options" %}' src="{% static 'course_flow/img/images_svg/view.svg' %}"
      /></a>
    </li>
    <li class="hover-shade">
      <a href="#restore-bar"
        ><img title='{% trans "Restore Deleted" %}' src="{% static 'course_flow/img/images_svg/restore_blue.svg' %}"
      /></a>
    </li>
    {% endif %}
  </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();});

  
  const public_view = {{public_view|safe}};
  const user_permission = {{user_permission|safe}}
  const user_role = {{user_role|safe}}

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

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

  $(".menubar").removeClass("hidden");





  const user_id = {{ user.id |default:0}};
  const workflow_model_id = {{ object.id }};
  const workflow_type = "{{ object.type }}";
  const user_name = "{{ user.username |default:""}}";

  workflow_data_package = {{data_package|safe}}
  
  var workflow_renderer;


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

   const changeFieldID = Math.floor(Math.random()*10000);
   
   
  window.addEventListener("load", function(){
      workflow_renderer = new renderers.WorkflowRenderer(workflow_model_id,workflow_data_package);
      workflow_renderer.connect();
      
      
      
      $(document).ajaxError(renderers.fail_function);
  });
</script>

{% endblock %}
