{% extends "course_flow/base.html" %}
<!-- -->
{% load static compress i18n %} {% get_current_language as LANGUAGE_CODE %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block title %}
  {%if object.title != "" %}
    {{ object.title }}
  {% else %}
    {% trans "Untitled" %}
  {% endif %}
  - 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>
    {% endif %}
    <div id="restore-bar" class="right-panel-container"></div>
    <div class="window-close-button" id="side-bar-close-button">
     <span class="material-symbols-rounded green">arrow_forward</span>
  </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 %}
