<div id="update-canvas"
  data-can-create-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
  data-can-edit-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
  data-can-clone-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
  data-can-move-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
  data-can-delete-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
  data-can-reposition-modules="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
  data-can-edit-connections="<%= can_manage_experiment?(@experiment) ? "yes" : "no" %>"
  data-unsaved-work-text="<%=t "experiments.canvas.edit.unsaved_work" %>"
>
  <%= bootstrap_form_tag url: canvas_experiment_url, method: "post", html: {class: "canvas-header"} do |f| %>
    <% if can_manage_experiment?(@experiment) %>
      <%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
        <span class="hbtn-default">
          <span class="fas fa-credit-card"></span>
          <%= t("experiments.canvas.edit.new_module") %>
        </span>
        <span class="hbtn-hover">
          <span class="fas fa-credit-card"></span>
          <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>
      <% 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="fas fa-times 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">
    <%=t "experiments.canvas.edit.drag_connections" %>
  </span>
</div>
<div id="diagram-container">
  <% if can_manage_experiment?(@experiment) %>
    <div id="diagram" class="diagram">
      <% my_modules.each do |my_module| %>
        <%= render partial: "canvas/edit/my_module", locals: { experiment: @experiment, my_module: my_module } %>
      <% 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 can_manage_experiment?(@experiment) %>
  <%= 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 %>
