<% provide(:head_title, t("experiments.table.head_title", experiment: h(@experiment.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') %>

<div class="content-pane flexible experiment-new-my_module <%= params[:view_mode] %>" id="experimentTable">
  <%= render partial: 'experiments/show_header' %>
  <%= render partial: 'experiments/table_toolbar' %>
  <div class="experiment-table-container">
    <div class="experiment-table"
         style="--columns-count: <%= Experiments::TableViewService::COLUMNS.length%>"
         data-my-modules-url="<%= load_table_experiment_path(@experiment, view_mode: params[:view_mode]) %>"
         data-move-modules-modal-url="<%= move_modules_modal_experiment_path(@experiment) %>"
         data-move-modules-url="<%= move_modules_experiment_path(@experiment) %>"
    >
      <div class="table-header">
        <div class="table-header-cell select-all-checkboxes">
          <div class="sci-checkbox-container">
            <input type="checkbox" class="sci-checkbox">
            <span class="sci-checkbox-label"></span>
          </div>
        </div>
        <% Experiments::TableViewService::COLUMNS.each do |col| %>
          <div class="table-header-cell <%= col %>-column <%= 'hidden' unless col.to_s.in?(@my_module_visible_table_columns) || col == :task_name %>">
            <%= t("experiments.table.column.#{col}_html") %>
          </div>
        <% end %>
        <div class="table-header-cell"></div>
      </div>
      <div class="table-body"></div>
    </div>
    <%= render partial: 'experiments/no_task_results' %>


    <div id="actionToolbar" data-behaviour="vue">
      <action-toolbar actions-url="<%= actions_toolbar_my_modules_url %>" />
    </div>
  </div>
  <%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: nil } %>
</div>

<template id="experimentTablePlaceholder">
  <div class="table-row-placeholder">
    <div class="header"></div>
    <% 6.times do |i| %>
      <div class="placeholder-cell line-<%= i %>"></div>
    <% end %>
    <div class="placeholder-cell circle-0"></div>
    <% 2.times do |i| %>
      <div class="placeholder-cell line-<%= 6 + i %>"></div>
    <% end %>
  </div>
  <div class="table-row-placeholder-divider"></div>
</template>

<template id="experimentTableEndOfList">
  <div class="experiment-table-list-end-placeholder">
    <i class="fas fa-flag-checkered"></i>
    <span><%= t('projects.index.end_of_list_placeholder') %></span>
    <i class="fas fa-flag-checkered"></i>
  </div>
</template>

<%= render partial: "canvas/edit/modal/edit_module" %>
<%= render partial: "experiments/table_display_modal"%>

<%= javascript_include_tag "vue_components_action_toolbar" %>
<%= javascript_include_tag("my_modules/tags") %>
<%= javascript_include_tag("experiments/table", id: "experiments-table-js-tag") %>
<%= javascript_include_tag("experiments/dropdown_actions") %>
