<!-- app/views/devise/sessions/new.html.erb -->
<% content_for :masthead do %>
  <div class="text-center">
    <h1 class="text-3xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight my-3">Sign in to your account</h1>
    <p class="mb-6 text-slate-700 dark:text-slate-200">Or <%= link_to "sign up", new_registration_path(resource_name), class: "btn-link" %> for an account</p>
  </div>
  <%= render "shared/error_messages", resource: resource %>
<% end %>

<%= render "auth_layout" do %>
  <%= form_for(resource, as: resource_name, url: session_path(resource_name), data: { turbo: false }) 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", classes: "w-5 h-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-indigo-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-indigo-400" %>
      </div>
    </div>

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

    <div class="flex flex-wrap justify-between items-center form-group">
      <% if devise_mapping.rememberable? %>
        <div class="flex items-center">
          <%= f.check_box :remember_me, class: "form-input-checkbox" %>
          <%= f.label :remember_me, class: "form-check-label ml-2" %>
      </div>
      <% end %>
      <% if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
        <%= link_to "Forgot your password?", new_password_path(resource_name), class: "btn-link text-sm" %>
      <% end %>
    </div>

    <%= f.submit "Sign in", class: "btn btn-primary hover:cursor-pointer w-full" %>
  <% end %>
<% end %>

/ app/views/devise/sessions/new.html.erb
- content_for :masthead do
  .text-center
    %h1.text-3xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight.my-3 Sign in to your account
    %p.mb-6.text-slate-700.dark:text-slate-200
      Or #{link_to "sign up", new_registration_path(resource_name), class: "btn-link"} for an account
  = render "shared/error_messages", resource: resource
= render "auth_layout" do
  = form_for(resource, as: resource_name, url: session_path(resource_name), data: { turbo: false }) 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", classes: "w-5 h-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-indigo-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-indigo-400"
    .form-group
      = f.label :password, class: "form-label"
      .relative
        = f.password_field :password, autocomplete: "current-password", class: "form-input focus:pl-10 peer transition"
        = icon "lock-closed", classes: "w-5 h-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-indigo-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-indigo-400"
    .flex.flex-wrap.justify-between.items-center.form-group
      - if devise_mapping.rememberable?
        .flex.items-center
          = f.check_box :remember_me, class: "form-input-checkbox"
          = f.label :remember_me, class: "form-check-label ml-2"
      - if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations'
        = link_to "Forgot your password?", new_password_path(resource_name), class: "btn-link text-sm"
    = f.submit "Sign in", class: "btn btn-primary hover:cursor-pointer w-full"