<div class="mx-auto mt-8 max-w-md rounded-lg bg-white p-6 shadow-md">
  <h2 class="mb-6 text-2xl font-bold text-slate-900">Edit Profile</h2>

  <%= form_for(
        resource,
        as: resource_name,
        url: registration_path(resource_name),
        html: {
          method: :put,
          class: "space-y-4",
        },
      ) do |f| %>
    <%= render "devise/shared/error_messages", resource: resource %>

    <div class="field">
      <%= f.label :email, class: "block text-sm font-medium text-slate-700" %>
      <%= f.email_field :email,
                        autofocus: true,
                        autocomplete: "email",
                        class:
                          "mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500" %>
    </div>

    <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
      <div class="text-sm text-slate-500">
        Currently waiting confirmation for: <%= resource.unconfirmed_email %>
      </div>
    <% end %>

    <div class="field">
      <%= f.label :password, class: "block text-sm font-medium text-slate-700" %>
      <div class="mb-1 text-xs text-slate-500">
        (leave blank if you don't want to change it)
      </div>
      <%= f.password_field :password,
                           autocomplete: "new-password",
                           class:
                             "mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500" %>
      <% if @minimum_password_length %>
        <div class="mt-1 text-xs text-slate-500">
          <%= @minimum_password_length %> characters minimum
        </div>
      <% end %>
    </div>

    <div class="field">
      <%= f.label :password_confirmation,
                  class: "block text-sm font-medium text-slate-700" %>
      <%= f.password_field :password_confirmation,
                           autocomplete: "new-password",
                           class:
                             "mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500" %>
    </div>

    <div class="field">
      <%= f.label :current_password, class: "block text-sm font-medium text-slate-700" %>
      <div class="mb-1 text-xs text-slate-500">
        (we need your current password to confirm your changes)
      </div>
      <%= f.password_field :current_password,
                           autocomplete: "current-password",
                           class:
                             "mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-slate-500 focus:ring-slate-500" %>
    </div>

    <div class="actions">
      <%= f.submit "Update",
                   class:
                     "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500" %>
    </div>
  <% end %>

  <div class="mt-8 border-t border-slate-200 pt-6">
    <h3 class="mb-4 text-lg font-medium text-slate-900">Cancel my account</h3>

    <div class="mb-4 text-sm text-slate-500">Unhappy?</div>
    <%= button_to "Cancel my account",
                  registration_path(resource_name),
                  data: {
                    confirm: "Are you sure?",
                    turbo_confirm: "Are you sure?",
                  },
                  method: :delete,
                  class:
                    "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" %>
  </div>

  <div class="mt-6 text-center text-sm">
    <%= link_to "Back", :back, class: "text-slate-600 hover:text-slate-900" %>
  </div>
</div>
