<div class="mx-auto mt-4 flex w-full max-w-2xl flex-col gap-4 pb-4">
  <section class="rounded-md border border-slate-300 bg-slate-50 p-4">
    <div class="flex items-center justify-between gap-4">
      <div class="flex min-w-0 items-center gap-2">
        <h1 class="text-lg font-medium">
          <% case @index_type %>
          <% when :followed_by %>
            <%= pluralize(@users.total_count, "user") %> following
            <%= link_to @user.name,
                        domain_user_following_path(@user),
                        class: "text-blue-600 hover:underline" %>
          <% when :following %>
            <%= pluralize(@users.total_count, "user") %> followed by
            <%= link_to @user.name,
                        domain_user_following_path(@user),
                        class: "text-blue-600 hover:underline" %>
          <% when :users_faving_post %>
            <%= pluralize(@users.total_count, "user") %> favorited
            <%= link_to @post.title,
                        domain_post_path(@post),
                        class: "text-blue-600 hover:underline" %>
          <% end %>
        </h1>
      </div>
    </div>
  </section>
  <%= render "shared/pagination_controls", collection: @users %>
  <% if @users.any? %>
    <section
      class="overflow-hidden rounded-md border border-slate-300 bg-slate-50"
    >
      <div class="divide-y divide-slate-200">
        <% @users.each do |user| %>
          <%= link_to domain_user_path(user),
                      class: "flex items-center gap-4 p-4 hover:bg-slate-100" do %>
            <% if user.avatar&.log_entry.present? %>
              <%= image_tag domain_user_avatar_img_src_path(user.avatar, thumb: "64-avatar"),
                            class: "h-12 w-12 rounded-md border object-cover",
                            alt: user.name %>
            <% else %>
              <div
                class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200"
              >
                <i class="bi bi-person text-slate-400"></i>
              </div>
            <% end %>
            <div class="min-w-0">
              <div class="font-medium text-slate-900"><%= user.name %></div>
              <div class="text-sm text-slate-500">@<%= user.url_name %></div>
            </div>
          <% end %>
        <% end %>
      </div>
    </section>
  <% else %>
    <section
      class="rounded-md border border-slate-300 bg-slate-50 p-8 text-center"
    >
      <i class="bi bi-heart mb-3 block text-4xl text-slate-400"></i>
      <p class="text-slate-600">No users found.</p>
    </section>
  <% end %>
</div>
