.flex.justify-center
  .w-full.max-w-xs.md:max-w-md
    %h1.font-hairline.mb-6.text-center.text-2xl
      Change password
    = form_for(resource, as: resource_name,
               html: { class: "bg-white mb-4 px-8 pt-6 pb-8 rounded shadow-md",
                       method: :put }   ,
               url: registration_path(resource_name) ) do |f|
      = render "devise/shared/error_messages", resource: resource
      - if devise_mapping.confirmable? && resource.pending_reconfirmation?
        %div
          Currently waiting confirmation for: #{resource.unconfirmed_email}
      .mb-4
        = f.label :new_password, class: "block font-bold mb-2 text-gray-700 text-sm"
        = f.password_field :password, autocomplete: "new-password", class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
      .mb-4
        = f.label :password_confirmation, class: "block font-bold mb-2 text-gray-700 text-sm"
        = f.password_field :password_confirmation,                                                                                                 |
          autocomplete: "new-password",                                                                                                            |
          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" |
      .mb-4
        = f.label :current_password, class: "block font-bold mb-2 text-gray-700 text-sm"
        = f.password_field :current_password,                                                                                                      |
          autocomplete: "current-password",                                                                                                        |
          class: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" |
      .actions
        = f.submit "Update", class: "button bg-cyan-700 hover:bg-cyan-500 font-bold text-white focus:outline-none py-2 px-4 rounded focus:shadow-outline w-full"
    .flex.justify-between
      %p
        %span= button_to "Delete my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete , class: button_classes
      %button{class: button_classes}
        = link_to "Back", :back