<div class="step-container" id="stepContainer<%= step.id %>" >
  <div class="step-header">
    <div class="step-element-header no-hover">
      <div class="flex items-center gap-4">
        <a class="step-collapse-link hover:no-underline focus:no-underline"
          href="#stepBody<%= step.id %>"
          data-toggle="collapse"
          data-remote="true">
            <span class="sn-icon sn-icon-right "></span>
        </a>
        <div class="step-complete-container step-element--locked">
          <div class="step-state <%= step.completed ? 'completed' : '' %>"
               tabindex="0"
          ></div>
        </div>
        <div class="step-position">
          <%= step.position + 1 %>.
        </div>
      </div>

      <div class="step-name-container basis-[calc(100%_-_100px)] relative">
        <%= render partial: "shareable_links/my_modules/inline_view", locals: { text: step.name, smart_annotation_enabled: false } %>
        <span class="mt-2 whitespace-nowrap truncate text-xs font-normal w-full absolute -bottom-5"><%= t('protocols.steps.timestamp_iso_html', date: step.created_at.iso8601, user: step.user.full_name) %></span>
      </div>
    </div>
    <div class="elements-actions-container">
      <% if step.results.size > 0 %>
        <div class="dropdown">
          <button class="btn btn-light icon-btn dropdown-toggle"
                  type="button" id="ResultsMenuDropdown<%= step.id %>"
                  title="<%= t("shareable_links.linked_results", count: step.results.size) %>"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <i class="sn-icon sn-icon-results"></i>
            <span class="absolute top-1 right-1 h-4 min-w-4 bg-sn-science-blue text-white flex items-center justify-center rounded-full text-[10px]">
              <%= step.results.size %>
            </span>
          </button>
          <ul id="ResultsMenuDropdown<%= step.id %>" class="dropdown-menu dropdown-menu-right px-4 py-2">
            <% step.results.each do |result| %>
              <li class="dropdown-item">
                <%= link_to result.name, shared_protocol_results_path(@shareable_link.uuid), class: "!py-2.5 !px-3 hover:!bg-sn-super-light-grey !cursor-pointer !block hover:!no-underline !text-sn-blue !truncate" %>
              </li>
            <% end %>
          </ul>
        </div>
      <% end %>
      <a href="#"
         class="shareable-link-open-comments-sidebar btn icon-btn btn-light"
         data-turbolinks="false"
         data-object-type="Step"
         data-object-id="<%= step.id %>"
         data-object-target="#Step<%= step.id %>">
        <i class="sn-icon sn-icon-comments"></i>
        <span class="comments-counter"
              id="comment-count-<%= step.id %>"
        >
          <%= step.comments.count %>
        </span>
      </a>
    </div>
  </div>

  <div class="collapse in" id="stepBody<%= step.id %>">
    <div class="step-elements">
      <% step.step_orderable_elements.sort_by(&:position).each do |element| %>
        <% if element.orderable_type == 'StepText' %>
          <%= render partial: "shareable_links/my_modules/step_elements/text", locals: { element: element.orderable } %>
        <% elsif element.orderable_type == 'Checklist' %>
          <%= render partial: "shareable_links/my_modules/step_elements/checklist", locals: { element: element.orderable } %>
        <% elsif element.orderable_type == 'StepTable'%>
           <%= render partial: "shareable_links/my_modules/step_elements/table", locals: { element: element.orderable.table } %>
        <% elsif element.orderable_type == 'FormResponse' %>
          <%= render partial: "shareable_links/my_modules/step_elements/form_response", locals: { element: element.orderable } %>
        <% end %>
      <% end %>
      <% if step.step_assets.present? %>
        <%= render partial: "shareable_links/my_modules/attachments", locals: { attachments: step.assets } %>
      <% end %>
    </div>
  </div>
  <div class="sci-divider my-6"></div>
</div>
