initial sign up

<div class="d-flex justify-content-center align-items-center min-vh-100">
  <div class="login-card p-5 shadow-sm">
    <h2 class="text-center mb-4 fw-semibold">Create Account</h2>

    <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= render "devise/shared/error_messages", resource: resource %>

      <div class="mb-3">
        <%= f.label :email, class: "form-label fw-semibold" %>
        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: "form-control input-modern" %>
      </div>

      <div class="mb-3">
        <%= f.label :password, class: "form-label fw-semibold" %>
        <% if @minimum_password_length %>
          <em class="text-muted">(<%= @minimum_password_length %> characters minimum)</em>
        <% end %>
        <%= f.password_field :password, autocomplete: "new-password", class: "form-control input-modern" %>
      </div>

      <div class="mb-3">
        <%= f.label :password_confirmation, class: "form-label fw-semibold" %>
        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-control input-modern" %>
      </div>

      <div class="mb-3">
        <%= f.label :firstname, class: "form-label fw-semibold" %>
        <%= f.text_field :firstname, class: "form-control input-modern" %>
      </div>

      <div class="mb-3">
        <%= f.label :lastname, class: "form-label fw-semibold" %>
        <%= f.text_field :lastname, class: "form-control input-modern" %>
      </div>

      <div class="mb-3">
        <%= f.label :username, class: "form-label fw-semibold" %>
        <%= f.text_field :username, class: "form-control input-modern" %>
      </div>

      <div class="mb-3">
        <%= f.label :user_role_id, "User Role", class: "form-label fw-semibold" %>
        <%= f.select :user_role_id, UserRole.pluck(:name, :id), {}, class: "form-control input-modern" %>
      </div>

      <div class="mb-3">
        <%= f.label :onboard_client_id, "Onboard Client", class: "form-label fw-semibold" %>
        <%= f.select :onboard_client_id, OnboardClient.pluck(:name, :id), {}, class: "form-control input-modern" %>
      </div>

      <div class="d-grid">
        <%= f.submit "Sign Up", class: "btn btn-modern" %>
      </div>
    <% end %>

    <div class="text-center mt-3">
      <%= render "devise/shared/links" %>
    </div>
  </div>
</div>