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

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

{% get_current_language as LANGUAGE_CODE %}

{% block title %}
  {% if object.title != "" %}
    {{ object.title }}
  {% else %}
    {% trans "Untitled" %}
  {% endif %}
  - 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>
    {% 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 %}

{% 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();
    });

    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 %}
