<% title @user.name %>

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

<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @user_json_ld.to_json.html_safe %>
  </script>
<% end %>
<% cache "main-user-profile-header-area-#{@user.id}-#{@user.profile_updated_at}-#{user_signed_in?}", expires_in: 10.days do %>
  <style>
    .widget header {
      color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
    }
    .night-theme .widget header {
      color: #cedae2;
    }
    .user-profile-header .user-profile-header-container .profile-details h1{
      color: <%= HexComparer.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.78) %> !important;
    }
    .night-theme .user-profile-header .user-profile-header-container .profile-details h1{
      color: white !important;
    }
    <% 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) %>">
    <div class="user-profile-header-container">
      <div class="profile-pic-wrapper">
        <img class="profile-pic" src="<%= ProfileImage.new(@user).get(width: 320) %>" alt="<%= @user.username %> profile" style="border-color:<%= user_colors(@user)[:bg] %>;background:<%= user_colors(@user)[:bg] %>" />
      </div>
      <div class="profile-details">
        <h1>
          <span><%= @user.name %><%= render "shared/pro_checkmark", style: nil, width: nil %></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>
          <% if user_signed_in? %>
            <span class="user-profile-chat-button-wrapper">
              <a href="/connect/@<%= @user.username %>" id="user-connect-redirect" style="display:none">
                <button class="chat-action-button user-profile-chat-button" id="modal-opener" style="color:<%= user_colors(@user)[:text] %>;background-color:<%= user_colors(@user)[:bg] %>; display:none; ">CHAT</button>
              </a>
            </span>
          <% end %>
        </h1>
        <p class="profile-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;
          }
          .night-theme .profile-details .social .icon-img path {
            fill: white;
          }
        </style>
        <p class="social">
          <% if @user.twitter_username? %>
            <a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("twitter-logo.svg", class: "icon-img", aria: true, title: "Twitter logo") %>
            </a>
          <% end %>
          <% if @user.github_username? %>
            <a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("github-logo.svg", class: "icon-img", aria: true, title: "GitHub logo") %>
            </a>
          <% end %>
          <% if @user.mastodon_url? %>
            <a href="<%= @user.mastodon_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("mastodon-logo.svg", class: "icon-img", aria: true, title: "Mastodon logo") %>
            </a>
          <% end %>
          <% if @user.facebook_url? %>
            <a href="<%= @user.facebook_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("facebook-logo.svg", class: "icon-img", aria: true, title: "Facebook logo") %>
            </a>
          <% end %>
          <% if @user.youtube_url? %>
            <a href="<%= @user.youtube_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("youtube-logo.svg", class: "icon-img", aria: true, title: "Youtube logo") %>
            </a>
          <% end %>
          <% if @user.linkedin_url? %>
            <a href="<%= @user.linkedin_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("linkedin_icon.svg", class: "icon-img", aria: true, title: "LinkedIn logo") %>
            </a>
          <% end %>
          <% if @user.behance_url? %>
            <a href="<%= @user.behance_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("behance_icon.svg", class: "icon-img", aria: true, title: "Behance logo") %>
            </a>
          <% end %>
          <% if @user.stackoverflow_url? %>
            <a href="<%= @user.stackoverflow_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("stackoverflow-logo.svg", class: "icon-img", aria: true, title: "StackOverflow logo") %>
            </a>
          <% end %>
          <% if @user.dribbble_url? %>
            <a href="<%= @user.dribbble_url %>" target="_blank" rel="noopener me">
              <%= inline_svg_tag("dribbble_icon.svg", class: "icon-img", aria: true, title: "Dribbble logo") %>
            </a>
          <% end %>
          <% if @user.medium_url? %>
            <a href="<%= @user.medium_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("medium_icon.svg", class: "icon-img", aria: true, title: "Medium logo") %>
            </a>
          <% end %>
          <% if @user.gitlab_url? %>
            <a href="<%= @user.gitlab_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("gitlab.svg", class: "icon-img", aria: true, title: "GitLab logo") %>
            </a>
          <% end %>
          <% if @user.instagram_url? %>
            <a href="<%= @user.instagram_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("instagram-logo.svg", class: "icon-img", aria: true, title: "Instagram logo") %>
            </a>
          <% end %>
          <% if @user.twitch_username? %>
            <%= link_to twitch_live_stream_path(username: @user.username) do %>
              <%= inline_svg_tag("twitch-logo.svg", class: "icon-img", id: "icon-twitch", aria: true, title: "Twitch logo") %>
            <% end %>
          <% elsif @user.twitch_url? %>
            <a href="<%= @user.twitch_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("twitch-logo.svg", class: "icon-img", aria: true, title: "Twitch logo") %>
            </a>
          <% end %>
          <% if @user.website_url? %>
            <a href="<%= @user.website_url %>" target="_blank" rel="noopener nofollow me">
              <%= inline_svg_tag("external-link-logo.svg", class: "icon-img", aria: true, title: "external link icon") %>
            </a>
          <% end %>
        </p>
      </div>
    </div>
    <div class="modal" style="display: none">
      <div class="overlay"></div>
      <div class="modal-content " id="new-message-modal">
        <button title="Close" class="close-modal">X</button>
        <% if @user.inbox_guidelines.present? %>
          <p><b>@<%= @user.username %>'s guidelines:</b></p>
          <p><%= @user.inbox_guidelines %></p>
        <% end %>
        <form id="new-message-form" class="message-form" data-info='{"id":<%= @user.id %>,"className":"<%= @user.class.name %>","username":"<%= @user.username %>", "showChat":"<%= @user.inbox_type %>"}'>
          <textarea id="new-message" rows="4" cols="70" placeholder="Enter your message here..."></textarea>
          <button type="submit" value="Submit" class="submit-message cta">SEND</button>
        </form>
        <p>
          <em>All private interactions <b>must</b> abide by the <a href="/code-of-conduct">code of conduct</a></em>
        </p>
      </div>
    </div>
    <%= render "articles/user_metadata", context: "profile" %>
    <div class="profile-dropdown" data-username="<%= @user.username %>">
      <button id="user-profile-dropdown">
        <%= image_tag("three-dots.svg", class: "dropdown-icon", alt: "Toggle dropdown menu") %>
      </button>
      <div id="user-profile-dropdownmenu" class="profile-dropdownmenu">
        <button id="user-profile-dropdownmenu-block-button" data-profile-user-id="<%= @user.id %>" class="block-button" type="button">Block @<%= @user.username %></button>
        <% if user_signed_in? %>
          <%= javascript_packs_with_chunks_tag "profileDropdown", defer: true %>
        <% end %>
        <a href="/report-abuse?url=<%= user_url(@user) %>">Report Abuse</a>
      </div>
    </div>
  </div>
<% end %>

<% if @user.currently_streaming_on_twitch? %>
  <style>
    #icon-twitch path {
      fill: green !important;
      stroke: green !important;
    }
  </style>
<% end %>

<div class="home sub-home" id="index-container"
     data-params="<%= params.merge(user_id: @user.id, class_name: "Article", sort_by: "published_at", sort_direction: "desc").to_json(only: %i[tag user_id q class_name sort_by sort_direction]) %>" data-which="<%= @list_of %>"
     data-tag=""
     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.any? || @comments.any? || @pinned_stories.any? %>
        <%= render "users/main_feed" %>
      <% end %>
    </div>
    <div class="loading-articles" id="loading-articles">
      loading...
    </div>
  </div>
  <% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
    <%= render "users/sidebar_additional" %>
  <% end %>
</div>

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