publiclab/plots2

<%= stylesheet_link_tag "show_follow" %>

<div class="container">
  <h3><%= @user.username %></h3>
  <ul class="nav nav-tabs border-0">
    <li class="nav-item">
      <%= link_to followers_path(@user.username),class: "nav-link #{@title=='Followers' ? 'active' : ''}" do %>
        Followers  
        <span class="badge badge-secondary">
          <%= @user.followers.where(status: 1).length.to_s %>
        </span>
      <% end %>
    </li>
    <li class="nav-item">
      <%= link_to following_path(@user.username), class: "nav-link #{@title=='Following' ? 'active' : ''}" do  %>
        Following
        <span class="badge badge-secondary">
          <%= @user.following_users.where(status: 1).length.to_s %>
        </span>
      <% end %>
      </li>
  </ul>
  <% if @users.length > 0 %>

  <div class="profile-container border-top p-2">
    <div class="row row-space-20">
      <div class="col-md-8">
        <div class="tab-content p-0">
          <div class="tab-pane fade active show" id="profile-follows">
            <ul class="follow-list clearfix">
              <% @users.each do |user| %>
                <li>
                  <%= link_to user_path(user.username) do %>
                    <div class="follow-img" data-toggle="popover-hover" 
                        title="<%= user.note_count %> research notes" 
                        data-img="<%= user.profile_image %>" 
                        data-content='<div class="card">
                                        <div class="media m-2">
                                          <img src="<%= user.profile_image %>" height=80px width=80px class="mr-3" alt="">
                                          <div class="media-body">
                                            <h5 class="media-heading"><%= user.username %></h5>
                                            <p><%= user.bio %></p>
                                          </div>
                                        </div>
                                        <% if user.note_count > 0 %>
                                          <div class="card-footer text-muted text-left">
                                          <i class="fas fa-clock"></i>&nbsp;last posted <%= distance_of_time_in_words(Time.now.to_i - user.notes.order("created DESC").first.created.to_i) %> ago
                                          </div>
                                        <% end %>
                                      </div>'>
                      <img src="<%= user.profile_image %>" alt="" />
                    </div>
                    <div class="follow-info">
                      <h4> <%= user.username %></h4>
                      <p><small><%= user.followers.where(status: 1).length %> followers, <%= user.following_users.where(status: 1).length %> following</small></p>
                    </div>
                  <% end %>
                </li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
    </div>
    </br>
    <% if @pagy %> 
      <% if @pagy.pages > 1 %>
        <%= raw pagy_bootstrap_nav @pagy %> 
      <% end %>      
  </div>
  <% else %> 
    <%= will_paginate @users, renderer: WillPaginate::ActionView::BootstrapLinkRenderer %>
  <% end %>
  <% else %>
    <p class="pt-3 border-top">
      <%= @user.username %><%= @title === "Followers" ? " has no followers yet" : " is not following anyone yet" %>
    </p>
  <% end %>
</div>

<script type="text/javascript">
  $('[data-toggle="popover-hover"]').popover({
    html: true,
    trigger: 'hover',
  });
</script>