<!-- app/views/devise/registrations/edit.html.erb -->
<div class="max-w-4xl mx-auto px-4 my-10">
  <h1 class="text-4xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Account</h1>

  <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
    <div class="bg-blue-50/90 text-blue-700 border-l-4 border-blue-700 py-4 pr-4 pl-6 text-sm dark:bg-blue-50/10 dark:text-blue-50 dark:border-blue-400 mt-6">
      <p class="text-blue-800 dark:text-blue-400 ">Currently waiting on confirmation for: <span class="font-semibold"><%= resource.unconfirmed_email %></span></p>
    </div>
  <% end %>

  <div class="my-6">
    <h2 class="font-normal text-lg text-slate-700 dark:text-slate-200 mb-2">Profile</h2>
    <p class="text-sm text-slate-600 dark:text-slate-400">This information will often be displayed publically.</p>
  </div>

  <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }, data: { turbo: false }) do |f| %>
    <%= render "shared/error_messages", resource: resource %>

    <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-10 gap-4 items-end pb-6">
      <div>
        <%= f.label :name, class: "form-label" %>
        <%= f.email_field :name, class: "form-input" %>
      </div>

      <div>
        <div class="flex items-center">
          <% if f.object.avatar.attached? %>
            <%= image_tag f.object.avatar, class: "w-14 h-14 rounded-full object-cover border-2 border-slate-200 pointer-events-none select-none" %>
          <% else %>
            <div class="w-14 h-14 flex items-center justify-center rounded-full bg-slate-300/50 pointer-events-none select-none border-2 border-slate-200">
              <%= icon "user", classes: "w-6 h-6 text-white" %>
            </div>
          <% end %>

          <div class="flex-1 pl-4">
            <%= f.label :avatar, class: "block" do %>
              <%= f.file_field :avatar, class: "form-file" %>
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <div class="py-10 mt-6 border-t border-slate-200 dark:border-slate-700">
      <h2 class="font-normal text-lg text-slate-700 dark:text-slate-200 mb-2">Personal details</h2>
      <p class="text-sm text-slate-600 dark:text-slate-400">This information will not be displayed publically.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-10 gap-4 items-start form-group">
      <div>
        <%= f.label :email, class: "form-label" %>
        <%= f.email_field :email, autocomplete: "email", class: "form-input" %>
      </div>

      <div>
        <%= f.label :password, class: "form-label" %>
        <%= f.password_field :password, autocomplete: "new-password", class: "form-input" %>
        <p class="text-xs text-slate-700 my-1 dark:text-slate-400">Leave this blank if you don't want to change it</p>
        <% if @minimum_password_length %>
          <p class="text-xs text-slate-700 dark:text-slate-400"><%= @minimum_password_length %> characters minimum</p>
        <% end %>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-10 gap-4 items-start form-group">
      <div>
        <%= f.label :password_confirmation, class: "form-label" %>
        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input" %>
      </div>

      <div>
        <%= f.label :current_password, class: "form-label" %>
        <%= f.password_field :current_password, autocomplete: "current-password", class: "form-input" %>
        <p class="text-xs text-slate-700 my-1 dark:text-slate-400">Your current password is required to update your account.</p>
      </div>
    </div>

    <div class="flex items-center space-x-4 pt-10 border-t mt-10 border-slate-200 dark:border-slate-700">
      <%= f.submit "Update", class: "btn btn-primary" %>
      <%= link_to "Cancel", root_path, class: "btn btn-white", data: { turbo: false } %>
    </div>
  <% end %>

  <div class="flex justify-end">
    <%= button_to "Cancel account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "text-slate-400 hover:text-slate-600 font-semibold text-sm relative -top-8" %>
  </div>
</div>

/ app/views/devise/registrations/edit.html.erb
.max-w-4xl.mx-auto.px-4.my-10
  %h1.text-4xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight Account
  - if devise_mapping.confirmable? && resource.pending_reconfirmation?
    .text-blue-700.border-l-4.border-blue-700.py-4.pr-4.pl-6.text-sm.dark:text-blue-50.dark:border-blue-400.mt-6{class: "bg-blue-50/90 dark:bg-blue-50/10"}
      %p.text-blue-800.dark:text-blue-400
        Currently waiting on confirmation for:
        %span.font-semibold= resource.unconfirmed_email
  .my-6
    %h2.font-normal.text-lg.text-slate-700.dark:text-slate-200.mb-2 Profile
    %p.text-sm.text-slate-600.dark:text-slate-400 This information will often be displayed publically.
  = form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }, data: { turbo: false }) do |f|
    = render "shared/error_messages", resource: resource
    .grid.grid-cols-1.sm:grid-cols-2.sm:gap-10.gap-4.items-end.pb-6
      %div
        = f.label :name, class: "form-label"
        = f.email_field :name, class: "form-input"
      %div
        .flex.items-center
          - if f.object.avatar.attached?
            = image_tag f.object.avatar, class: "w-14 h-14 rounded-full object-cover border-2 border-slate-200 pointer-events-none select-none"
          - else
            .w-14.h-14.flex.items-center.justify-center.rounded-full.pointer-events-none.select-none.border-2.border-slate-200{class: "bg-slate-300/50"}
              = icon "user", classes: "w-6 h-6 text-white"
          .flex-1.pl-4
            = f.label :avatar, class: "block" do
              = f.file_field :avatar, class: "form-file"
    .py-10.mt-6.border-t.border-slate-200.dark:border-slate-700
      %h2.font-normal.text-lg.text-slate-700.dark:text-slate-200.mb-2 Personal details
      %p.text-sm.text-slate-600.dark:text-slate-400 This information will not be displayed publically.
    .grid.grid-cols-1.sm:grid-cols-2.sm:gap-10.gap-4.items-start.form-group
      %div
        = f.label :email, class: "form-label"
        = f.email_field :email, autocomplete: "email", class: "form-input"
      %div
        = f.label :password, class: "form-label"
        = f.password_field :password, autocomplete: "new-password", class: "form-input"
        %p.text-xs.text-slate-700.my-1.dark:text-slate-400 Leave this blank if you don't want to change it
        - if @minimum_password_length
          %p.text-xs.text-slate-700.dark:text-slate-400
            = @minimum_password_length
            characters minimum
    .grid.grid-cols-1.sm:grid-cols-2.sm:gap-10.gap-4.items-start.form-group
      %div
        = f.label :password_confirmation, class: "form-label"
        = f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input"
      %div
        = f.label :current_password, class: "form-label"
        = f.password_field :current_password, autocomplete: "current-password", class: "form-input"
        %p.text-xs.text-slate-700.my-1.dark:text-slate-400 Your current password is required to update your account.
    .flex.items-center.space-x-4.pt-10.border-t.mt-10.border-slate-200.dark:border-slate-700
      = f.submit "Update", class: "btn btn-primary"
      = link_to "Cancel", root_path, class: "btn btn-white", data: { turbo: false }
  .flex.justify-end
    = button_to "Cancel account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "text-slate-400 hover:text-slate-600 font-semibold text-sm relative -top-8"