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

<% active = !project.archived %>
<div id="<%= project.id %>"
     class="panel panel-default panel-project <%= 'archived' unless active %>"
     data-id="<%= project.id %>"
     data-project-users-tab-url="<%= url_for project_user_projects_path(project_id: project.id, format: :json) %>">
  <div class="panel-heading">

    <%= render partial: "projects/index/project_actions_dropdown.html.erb", locals: { project: project, view: 'cards' } %>

    <div class="pull-right">
      <input class="project-card-selector" type="checkbox" name="project-<%= project.id %>">
    </div>

    <div class="panel-title">
      <span class="fas <%= active ? 'fa-arrow-alt-circle-right' : 'fa-archive' %> "></span>
      <% if active %>
        <%= link_to project.name, project_path(project), id: "#{project.id}-project-canvas-link" %>
      <% else %>
        <%= project.name %>
      <% end %>
    </div>
  </div>

  <div class="panel-body">
    <div class="row">
      <% if project.hidden? %>
        <div class="col-xs-1">
          <i class="fas fa-lg fa-eye-slash" aria-hidden="true" title="<%= t("projects.index.hidden") %>"></i>
        </div>
        <div class="col-xs-10">
          <span><%= t("projects.index.hidden") %></span>
        </div>
      <% else %>
        <div class="col-xs-1">
          <i class="fas fa-lg fa-eye" aria-hidden="true" title="<%= t("projects.index.visible") %>"></i>
        </div>
        <div class="col-xs-10">
          <span><%= t("projects.index.visible") %></span>
        </div>
      <% end %>
    </div>
    <div class="row">
      <div class="col-xs-1"></div>
      <div class="col-xs-10">
        <%= t('projects.index.start_date') %>
        <strong><%= l(project.created_at, format: :full_date) %></strong>
      </div>
    </div>
  </div>

  <div class="panel-footer panel-footer-scinote">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-tabs-less" role="tablist" data-hook="project-footer-icons">
      <li role="presentation">
        <a class="btn btn-link <%= 'disabled' unless active %>"
           href="<%= url_for project_project_activities_path(project_id: project.id, format: :json) %>"
           aria-controls="activities-<%= project.id %>" role="tab" data-remote="true">
          <span class="fas fa-list"></span>
        </a>
      </li>
      <li class="pull-right" role="presentation">
        <a class="btn btn-link <%= 'disabled' unless active %>"
           href="<%= url_for project_project_comments_path(project_id: project.id, format: :json) %>"
           aria-controls="comments-<%= project.id %>" role="tab" data-remote="true">
          <span class="fas fa-comment"></span>
          <span class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless project.comment_count.positive? %>"
                data-linked-id="<%= project.id %>">
            <%= project.comment_count %>
          </span>
        </a>
      </li>
      <li class="pull-right" role="presentation">
        <a class="btn btn-link <%= 'disabled' unless active %>"
           href="<%= url_for notifications_project_path(id: project.id, format: :json) %>"
           aria-controls="notifications-<%= project.id %>" role="tab" data-remote="true">
          <span class="fas fa-bell"></span>
          <% if project.notification_count.positive? %>
            <span class="badge badge-indicator"><%= project.notification_count %></span>
          <% end %>
        </a>
      </li>
      <li class="pull-right" role="presentation">
        <a class="btn btn-link <%= 'disabled' unless active %>"
           href="<%= url_for project_user_projects_path(project_id: project.id, format: :json) %>"
           aria-controls="users-<%= project.id %>" role="tab" data-remote="true">
          <span class="fas fa-users"></span>
          <span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless project.user_count.positive? %>"
                data-linked-id="<%= project.id %>">
            <%= project.user_count %>
          </span>
        </a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content" data-hook="project-dropdown-panel">
      <div role="tabpanel" class="tab-pane" id="activities-<%= project.id %>"></div>
      <div role="tabpanel" class="tab-pane" id="users-<%= project.id %>"></div>
      <div role="tabpanel" class="tab-pane" id="notifications-<%= project.id %>"></div>
      <div role="tabpanel" class="tab-pane" id="comments-<%= project.id %>"></div>
    </div>

  </div>
</div>