<% title @user.name %>

<%= content_for :page_meta do %>
  <%= render "users/meta" %>
<% end %>

<style>
  .widget header{
    color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
  }
  <% if user_colors(@user)[:bg].downcase.start_with?("#fff") %>
    .user-profile-follow-button {
      border: 1px solid <%= user_colors(@user)[:text] %> !important;
    }
  <% end %>
</style>
<div class="user-profile-header" style="<%= user_colors_style(@user) %>" itemscope itemtype="http://schema.org/Person" itemprop="mainEntityOfPage">
  <meta itemprop="url" content="https://dev.to/<%=@user.username%>">
  <div class="user-profile-header-container">
    <div class="profile-pic-wrapper">
      <img class="profile-pic" src="<%= ProfileImage.new(@user).get(320) %>" itemprop="image" alt="<%= @user.username %> profile" style="border-color:<%=user_colors(@user)[:bg] %>;background:<%=user_colors(@user)[:bg] %>"/>
    </div>
    <div class="profile-details">
      <h1 style="color:<%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %>"><span itemprop="name"><%= @user.name %></span>
        <span class="user-profile-follow-button-wrapper">
          <button id="user-follow-butt" class="cta follow-action-button user-profile-follow-button" style="color:<%= user_colors(@user)[:text] %>;background-color:<%=user_colors(@user)[:bg] %>" data-info='{"id":<%= @user.id%>,"className":"<%= @user.class.name %>"}'>&nbsp;</button>
        </span>
      </h1>
      <p class="profile-description" itemprop="description">
        <%= @user.summary.presence || ["404 bio not found"].sample  %>
      </p>
      <style>
        .profile-details .social .icon-img path{
          fill: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %> !important;
        }
      </style>
      <p class="social">
        <% if @user.twitter_username? %>
          <a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me">
            <%= inline_svg("twitter-logo.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.github_username? %>
          <a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me">
            <%= inline_svg("github-logo.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.mastodon_url? %>
          <a href="<%= @user.mastodon_url %>" target="_blank" rel="noopener">
            <%= inline_svg("mastodon-logo.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.facebook_url? %>
          <a href="<%= @user.facebook_url %>" target="_blank" rel="noopener me">
            <%= inline_svg("facebook-logo.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.linkedin_url? %>
          <a href="<%= @user.linkedin_url %>" target="_blank" rel="noopener me">
            <%= inline_svg("linkedin_icon.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.behance_url? %>
          <a href="<%= @user.behance_url %>" target="_blank" rel="noopener me">
            <%= inline_svg("behance_icon.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.stackoverflow_url? %>
          <a href="<%= @user.stackoverflow_url %>" target="_blank" rel="noopener me">
            <%= inline_svg("stackoverflow-logo.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.dribbble_url? %>
          <a href="<%= @user.dribbble_url %>" target="_blank" rel="noopener me">
            <%= inline_svg("dribbble_icon.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.medium_url? %>
          <a href="<%= @user.medium_url %>" target="_blank" rel="noopener nofollow me">
            <%= inline_svg("medium_icon.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.gitlab_url? %>
          <a href="<%= @user.gitlab_url %>" target="_blank" rel="noopener nofollow me">
            <%= inline_svg("gitlab.svg", class:"icon-img") %>
          </a>
        <% end %>
        <% if @user.website_url? %>
          <a href="<%= @user.website_url %>" target="_blank" rel="noopener nofollow me">
            <%= inline_svg("external-link-logo.svg", class:"icon-img") %>
          </a>
        <% end %>
      </p>
    </div>
  </div>
  <%= render "articles/user_metadata", context: "profile" %>
</div>

<div class="home sub-home" id="index-container"
  data-params="<%= params.to_json(only: [:tag,:username,:q]) %>" data-which="<%=@list_of%>"
  data-algolia-tag="<%= "user_#{@user.id}" %>"
  data-feed="<%= params[:timeframe] || "base-feed"%>"
  data-articles-since="0"
  >
  <%= render "users/sidebar" %>
  <div class="articles-list" id="articles-list">
    <div class="on-page-nav-controls user-nav-controls" id="on-page-nav-controls">
      <button class="on-page-nav-butt on-page-nav-butt-left" id="on-page-nav-butt-left" aria-label="nav-button-left">
        <img src="<%= asset_path 'stack.svg' %>" alt="left-sidebar-nav">
      </button>
      <button class="on-page-nav-butt on-page-nav-butt-right" style="margin-top:-1px;" id="on-page-nav-butt-right" aria-label="nav-button-right">
        <img style="height:28px;width:28px;" src="<%= asset_path 'ribbon.svg' %>" alt="right-sidebar-nav">
      </button>
    </div>
    <div class="substories" id="substories">
      <% if params[:view] == "comments" %>
        <%= render "users/comments_section" %>
      <% elsif (@stories && @stories.any?) || (@comments && @comments.any?) %>
        <%= render "stories/main_stories_feed" %>
      <% end %>
    </div>
    <div class="loading-articles" id="loading-articles">
      loading...
    </div>
  </div>
  <%= render "users/sidebar_additional" %>
</div>

<%= render "stories/narrow_nav_menu" %>
<%= render "stories/stories_list_script" %>
