<% content_for :title, "Sign up" %>

<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px]">
  <div class="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
    <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900 mb-6">Sign up</h2>

    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "space-y-6" }) do |f| %>
      <%= render "devise/shared/error_messages", resource: resource %>

      <div>
        <%= f.label :first_name, class: "frm-label" %>
        <%= f.text_field :first_name, autofocus: true, class: "frm-input" %>
      </div>

      <div>
        <%= f.label :last_name, class: "frm-label" %>
        <%= f.text_field :last_name, class: "frm-input" %>
      </div>

      <div>
        <%= f.label :email, class: "frm-label" %>
        <%= f.email_field :email, autocomplete: "email", class: "frm-input" %>
      </div>

      <div>
        <%= f.label :password, class: "frm-label" %>
        <% if @minimum_password_length %>
          <span class="text-sm text-neutral-500">(<%= @minimum_password_length %> characters minimum)</span>
        <% end %>
        <%= f.password_field :password, autocomplete: "new-password", class: "frm-input" %>
      </div>

      <div>
        <%= f.label :password_confirmation, class: "frm-label" %>
        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "frm-input" %>
      </div>

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

    <div class="mt-6">
      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>
