<div id="update-canvas"
  data-can-create-modules="<%= @experiment_managable ? "yes" : "no" %>"
  data-can-edit-modules="<%= @experiment_managable ? "yes" : "no" %>"
  data-can-clone-modules="<%= @experiment_managable ? "yes" : "no" %>"
  data-can-move-modules="<%= @experiment_managable ? "yes" : "no" %>"
  data-can-delete-modules="<%= @experiment_managable ? "yes" : "no" %>"
  data-can-reposition-modules="<%= @experiment_managable ? "yes" : "no" %>"
  data-can-edit-connections="<%= @experiment_managable ? "yes" : "no" %>"
  data-unsaved-work-text="<%=t "experiments.canvas.edit.unsaved_work" %>"
>
  <%= form_with url: canvas_experiment_url, method: "post", html: {class: "canvas-header"} do |f| %>
    <% if @experiment_managable %>
      <%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
        <span class="sn-icon sn-icon-new-task"></span>
        <span>
          <span class="hbtn-new">
            <%= t("experiments.canvas.edit.new_module") %>
          </span>
          <span class="hbtn-drag">
            <em class="hidden-xs"><%= t("experiments.canvas.edit.new_module_hover") %></em>
            <span class="visible-xs-inline"><%= t("experiments.canvas.edit.new_module") %></span>
          </span>
        </span>
      <% end %>
    <% end %>
    <div class="sci-btn-group pull-right" role="group">
      <%= link_to canvas_experiment_path(@experiment), type: "button", class: "btn btn-secondary cancel-edit-canvas" do %>
        <span class="hidden-xs"><%= t("experiments.canvas.edit.cancel") %></span>
        <span class="sn-icon sn-icon-close visible-xs" style="height: 16px;margin-top: 4px;">&nbsp;</span>
      <% end %>
      <%= f.submit class: "btn btn-primary", id: "canvas-save" do %>
        <span class="visibile-xs"><%= t("experiments.canvas.edit.save_short") %></span>
        <span class="hidden-xs"><%= t("experiments.canvas.edit.save") %></span>
      <% end %>
    </div>
    <%= hidden_field_tag 'connections', '' %>
    <%= hidden_field_tag 'positions', '' %>
    <%= hidden_field_tag 'add', '' %>
    <%= hidden_field_tag 'add-names', '' %>
    <%= hidden_field_tag 'rename', '{}' %>
    <%= hidden_field_tag 'move', '{}' %>
    <%= hidden_field_tag 'cloned', '' %>
    <%= hidden_field_tag 'remove', '' %>
    <%= hidden_field_tag 'module-groups', '{}' %>
  <% end %>
  <span style="display: none;" id="dropdown-header-placeholder">
    <%=t "experiments.canvas.edit.options_header" %>
  </span>
  <span style="display: none;" id="edit-link-placeholder">
    <%=t "experiments.canvas.edit.edit_module" %>
  </span>
  <span style="display: none;" id="clone-link-placeholder">
    <%=t "experiments.canvas.edit.clone_module" %>
  </span>
  <span style="display: none;" id="clone-group-link-placeholder">
    <%=t "experiments.canvas.edit.clone_module_group" %>
  </span>
  <span style="display: none;" id="move-link-placeholder">
    <%=t "experiments.canvas.edit.move_module" %>
  </span>
  <span style="display: none;" id="move-group-link-placeholder">
    <%=t "experiments.canvas.edit.move_module_group" %>
  </span>
  <span style="display: none;" id="delete-link-placeholder">
    <%=t "experiments.canvas.edit.delete_module" %>
  </span>
  <span style="display: none;" id="delete-group-link-placeholder">
    <%=t "experiments.canvas.edit.delete_module_group" %>
  </span>
  <span style="display: none;" id="drag-connections-placeholder">
    <div class="task-card-code">
        <%=t "experiments.canvas.edit.id" %> <span class="new-my-module-canvas"><%=t "experiments.canvas.edit.no_module_id" %></span>
    </div>
    <%=t "experiments.canvas.edit.drag_connections" %>
  </span>
</div>
<div id="diagram-container">
  <% if @experiment_managable %>
    <div id="diagram" class="diagram">
      <% my_modules.each do |my_module| %>
        <% if can_read_my_module?(my_module) %>
          <%= render partial: "canvas/edit/my_module", locals: { experiment: @experiment, my_module: my_module } %>
        <% else %>
          <%= render partial: "canvas/full_zoom/my_module_hidden", locals: { experiment: @experiment, my_module: my_module } %>
        <% end %>
      <% end %>
    </div>
  <% end %>
</div>

<%-# Since we need to preload modals, we just check permission for experiment, instead of permissions for every module and module group -%>
<% if @experiment_managable %>
  <%= render partial: "canvas/edit/modal/new_module", locals: {experiment: @experiment} %>
  <%= render partial: "canvas/edit/modal/edit_module", locals: {experiment: @experiment } %>
  <%= render partial: "canvas/edit/modal/move_module", locals: {experiment: @experiment } %>
  <%= render partial: "canvas/edit/modal/move_module_group", locals: {experiment: @experiment } %>
  <%= render partial: "canvas/edit/modal/delete_module", locals: {experiment: @experiment} %>
  <%= render partial: "canvas/edit/modal/delete_module_group", locals: {experiment: @experiment} %>
<% end %>
