<div class="bg-primary rounded-primary padding-primary">
  <div class="mb-4">
    <h2 class="text-sm leading-5 font-semibold"><%= t("similar_bookmarks") %></h2>
  </div>
  <% if similar_bookmarks.present? %>
    <div class="my-2">
      <% similar_bookmarks.each do |bookmark| %>
        <div class="py-1 flex items-center space-x-1">
          <span class="flex-shrink-0">
            <% if bookmark.favicon_local.attached? %>
              <%= image_tag(bookmark.favicon_local.service_url, class: "h-4 w-4") %>
            <% else %>
              <%= lavatar_tag(bookmark.letter_char, 16, class: "w-4 h-4") %>
            <% end %>
          </span>
          <div class="block break-all">
            <h2 class="text-sm font-medium leading-5">
              <%= link_to bookmark.title_or_url, bookmark_path(bookmark)  %>
            </h2>
          </div>
        </div>
      <% end %>
    </div>
  <% else %>
    <div class="my-2 text-sm text-gray-500"><%= t("empty_data") %></div>
  <% end %>
</div>
