<% @page_title = @user.name %>
<% me_or_you = Current.user == @user ? "me" : @user.first_name %>

<div class="settings settings--profile">
  <div class="settings__panel panel shadow txt-align-center">
    <div class="flex flex-column gap position-relative">
      <% if Current.user == @user %>
        <%= link_to edit_user_path(@user), class: "user-edit-link btn", data: { controller: "tooltip" } do %>
          <%= icon_tag "pencil" %>
          <span class="for-screen-reader">Edit profile</span>
        <% end %>
      <% end %>

      <div class="avatar txt-xx-large center fill-white btn--circle hide-focus-ring">
        <%= image_tag user_avatar_path(@user), alt: "Profile avatar for #{@user.name}" %>
      </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? %>
            <%= @user.name %> is no longer on this account
          <% elsif !@user.verified? %>
            Unverified
            <div class="txt-small txt-tinted">A sign-in code has been sent to this email address, but the user has not yet logged in to confirm their identity.</div>
          <% else %>
            <%= mail_to @user.identity.email_address %>
          <% end %>
        </div>
      </div>

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

      <% if Current.user == @user %>
        <hr class="separator--horizontal full-width flex-item-grow margin-block-start-double" style="--border-color: var(--color-ink-light);" aria-hidden="true">

        <%= button_to session_path(script_name: nil), method: :delete, class: "btn txt-x-small center", form: { data: { turbo: false, controller: "clear-offline-cache", action: "submit->clear-offline-cache#clearCache" } } do %>
          <span>Sign out of Fizzy on this device</span>
        <% end %>
      <% end %>
    </div>
  </div>

  <% if Current.user == @user %>
    <div class="settings__panel panel shadow hide-on-native">
      <%= render "users/theme" %>
      <%= render "users/transfer", user: @user %>
      <%= render "users/access_tokens" %>
      <%= render "users/data_export" %>
    </div>
  <% end %>
</div>

<% if @user.verified? %>
  <%= turbo_frame_tag "user_events", src: user_events_path(@user) %>
<% end %>
