<div class="row">

  <% if user_signed_in? && current_user.id == @user.id %>
    <div class="col s12">
      <%= link_to edit_user_registration_path do %>
        <div class="hoverable card">
          <div class="card-action white-text <%= User.color%>">
            Edit your profile
            <i class="material-icons right"><%= User.icon %></i>
          </div>
        </div>
      <% end %>
    </div>
  <% end %>

  <div class="col s12 m4 l3">
    <div class="hoverable card-panel">
      <div class="grey-text uppercase">
        Joined Notebook.ai
      </div>
      <div>
        <%= time_ago_in_words @user.created_at %> ago
      </div>
      <br />

      <div class="grey-text uppercase">
        Following
      </div>
      <div>
        <%= link_to following_user_path(@user) do %>
          <%= pluralize @user.followed_users.count, 'worldbuilder' %>
        <% end %>
      </div>
      <br />

      <div class="grey-text uppercase">
        Followed by
      </div>
      <div>
        <%= link_to followers_user_path(@user) do %>
          <%= pluralize @user.followed_by_users.count, 'worldbuilder' %>
        <% end %>
      </div>
    </div>
  </div>

  <% if @user.username.present? || @user.other_names.present? %>
    <div class="col s12 m4 l3">
      <div class="hoverable card-panel">
        <% if @user.username.present? %>
          <div class="grey-text uppercase">
            Username
          </div>
          <div class="force-word-wrap">
            <%= link_to "@#{@user.username}", profile_by_username_path(username: @user.username) %>
          </div>
          <br />
        <% end %>

        <% if @user.other_names.present? %>
          <div class="grey-text uppercase">
            Also known as
          </div>
          <div class="force-word-wrap">
            <%= @user.other_names %>
          </div>
          <br />
        <% end %>
      </div>
    </div>
  <% end %>

  <% if @user.website.present? %>
    <div class="col s12 m4 l3">
      <div class="hoverable card-panel">
        <div class="grey-text uppercase">
          Website
        </div>
        <div class="force-word-wrap">
          <%= link_to @user.website, @user.website, target: '_new', data: { confirm: "You are about to visit an external website not owned by Notebook.ai. Please only continue if you trust this user." }, ref: 'nofollow' %>
        </div>
        <br />
      </div>
    </div>
  <% end %>

  <% if @user.favorite_page_type? && @favorite_content.count > 0 %>
    <div class="col s12 m4 l3">
      <%= link_to send("#{@user.favorite_page_type.downcase.pluralize}_user_path", {id: @user.id}), class: 'black-text' do %>
        <div class="card-panel hoverable <%= @accent_color %> lighten-5">
          <div class="grey-text uppercase">
            Favorite page type
          </div>
          <i class="material-icons left <%= @accent_color %>-text"><%= @accent_icon %></i>
          Check out my 
          <%= pluralize @favorite_content.count, @user.favorite_page_type.downcase %>
        </div>
      <% end %>
    </div>
  <% end %>

  <% if user_signed_in? && @user.blocked_by?(current_user) %>
    <div class="clearfix"></div>
    <p class="card-panel red center lighten-5 black-text">
      You've blocked this user.
    </p>
  <% else %>
    <% if @user.bio.present? %>
      <div class="col s12">
        <div class="hoverable card-panel">
          <div class="grey-text uppercase">
            Bio
          </div>
          <div class="force-word-wrap">
            <%= simple_format truncate(@user.bio, length: 500) %>
          </div>
        </div>
      </div>
    <% end %>

    <% %w(interests favorite_genre favorite_author favorite_book favorite_quote inspirations).each do |field| %>
      <% next unless @user.send(field).present? %>
      <div class="col s12 m12 l6">

        <div class="hoverable card-panel">
          <div class="grey-text uppercase">
            <%= field.titleize %>
          </div>
          <div class="force-word-wrap">
            <%= simple_format @user.send(field) %>
          </div>
        </div>
      </div>
    <% end %>
  <% end %>
</div>