scinote-web/app/views/projects/show.html.erb

<% provide(:head_title, t("projects.show.head_title", project: h(@project.name)).html_safe) %>
<% provide(:sidebar_title, experiments_view_mode(@project) == 'archived' ? t("sidebar.experiments.sidebar_title_archived") : t("sidebar.experiments.sidebar_title")) %>
<% provide(:sidebar_url, sidebar_project_path(@project)) %>
<% provide(:container_class, 'no-second-nav-container') %>

<%= content_for :sidebar do %>
  <%= render partial: 'shared/sidebar/experiments', locals: { project: @project, view_mode: experiments_view_mode(@project)} %>
<% end %>

<div id="projectShowWrapper" class="content-pane flexible projects-show <%= experiments_view_mode(@project) %>" data-view-mode="<%= experiments_view_mode(@project) %>">
  <%= render partial: 'projects/show/header' %>

  <div class="project-show-container">
    <div class="cards-wrapper <%= 'readonly' unless @project_is_managable %> <%= cards_view_type_class(@current_view_type) %>"
         id="cardsWrapper"
         data-experiments-cards-url="<%= experiments_cards_project_path(@project) %>">
      <!-- list -->
      <div class="table-header">
        <div class="table-header-cell select-all-checkboxes">
          <div class="sci-checkbox-container">
            <input value="1" type="checkbox" class="sci-checkbox select-all">
            <span class="sci-checkbox-label"></span>
          </div>
        </div>
        <div class="table-header-cell"><%= t('experiments.card.name') %></div>
        <div class="table-header-cell"><%= t('experiments.id') %></div>
        <div class="table-header-cell"><%= t('experiments.card.start_date') %></div>
        <div class="table-header-cell"><%= t('experiments.card.modified_date') %></div>
        <div class="table-header-cell" data-view-mode="archived"><%= t('experiments.card.archived_date') %></div>
        <div class="table-header-cell" data-view-mode="active"><%= t('experiments.card.completed_task') %></div>
        <div class="table-header-cell"><%= t('experiments.card.description') %></div>
        <div class="table-header-cell"></div>
      </div>
    </div>
  </div>
  <div id="actionToolbar" data-behaviour="vue">
    <action-toolbar actions-url="<%= actions_toolbar_experiments_url(project_id: params[:project_id]) %>" />
  </div>
</div>

<template id="experimentPlaceholder">
  <div class="experiment-placeholder card">
    <div class="placeholder-element header"></div>
    <div class="placeholder-body">
      <% 3.times do |i| %>
        <div class="placeholder-element line-<%= i %>"></div>
      <% end %>
    </div>
    <div class="placeholder image-container">
      <div class="placeholder-element image"></div>
      <div class="placeholder-element image-text"></div>
    </div>
    <div class="placeholder-element footer"></div>
  </div>
</template>

<template id="experimentEndOfList">
  <div class="experiment-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>

<%= javascript_include_tag "vue_components_action_toolbar" %>
<%= javascript_include_tag("projects/show") %>

<i data-hook="project-show-js"></i>