<div class="sticky-header-element bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky flex items-center flex-wrap z-[106]">
  <div class="flex items-center gap-4 mr-auto w-full">
    <a class="p-3 border-b-4 border-transparent hover:no-underline uppercase text-bold capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-black" %>"
        href="<%= shared_protocol_url(@shareable_link.uuid) %>"
        title="<%= t("nav2.modules.steps") %>"
    >
      <%= t("nav2.modules.steps") %>
    </a>
    <a class="p-3 border-b-4 border-transparent hover:no-underline uppercase text-bold capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-black" %>"
        href="<%= shared_protocol_results_path(@shareable_link.uuid) %>"
        title="<%= t("nav2.modules.results") %>"
    >
      <%= t("nav2.modules.results") %>
      <% @active_results_size = @my_module.results.where(archived:false).size %>
      <% if @active_results_size.positive? %>
        <sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
      <% end %>
    </a>
    <div class="flex items-center gap-3 ml-auto">
      <%= render partial: 'shareable_links/my_modules/task_flow_button', locals: { my_module: @my_module } if @my_module.my_module_status_flow %>
    </div>
  </div>

</div>
