<div class="h-screen min-h-[600px] flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('railsui/fusion.png') %>')">
  <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
    <div>
      <div class="flex justify-center">
        <a href="#" class="flex size-12 justify-center">
          <%= icon "logo", custom_path: "/railsui/logo.svg", class: "w-10 h-auto fill-current text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out dark:hover:text-primary-500", variant: :solid %>
          <span class="sr-only">Fleet Management</span>
        </a>
      </div>

      <div class="mt-6">
        <div class="text-center">
          <h1 class="md:h3 h4 my-3">Sign up for an account</h1>
          <p class="mb-6 text-slate-700 dark:text-slate-200">Already have an account? <a class="btn-link" href="#">Sign in</a></p>
        </div>
      </div>

      <div class="bg-white dark:bg-slate-900/50  dark:border-slate-700/80 shadow-xs rounded-lg p-8 border border-slate-300/60">

        <form action="#">
          <div class="form-group">
            <label class="form-label" for="user_email">Email</label>
            <div class="relative">
              <input autocomplete="email" class="form-input focus:pl-10 peer transition" pattern="[^@ ]+@[^@ ]+.[^@ ]+" title="Invalid email address" type="email" value="" name="user[email]" id="user_email">
              <%= icon "envelope", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label" for="user_password">Password</label>
            <div class="relative">
              <input autocomplete="new-password" class="form-input focus:pl-10 peer transition" type="password" name="user[password]" id="user_password">
              <%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>

            </div>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">(6 characters minimum)</p>
          </div>

          <div class="form-group">
            <label class="form-label" for="user_password_confirmation">Password confirmation</label>
            <div class="relative">
              <input autocomplete="new-password" class="form-input focus:pl-10 peer transition" type="password" name="user[password_confirmation]" id="user_password_confirmation">
              <%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
            </div>
          </div>

          <input type="submit" name="commit" value="Sign up" class="btn btn-primary w-full">
        </form>
      </div>

      <div class="mt-4">
        <div class="text-center mb-1">
          <a class="text-sm text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-500" href="#">Didn't receive confirmation instructions?</a>
        </div>

        <div class="text-center mb-2">
          <a class="text-sm text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-500" href="#">Didn't receive unlock instructions?</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- app/views/users/registrations/new.html.erb-->
<%= render "users/auth_layout" do %>
  <%= form_with model: @user, method: :post do |f| %>
    <div class="form-group">
      <%= f.label :email, class: "form-label" %>
      <div class="relative">
        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input focus:pl-10 peer transition", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address" %>
        <%= icon "envelope", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
      </div>
    </div>

    <div class="form-group">
      <%= f.label :password, class: "form-label" %>
      <div class="relative">
        <%= f.password_field :password, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition" %>
        <%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
      </div>
      <% if @minimum_password_length %>
      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">(<%= @minimum_password_length %> characters minimum)</p>
      <% end %>
    </div>

    <div class="form-group">
      <%= f.label :password_confirmation, class: "form-label" %>
      <div class="relative">
        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition" %>
        <%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
      </div>
    </div>

    <%= f.submit "Sign up", class: "btn btn-primary w-full" %>
  <% end %>
<% end %>

<% content_for :masthead do %>
  <div class="text-center">
    <h1 class="md:h3 h4 my-3">Sign up for an account</h1>
    <p class="mb-6 text-slate-700 dark:text-slate-200">Already have an account? <%= link_to "Sign in", "users/signin", class: "btn-link" %></p>
  </div>
  <%= render "rui/shared/error_messages", resource: @user %>
<% end %>

/ app/views/users/registrations/new.html.erb
= render "users/auth_layout" do
  = form_with model: @user, method: :post do |f|
    .form-group
      = f.label :email, class: "form-label"
      .relative
        = f.email_field :email, autofocus: true, autocomplete: "email", class: "form-input focus:pl-10 peer transition", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address"
        = icon "envelope", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
    .form-group
      = f.label :password, class: "form-label"
      .relative
        = f.password_field :password, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition"
        = icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
      - if @minimum_password_length
        %p.text-xs.text-slate-500.dark:text-slate-400.mt-1
          (#{@minimum_password_length} characters minimum)
    .form-group
      = f.label :password_confirmation, class: "form-label"
      .relative
        = f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition"
        = icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
    = f.submit "Sign up", class: "btn btn-primary w-full"
- content_for :masthead do
  .text-center
    %h1.md:h3.h4.my-3 Sign up for an account
    %p.mb-6.text-slate-700.dark:text-slate-200
      Already have an account? #{link_to "Sign in", "users/signin", class: "btn-link"}
  = render "rui/shared/error_messages", resource: @user