<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="<%=  index_old_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">
    <% if can_manage_module?(my_module) %>
      <a class="edit-tags-link pull-right" data-remote="true" href="<%= my_module_tags_edit_url(my_module, format: :json) %>">
        <%= render partial: "canvas/tags.html.erb", locals: { my_module: my_module } %>
      </a>
    <% else %>
      <span class="edit-tags-link pull-right">
        <%= render partial: "canvas/tags.html.erb", locals: { my_module: my_module } %>
      </span>
    <% end %>
  </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.html.erb", locals: { my_module: my_module } %>
    </a>
  </div>

  <% unless my_module.experiment.archived_branch? %>
    <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>
  <% end %>

  <div class="panel-heading">
    <h3 class="panel-title">
      <%= link_to_if can_read_experiment?(my_module.experiment), my_module.name, protocols_my_module_path(my_module) %>
    </h3>
  </div>

  <div class="panel-body">
    <div class="overdue-date" data-view-mode="active">
      <% if !my_module.completed? && can_manage_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.html.erb", locals: { my_module: my_module, format: :full_date } %>
        <% end %>
      <% else %>
        <%= render partial: "my_modules/card_due_date_label.html.erb", 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">
      <% if can_read_experiment?(my_module.experiment) %>
        <li role="presentation">
          <a class="btn btn-link task-card-view-users" href="<%= index_old_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="fas fa-users" aria-hidden="true"></span>
            <span class="badge badge-indicator users-badge-indicator <%= 'hidden' unless my_module.users.count.positive? %>"
                  data-linked-id="<%= my_module.id %>">
              <%= my_module.users.count %>
            </span>
          </a>
        </li>
        <li role="presentation">
          <a class="btn btn-link task-card-view-activities" href="<%= activities_my_module_url(id: my_module.id) %>" aria-controls="<%= my_module.id %>_activities" role="tab">
            <span class="fas fa-list" aria-hidden="true"></span>
          </a>
        </li>
        <li role="presentation">
          <a class="btn btn-link task-card-view-comments" href="<%= my_module_my_module_comments_url(my_module_id: my_module.id, format: :json) %>" aria-controls="<%= my_module.id %>_comments" role="tab" data-remote="true">
            <span class="fas fa-comment" aria-hidden="true"></span>
            <span id="comment-counter-<%= my_module.id %>" class="badge badge-indicator comments-badge-indicator <%= 'hidden' unless my_module.task_comments.count.positive? %>"
                  data-linked-id="<%= my_module.id %>">
              <%= my_module.task_comments.count %>
            </span>
          </a>
        </li>
      <% end %>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <% if can_read_experiment?(my_module.experiment) %>
        <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>
      <% end %>
    </div>
  </div>
</div>
