<div class="bg-light p-4">
  <div class="bg-white m-sm-auto w-100 border rounded p-4" style="max-width: 400px">
    <%= render Railsboot::HeadingComponent.new(size: "h2").with_content("Welcome") %>

    <p class="fw-light">Log in to your account</p>

    <%= render Railsboot::Button::LinkComponent.new(variant: "secondary", outline: true, class: "mt-5 d-grid d-flex align-items-center justify-content-center") do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-google" viewBox="0 0 16 16">
        <path d="M15.545 6.558a9.4 9.4 0 0 1 .139 1.626c0 2.434-.87 4.492-2.384 5.885h.002C11.978 15.292 10.158 16 8 16A8 8 0 1 1 8 0a7.7 7.7 0 0 1 5.352 2.082l-2.284 2.284A4.35 4.35 0 0 0 8 3.166c-2.087 0-3.86 1.408-4.492 3.304a4.8 4.8 0 0 0 0 3.063h.003c.635 1.893 2.405 3.301 4.492 3.301 1.078 0 2.004-.276 2.722-.764h-.003a3.7 3.7 0 0 0 1.599-2.431H8v-3.08z" />
      </svg>
      <span class="ps-2">Login with Google</span>
    <% end %>

    <%= render Railsboot::DividerComponent.new(color: "black-50", class: "mt-5 mb-5") do %>
      <span class="position-absolute top-50 start-50 translate-middle text-black-50 bg-body px-2">OR</span>
    <% end %>

    <%= form_with(url: "#") do |form| %>
      <%= render Railsboot::FormFieldComponent.new(form: form) do |field| %>
        <% field.with_label(for: :email, class: "fw-semibold") { "Email" } %>
        <% field.with_email_field(name: :email, required: true) %>
      <% end %>

      <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-4") do |field| %>
        <% field.with_label(for: :password_challenge, class: "fw-semibold") { "Password" } %>
        <% field.with_password_field(name: :password_challenge, required: true, autocomplete: "current-password") %>
        <%= link_to tag.small("Forgot Password"), nil, class: "mt-1 d-block" %>
      <% end %>

      <%= render Railsboot::FormFieldComponent.new(form: form, class: "mt-4 d-grid") do |field| %>
        <%= render Railsboot::Button::InputComponent.new(form: form, text: "Login") %>
      <% end %>

      <p class="mt-4 fw-light">
        Already have an account? <%= link_to "Sign up", "#" %>
      </p>
    <% end %>
  </div>
</div>