<!-- app/views/devise/registrations/new.html.erb-->
<% 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", new_session_path(resource_name), class: "btn-link" %></p>
  </div>
  <%= render "rui/shared/error_messages", resource: resource %>
<% end %>

<%= render "devise/auth_layout" do %>
  <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) 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 %>

/ app/views/devise/registrations/new.haml.erb
- 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", new_session_path(resource_name), class: "btn-link"}
  = render "rui/shared/error_messages", resource: resource
= render "devise/auth_layout" do
  = form_for(resource, as: resource_name, url: registration_path(resource_name)) 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"