scinote-web/app/views/projects/index/_project_card.html.erb

<div class="card project-card"
     data-id="<%= project.id %>"
     data-edit-url="<%= edit_project_path(project) %>"
     data-editable="<%= can_manage_project?(project) %>"
     data-archivable="<%= project.active? && can_archive_project?(project) %>"
     data-restorable="<%= project.archived? && can_restore_project?(project) %>">
  <div class="checkbox-cell">
    <div class="sci-checkbox-container">
      <input value="1" type="checkbox" class="sci-checkbox project-card-selector">
      <span class="sci-checkbox-label"></span>
    </div>
  </div>
  <div class="project-name-cell">
    <% if project.archived? %>
      <%= link_to experiment_archive_project_url(project) do %>
        <h3 class="name" title="<%= project.name %>">
          <%= project.name %>
        </h3>
      <% end %>
    <% else %>
      <%= link_to project_url(project) do %>
        <h3 class="name" title="<%= project.name %>">
          <%= project.name %>
        </h3>
      <% end %>
    <% end %>
  </div>
  <div class="actions actions-cell">
    <%= render partial: 'projects/index/project_actions_dropdown.html.erb', locals: { project: project, view: 'cards' } %>
  </div>

  <div class="data-row start-date-cell">
    <span class="card-label"><%= t('projects.index.card.start_date') %></span>
    <span class="value card-value"> <%= l(project.created_at, format: :full_date) %></span>
    <span class="value cell-value"> <%= l(project.created_at, format: :full_with_comma) %></span>
  </div>

  <div class="data-row visibility-cell">
    <span class="card-label"><%= t('projects.index.card.visibility') %></span>
    <span class="value">
    <% if project.hidden? %>
      <%= t('projects.index.hidden') %>
    <% else %>
      <%= t('projects.index.visible') %>
    <% end %>
    </span>
  </div>

  <div class="data-row user-cell">
    <span class="card-label"><%= t('projects.index.card.users') %></span>
    <div class="value">

      <% project.user_projects[0..3].each do |user_project| %>
        <span class="global-avatar-container">
          <%= image_tag(avatar_path(user_project.user, :icon_small), title: user_name_with_role(user_project)) %>
        </span>
      <% end %>

      <% more_users = project.user_projects[4..-1].to_a %>
      <% if more_users.any? %>
        <a href="" class="more-users" title="<%= user_names_with_roles(more_users) %>">
           +<%= more_users.size %>
        </a>
      <% end %>

      <% if project.active? %>
        <%= link_to project_users_edit_path(project),
                    class: 'manage-users-link',
                    remote: true,
                    data: { 'view-mode': 'active' } do %>
          <span class="new-user">
            <i class="fas fa-plus"></i>
          </span>
        <% end %>
      <% end %>
    </div>
  </div>

  <% if project.archived? %>
    <div class="data-row archived-date-cell">
      <span class="card-label"><%= t('projects.index.card.archived_date') %></span>
      <span class="value card-value"> <%= l(project.archived_on, format: :full_date) %></span>
      <span class="value cell-value"> <%= l(project.archived_on, format: :full_with_comma) %></span>
    </div>
  <% end %>
</div>