<% @page_title = "Edit your profile" %>

<% content_for :header do %>
  <div class="header__actions header__actions--start">
    <%= back_link_to "profile", user_path(@user), "keydown.left@document->hotkey#click keydown.esc@document->hotkey#click" %>
  </div>
<% end %>

<div class="panel shadow center" style="--panel-size: 45ch;">
  <div class="flex flex-column gap txt-medium">
    <%= form_with model: @user, method: :patch, class: "flex flex-column gap", data: { controller: "form upload-preview" } do |form| %>
      <div class="align-center center avatar__form gap">
        <span class="btn btn--placeholder txt-small"></span>

        <label class="avatar btn btn--circle input--file txt-xx-large center fill-white">
          <%= image_tag user_avatar_path(@user), aria: { hidden: "true" }, class: "avatar", size: 128, data: { upload_preview_target: "image" } %>
          <%= form.file_field :avatar, id: "file", class: "input", accept: User::Avatar::ALLOWED_AVATAR_CONTENT_TYPES.join(","),
                data: { upload_preview_target: "input", action: "upload-preview#previewImage" } %>
          <span class="for-screen-reader">Profile avatar for <%= @user.name %></span>
        </label>

        <% if @user.avatar.attached? %>
          <%= tag.button type: :submit, form: "avatar-delete-form", class: "btn btn--negative txt-small", data: { turbo_confirm: "Are you sure you want to remove your avatar? This can't be undone." } do %>
            <%= icon_tag "minus" %>
            <span class="for-screen-reader">Delete avatar</span>
          <% end %>
        <% end %>
      </div>

      <div class="flex align-center gap">
        <label class="flex align-center gap input input--actor">
          <%= form.text_field :name, class: "input full-width", autocomplete: "name", placeholder: "Name", autofocus: true, required: true, data: { "1p-ignore": true, action: "keydown.esc@document->form#cancel" } %>
        </label>
      </div>
      <div class="flex align-center gap">
        <div class="flex align-center gap input input--actor">
          <%= form.email_field :email_address, class: "input full-width", autocomplete: "username", placeholder: "Email address", required: true, readonly: true, value: @user.identity.email_address %>
          <%= link_to "Change email", new_user_email_address_path(user_id: Current.user.id), class: "btn btn--plain txt-link txt-small txt-nowrap" %>
        </div>
      </div>

      <% if @user.errors.any? %>
        <div class="margin-block-half txt-negative txt-small" style="text-align: left;">
          <p class="margin-block-none font-weight-bold">Your changes couldn't be saved:</p>
          <ul class="margin-block-none">
            <% @user.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      <% end %>

      <button type="submit" id="log_in" class="btn btn--reversed center" data-form-target="submit">
        <span>Save changes</span>
      </button>

      <%= link_to "Cancel and go back", user_path(@user), data: { form_target: "cancel", turbo_frame: "_top" }, hidden: true %>
    <% end %>

    <%= form_with url: user_avatar_url(@user), method: :delete, id: "avatar-delete-form" %>
  </div>
</div>
