<div class="row justify-content-center">
  <div class="col-11 col-sm-10 col-md-8 col-lg-7 col-xl-6 col-xxl-5">

  <h2>
    <%= icon_div @conn, "mdi-head-question-outline", [class: "icon baseline"] %>
    Forgot your password?
  </h2>
  <p class="lead">We'll send you an email with instructions to reset your password.</p>

  <%= form_for :user, Routes.user_reset_password_path(@conn, :create), [class: "needs-validation", novalidate: true], fn f -> %>

    <%= label f, :email, class: "form-label" %>
    <div class="inner-addon left-addon mb-3">
      <%= icon_div @conn, "bi-at", [class: "icon is-left text-muted fs-5"] %>
      <%= email_input f, :email,
          placeholder: "e.g., babka@73k.us",
          class: "form-control",
          maxlength: User.max_email,
          required: true,
          autofocus: true
        %>
      <span class="invalid-feedback">must be a valid email address</span>
    </div>

    <div class="mb-3">
      <%= submit "Send instructions to reset password", class: "btn btn-primary" %>
    </div>
  <% end %>

  <p>
    <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
    <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
  </p>

  </div>
</div>