.ui.middle.aligned.center.aligned.grid
  .column
    <%- if options[:metatags] %>
    h2.ui.center.aligned.dividing.header.teal
      i.lock.icon
      = title("Edit #{resource_name.to_s.humanize}")
    <%- else %>
    h2.ui.center.aligned.dividing.header.teal
      i.lock.icon
      | Edit #{resource_name.to_s.humanize}
    <% end %>
    div class=("ui form large #{"error" if resource.errors.any?}")
      = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f|
        = f.error_notification
        .field
          = f.input :email, required: true, autofocus: true
          - if devise_mapping.confirmable? && resource.pending_reconfirmation?
            p
              | Currently waiting confirmation for: #{resource.unconfirmed_email}
          = f.input :password, hint: "Leave it blank if you don't want to change it", required: false, input_html: { autocomplete: 'new-password' }
          = f.input :password_confirmation, required: false, input_html: { autocomplete: 'new-password' }
          = f.input :current_password, hint: 'We need your current password to confirm your changes', required: true, input_html: { autocomplete: 'current-password' }
        .actions
          = f.button :submit
      .ui.horizontal.divider or
      h4.ui.light.grey.header Cancel my account
      p
        | Unhappy? #{button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete, class: "ui submit button red tiny "}
      .ui.horizontal.list
        .item= link_to "Back", :back
css:
  body > .grid { height: 90%; }
  .column { max-width: 450px; }
  @media (min-width: 768px){
    .column { max-width: 600px; }
  }