<% provide(:head_title, t("experiments.canvas.head_title", project: h(@project.name)).html_safe) %>
<% provide(:sidebar_title, t("sidebar.my_modules.sidebar_title")) %>
<% provide(:sidebar_url, sidebar_experiment_path(@experiment)) %>
<% provide(:container_class, 'no-second-nav-container') %>

<%= content_for :sidebar do %>
  <%= render partial: 'shared/sidebar/my_modules', locals: { experiment: @experiment, my_modules: @active_modules } %>
<% end %>

<div class="content-pane flexible experiment-new-my_module" id="experiment-canvas" data-e2e="e2e-CO-canvas">
  <%= render partial: 'experiments/show_header' %>
  <div class="toolbar-row" id="diagram-buttons" data-width-breakpoint="750">
    <span class="left" id="toolbar-left-block">
      <% if can_manage_experiment?(@experiment) %>
        <%= link_to modules_new_experiment_path(@experiment, view_mode: 'canvas'),
                    class: 'btn btn-primary new-my-module-button',
                    title: t('experiments.canvas.new_my_module_tooltip'),
                    data: { view_mode: 'active' },
                    remote: true do %>
                <span class="sn-icon sn-icon-new-task" data-e2e="e2e-BT-canvasToolbar-createTask"></span>
                <span class="2xl:inline tw-hidden"><%= t('experiments.canvas.new_my_module') %></span>
        <% end %>
        <%=link_to canvas_edit_experiment_url(@experiment),
              remote: true,
              type: 'button',
              id: 'edit-canvas-button',
              title: t('experiments.canvas.canvas_edit'),
              data: { action: 'edit' },
              class: 'ajax btn btn-light' do %>
                <span class="sn-icon sn-icon-edit" data-e2e="e2e-BT-canvasToolbar-editWorkflow"></span>
                <span class="2xl:inline tw-hidden"><%= t('experiments.canvas.canvas_edit') %></span>
              <% end %>
      <% end %>

      <span id="experimentDescriptionModal">
        <experiment-description-modal
          experiment-url="<%= experiment_path(@experiment) %>"
        ></experiment-description-modal>
      </span>
    </span>

    <%= render partial: 'task_view_dropdowns' %>

    <span class="right">
      <div id="zoom-level-buttons" class="sci-toggles-group change-canvas-view" data-toggle="buttons">
      <span class="2xl:inline tw-hidden zoom-text"><%=t 'experiments.canvas.zoom' %></span>
        <input type="radio" name="canvas-format" class="sci-toggle-item" checked>
        <%=link_to canvas_full_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax sci-toggle-item-label", "data-action" => "full_zoom", "data-toggle" => "button", "aria-pressed" => true do %>
          <%= render partial: 'experiments/canvas_svg_icons', locals: { type: 'full' } %>
        <% end %>
        <input type="radio" name="canvas-format" class="sci-toggle-item" >
        <%=link_to canvas_medium_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax sci-toggle-item-label", "data-action" => "medium_zoom" do %>
          <%= render partial: 'experiments/canvas_svg_icons', locals: { type: 'medium' } %>
        <% end %>
        <input type="radio" name="canvas-format" class="sci-toggle-item" >
        <%=link_to canvas_small_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax sci-toggle-item-label", "data-action" => "small_zoom" do %>
          <%= render partial: 'experiments/canvas_svg_icons', locals: { type: 'small' } %>
        <% end %>
      </div>
    </span>
  </div>
  <% if @active_modules %>
    <div id="canvas-container" data-project-id="<%= @project.id %>" data-module-tags-url="<%= my_module_tags_experiment_path(@experiment, format: :json) %>">
      <%= render partial: 'canvas/full_zoom', locals: { experiment: @experiment, my_modules: @active_modules } %>
    </div>
  <% else %>
    <div class="pt-10">
      <em><%= t('experiments.empty_state.no_active_modules_archived_branch') %></em>
    </div>
  <% end %>
</div>

<div id="accessModalContainer" class="vue-access-modal">
  <div ref="accessModal" id="accessModalComponent"></div>
  <teleport to="body">
    <access-modal
      v-if="accessModalOpen"
      :params="params"
      @close="accessModalOpen = false" />
  </teleport>
</div>

<!-- Manage tags modal -->
<%= render partial: 'canvas/full_zoom/tags_modal' %>
<%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: nil } %>
<%= javascript_include_tag("my_modules/tags") %>

<!-- Initialize dropdown actions -->

<%= javascript_include_tag("experiments/show") %>

<!-- Include all the neccesary JS libraries -->
<%= javascript_include_tag("eventPause-min") %>

<%= javascript_include_tag("projects/canvas") %>
<%= javascript_include_tag 'vue_legacy_access_modal' %>

<%= render 'shared/tiny_mce_packs' %>
<%= javascript_include_tag 'vue_experiment_description_modal' %>
