<%= pb_content_tag do %>
  <%= pb_rails(
    "avatar",
    props: object.users[0].merge({
      classname: "pb_multiple_users_stacked_item first_item" +
                 (object.double_bubble ? " double_bubble" : "") +
                 (object.triple_bubble ? " triple_bubble" : "") +
                 (object.quadruple_bubble ? " quadruple_bubble" : ""),
      dark: object.dark,
      size: 'xs'          
    })
  ) %>

  <% unless object.only_one %>
    <% if object.more_than_two && !object.bubble %>
      <%= pb_rails("badge", props: {
        dark: object.dark,
        text: "+#{object.users.count - object.display_count}",
        variant: "primary",
        rounded: true,
        classname: "pb_multiple_users_stacked_item second_item"
      }) %>
    <% elsif object.bubble %>
      <% object.users.slice(1, 3).each_with_index do |item, idx| %>
        <%= pb_rails(
          "avatar",
          props: item.merge({
            classname: object.bubble_classname(idx),
            dark: object.dark
          })
        ) %>
      <% end %>
    <% else %>
      <%= pb_rails(
        "avatar",
        props: object.users[1].merge({
          classname: "pb_multiple_users_stacked_item second_item",
          dark: object.dark
        })
      ) %>
    <% end %>
  <% end %>
<% end %>