<div class="result-container bg-white p-4 mb-4 rounded">
  <div class="result-header flex justify-between">
    <div class="result-head-left flex items-start flex-grow gap-4">
      <a class="result-collapse-link hover:no-underline focus:no-underline text-sn-black" href="#result-panel-<%= result.id %>" data-toggle="collapse">
        <span class="sn-icon sn-icon-right"></span>
      </a>
      <div class="w-full relative flex flex-grow font-bold text-base">
        <strong><%= result.name %></strong>
        <span class="mt-2 whitespace-nowrap truncate text-xs font-normal absolute bottom-[-1rem] w-full"><%= t('my_modules.results.published_on_iso_html', timestamp: result.created_at.iso8601, user: h(result.user.full_name)) %></span>
      </div>
      <div class="elements-actions-container">
        <% if result.steps.size > 0 %>
          <div class="dropdown">
            <button class="btn btn-light icon-btn dropdown-toggle"
                    type="button" id="StepsMenuDropdown<%= result.id %>"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
              <i class="sn-icon sn-icon-steps"></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]">
                <%= result.steps.size %>
              </span>
            </button>
            <ul id="StepsMenuDropdown<%= result.id %>" class="dropdown-menu dropdown-menu-right px-4 py-2">
              <% result.steps.each do |step| %>
                <li class="dropdown-item">
                  <%= link_to step.label, shared_protocol_url(@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="Result"
          data-object-id="<%= result.id %>"
          data-object-target="#Result<%= result.id %>">
          <i class="sn-icon sn-icon-comments"></i>
          <span class="comments-counter"
                id="comment-count-<%= result.id %>"
          >
            <%= result.comments.count %>
          </span>
        </a>
      </div>
    </div>
  </div>
  <div class="panel-collapse collapse in pl-10" id="result-panel-<%= result.id %>" role="tabpanel">
    <% result.result_orderable_elements.sort_by(&:position).each do |element| %>
      <% if element.orderable_type == 'ResultText' %>
        <%= render partial: "shareable_links/my_modules/step_elements/text", locals: { element: element.orderable } %>
      <% elsif element.orderable_type == 'ResultTable'%>
        <%= render partial: "shareable_links/my_modules/step_elements/table", locals: { element: element.orderable.table } %>
      <% end %>
    <% end %>
    <% if result.result_assets.present? %>
      <%= render partial: "shareable_links/my_modules/attachments", locals: { attachments: result.assets } %>
    <% end %>
  </div>
</div>
