scinote-web/app/views/canvas/full_zoom/_my_module.html.erb

<div class="panel panel-default module-large
  <%= get_task_alert_color(my_module) %>"
  id="<%= my_module.id %>"
  data-module-id="<%= my_module.id %>"
  data-module-name="<%= my_module.name %>"
  <% if my_module.my_module_group.present? %>
  data-module-group="<%= my_module.my_module_group.id %>"
  <% end %>
  data-module-x="<%= my_module.x %>"
  data-module-y="<%= my_module.y %>"
  data-module-conns="<%= construct_module_connections(my_module) %>"
  data-module-users-tab-url="<%=  designated_users_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>"
  data-module-tags-url="<%= my_module_tags_experiment_path(my_module.experiment, format: :json) %>">

  <div data-view-mode="active">
    <a class="edit-tags-link pull-right" data-remote="true" href="<%= my_module_tags_edit_url(my_module, format: :json) %>">
      <%= render partial: "canvas/tags", locals: { my_module: my_module } %>
    </a>
  </div>

  <div data-view-mode="archived">
    <a class="edit-tags-link pull-right" data-remote="true" href="<%= my_module_tags_edit_url(my_module, format: :json) %>">
      <%= render partial: "canvas/tags", locals: { my_module: my_module } %>
    </a>
  </div>

  <div class="task-selector-container pull-left " data-view-mode="archived" data-task-id="<%= my_module.id %>">
    <div class="sci-checkbox-container">
      <input value="1" type="checkbox" class="sci-checkbox task-selector">
      <span class="sci-checkbox-label"></span>
    </div>
  </div>

  <div class="panel-heading">
    <h3 class="panel-title">
      <%= link_to my_module.name, protocols_my_module_path(my_module,
                                                           view_mode: my_module.archived_branch? ? 'archived' : 'active'),
            title: my_module.name, class: 'my-module-title' %>
    </h3>
  </div>

  <div class="panel-body">
    <div class="overdue-date" data-view-mode="active">
      <% if !my_module.completed? && can_manage_my_module?(my_module) %>
        <%= link_to due_date_my_module_path(my_module, format: :json), remote: true,
                    class: "due-date-link due-date-refresh" do %>
          <%= render partial: "my_modules/card_due_date_label", locals: { my_module: my_module, format: :full_date } %>
        <% end %>
      <% else %>
        <%= render partial: "my_modules/card_due_date_label", locals: { my_module: my_module, format: :full_date } %>
      <% end %>
    </div>

    <div class="archived-overdue-date" data-view-mode="archived">
      <span class="date-label"><%= t('experiments.canvas.full_zoom.due_date') %></span>
      <span class="date-value">
        <%= my_module.due_date ? l(my_module.due_date, format: :full_date) : t('experiments.canvas.full_zoom.no_due_date') %>
      </span>

      <div>
        <span class="date-label"><%= t('experiments.module_archive.archived_on') %></span>
        <span class="date-value">
          <%= my_module.archived_branch? ? l(my_module_archived_on(my_module), format: :full_date) : t('experiments.canvas.full_zoom.no_due_date') %>
        </span>
      </div>
    </div>

    <div class="status-label" style="--state-color: <%= my_module.my_module_status.color %>">
      <% if my_module.status_changing %>
        <i class="fas fa-spinner fa-spin"></i>
        <span><%= t('experiments.canvas.full_zoom.status_transitioning_label') %></span>
      <% end %>
      <%= my_module.my_module_status.name %>
    </div>
  </div>

  <div class="panel-footer panel-footer-scinote buttons-container">
    <ul class="nav nav-tabs nav-tabs-less" role="tablist">
      <li role="presentation">
        <a class="btn btn-light task-card-view-users" href="<%= designated_users_my_module_user_my_modules_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_users" role="tab" data-remote="true">
          <span class="sn-icon sn-icon-users" aria-hidden="true"></span>
          <span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.designated_users_count.positive? %>"
                data-linked-id="<%= my_module.id %>">
            <%= my_module.designated_users_count %>
          </span>
        </a>
      </li>
      <li role="presentation">
        <a class="btn btn-light task-card-view-activities" href="<%= activities_my_module_url(id: my_module.id, view_mode: my_module.archived_branch? ? 'archived' : 'active') %>"
           aria-controls="<%= my_module.id %>_activities" role="tab">
          <span class="sn-icon sn-icon-activities" aria-hidden="true"></span>
        </a>
      </li>
      <li role="presentation">
        <a href="#" class="btn btn-light open-comments-sidebar" tabindex=0
           data-object-type="MyModule" data-object-id="<%= my_module.id %>">
          <span class="sn-icon sn-icon-comments" aria-hidden="true"></span>
          <span id="comment-count-<%= my_module.id %>" class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless my_module.task_comments_count.positive? %>">
            <%= my_module.task_comments_count %>
          </span>
        </a>
      </li>
      <li role="presentation" class="task-code">
        ID: <%= my_module.code %>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_info" data-contents="info"></div>
      <div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_users" data-contents="users"></div>
      <div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_activities" data-contents="activities"></div>
      <div role="tabpanel" class="tab-pane" id="<%= my_module.id %>_comments" data-contents="comments"></div>
    </div>
  </div>
</div>