<div id="<%= @id %>" class="col-sm-9 col-md-7 col-lg-5 col-xl-4  mt-1">

  <h3>Change email</h3>

  <%= form_for @changeset, "#", [phx_change: :validate, phx_submit: :save, phx_target: @myself], fn f -> %>


    <div class="form-floating mb-3" phx-feedback-for="<%= input_id(f, :email) %>">
      <%= email_input f, :email,
          value: input_value(f, :email),
          class: input_class(f, :email, "form-control"),
          placeholder: "e.g., babka@73k.us",
          maxlength: User.max_email,
          phx_debounce: "500",
          aria_describedby: error_ids(f, :email)
        %>
      <%= label f, :email do %>
        <%= icon_div @socket, "bi-at", [class: "icon baseline text-muted"] %>
        Email
      <% end %>
      <%= error_tag f, :email %>
    </div>


    <div class="form-floating mb-3" phx-feedback-for="<%= input_id(f, :current_password) %>">
      <%= password_input f, :current_password,
          value: input_value(f, :current_password),
          class: "form-control",
          placeholder: "Current Password",
          aria_describedby: error_ids(f, :current_password)
        %>
      <%= label f, :current_password do %>
        <%= icon_div @socket, "bi-lock", [class: "icon baseline text-muted"] %>
        Current password
      <% end %>
      <%= error_tag f, :current_password %>
    </div>


    <div class="mb-3">
      <%= submit "Change email",
          class: "btn btn-primary",
          disabled: !@changeset.valid? || input_value(f, :current_password) == "",
          aria_disabled: (!@changeset.valid? || input_value(f, :current_password) == "") && "true" || false,
          phx_disable_with: "Saving..."
        %>
    </div>

  <% end %>

</div>