<% @page_title = @user.name %>

<% content_for :header do %>
  <nav>
    <%= link_to_back %>

    <% if Current.user == @user %>
      <%= link_to edit_user_path(@user), class: "btn flex-item-justify-end" do %>
        <%= icon_tag "pencil" %>
        <span class="for-screen-reader">Edit</span>
      <% end %>
    <% end %>
  </nav>
<% end %>

<div class="panel shadow center txt-align-center margin-block-end-double">
  <div class="flex flex-column gap">
    <div class="avatar txt-xx-large center fill-white">
      <%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}", class: "avatar", size: 128 %>
    </div>

    <div class="flex flex-column gap-half margin-block-end">
      <h1 class="txt-x-large margin-none"><%= @user.name %></h1>
      <div class="txt-medium">
        <% if @user.active? %>
          <%= mail_to @user.email_address %>
        <% else %>
          <%= @user.name %> is no longer on this account
        <% end %>
      </div>
    </div>

    <div class="flex-inline center justify-center flex-wrap gap">
      <%= link_to "Which cards are assigned to #{ Current.user == @user ? "you" : @user.first_name }?", cards_path(assignee_ids: [@user.id], indexed_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
      <%= link_to "Which cards were added by #{ Current.user == @user ? "you" : @user.first_name }?", cards_path(creator_ids: [@user.id], indexed_by: "newest"), class: "btn", data: { turbo_frame: "_top" } %>
    </div>
  </div>
</div>

<% if Current.user == @user %>
  <div class="panel shadow center margin-block-double">
    <%= render "users/transfer", user: @user %>
  </div>

  <div class="panel borderless center margin-block-double">
    <%= button_to session_path, method: :delete, class: "btn center txt-medium" do %>
      <%= icon_tag "logout" %>
      <span>Sign out</span>
    <% end %>
  </div>
<% end %>

<h1 class="font-black txt-large margin-block-double"><%= "What #{ Current.user == @user ? "have you" : "has #{ @user.first_name }" } been up to?" %></h1>

<div class="events margin-block-double" id="activity">
  <%= render "events/day", day_timeline: @day_timeline %>
  <%= event_next_page_link(@day_timeline.next_day) %>
</div>
