<div class="mx-auto md:w-1/2 w-full">
<h1 class="font-bold text-4xl text-gray-700">Create account</h1>
<p class="my-2">Please sign up for your Alphabet Learning account here.</p>
<% if alert = flash[:alert] %>
<p class="py-2 px-3 bg-red-50 mb-5 text-red-500 font-medium rounded-lg inline-block" id="alert"><%= alert %></p>
<% end %>
<% if notice = flash[:notice] %>
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
<% end %>
<%= form_with url: registration_url, class: "contents" do |form| %>
<div class="my-5">
<%= label_tag "first_name", nil, class: "font-bold text-gray-700" %>
<%= form.text_field :first_name, required: true, autofocus: true, autocomplete: "first_name", placeholder: "Enter your first name", value: params[:first_name], class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= label_tag "last_name", nil, class: "font-bold text-gray-700" %>
<%= form.text_field :last_name, required: true, autocomplete: "last_name", placeholder: "Enter your last name", value: params[:last_name], class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= label_tag "email_address", nil, class: "font-bold text-gray-700" %>
<%= form.email_field :email_address, required: true, autocomplete: "email_address", placeholder: "Enter your email address", value: params[:email_address], class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= label_tag "password", nil, class: "font-bold text-gray-700" %>
<%= form.password_field :password, required: true, autocomplete: "new-password", placeholder: "Enter new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= label_tag "password_confirmation", nil, class: "font-bold text-gray-700" %>
<%= form.password_field :password_confirmation, required: true, autocomplete: "new-password", placeholder: "Repeat new password", maxlength: 72, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="col-span-6 sm:flex sm:items-center sm:gap-4">
<div class="inline">
<%= form.submit "Create account", class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
</div>
<div class="mt-4 text-sm text-gray-500 sm:mt-0">
<%= link_to "Log in", new_session_path, class: "text-gray-700 underline" %>
<%= link_to "Forgot password?", new_password_path, class: "ps-2 text-gray-700 underline" %>
</div>
<% end %>
<br>
</div>
