phoenix_kit

<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={"#{@project_title} - #{gettext("Create account")}"}
  current_path={assigns[:url_path] || "/users/register"}
  dev_mailbox_message={gettext("confirmation emails")}
>
  <h1 class="text-2xl font-bold text-center mb-6">
    {@project_title} {gettext("Create account")}
  </h1>

  <%!-- Invitation banner: shown when user arrives via org invitation link --%>
  <%= if @pending_invitation do %>
    <div class="alert alert-info mb-4">
      <.icon name="hero-building-office-2" class="w-5 h-5 shrink-0" />
      <span>
        {gettext(
          "You've been invited to join %{organization}. Create an account to accept the invitation.",
          organization: @pending_invitation.organization.organization_name
        )}
      </span>
    </div>
  <% end %>

  <.form
    for={@form}
    id="registration_form"
    phx-submit="save"
    phx-change="validate"
    phx-trigger-action={@trigger_submit}
    action={Routes.path("/users/log-in?_action=registered")}
    method="post"
  >
    <fieldset class="fieldset min-w-0">
      <legend class="fieldset-legend sr-only">{gettext("Account Information")}</legend>

      <div phx-feedback-for="user[email]">
        <label class="label" for="user_email">
          <span class="label-text flex items-center">
            <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-4 h-4 mr-2" /> {gettext(
              "Email"
            )}
          </span>
        </label>
        <.input
          field={@form[:email]}
          type="email"
          placeholder={gettext("Enter your email address")}
          autocomplete="email"
          class="transition-colors focus:input-primary"
          required
        />
      </div>

      <%!-- Username Field (optional, controlled by admin setting) --%>
      <%= if @show_username do %>
        <div phx-feedback-for="user[username]">
          <label class="label" for="user_username">
            <span class="label-text flex items-center">
              <PhoenixKitWeb.Components.Core.Icons.icon_user_profile class="w-4 h-4 mr-2" />
              {gettext("Username")}
            </span>
          </label>
          <.input
            field={@form[:username]}
            type="text"
            placeholder={gettext("Choose a unique username (optional)")}
            autocomplete="username"
            class="transition-colors focus:input-primary"
          />
          <div class="text-xs text-base-content/60 mt-1">
            {gettext("If not provided, we'll generate one from your email")}
          </div>
        </div>
      <% end %>

      <%!-- Referral Code Field (shown when referral codes are enabled) --%>
      <%= if @referral_codes_enabled do %>
        <div phx-feedback-for="referral_code">
          <.label for="referral_code">
            {gettext("Referral Code")}
            <%= if @referral_codes_required do %>
              *
            <% end %>
          </.label>
          <input
            id="referral_code"
            name="referral_code"
            type="text"
            class={[
              "input w-full",
              (@referral_code_error ||
                 (@check_errors && @referral_codes_required &&
                    (is_nil(@referral_code) || @referral_code == ""))) && "input-error"
            ]}
            placeholder={gettext("Enter your referral code")}
            value={@referral_code || ""}
            required={@referral_codes_required}
          />
          <%= if @referral_code_error do %>
            <.error>{@referral_code_error}</.error>
          <% end %>
        </div>
      <% end %>

      <%!-- Account Type (only when organization accounts enabled) --%>
      <%= if @org_accounts_enabled do %>
        <div phx-feedback-for="user[account_type]">
          <label class="label" for="user_account_type">
            <span class="label-text flex items-center">
              <.icon name="hero-building-office-2" class="w-4 h-4 mr-2" /> {gettext(
                "Account Type"
              )}
            </span>
          </label>
          <select
            id="user_account_type"
            name="user[account_type]"
            class="select select-bordered w-full"
          >
            <option
              value="person"
              selected={Phoenix.HTML.Form.input_value(@form, :account_type) != "organization"}
            >
              {gettext("Person")}
            </option>
            <option
              value="organization"
              selected={Phoenix.HTML.Form.input_value(@form, :account_type) == "organization"}
            >
              {gettext("Organization")}
            </option>
          </select>
        </div>

        <%!-- Organization Name (only for organization type) --%>
        <%= if Phoenix.HTML.Form.input_value(@form, :account_type) == "organization" do %>
          <div phx-feedback-for="user[organization_name]">
            <label class="label" for="user_organization_name">
              <span class="label-text flex items-center">
                <.icon name="hero-building-office" class="w-4 h-4 mr-2" /> {gettext(
                  "Organization Name"
                )}
              </span>
            </label>
            <.input
              field={@form[:organization_name]}
              type="text"
              placeholder={gettext("Enter organization name")}
              required
            />
          </div>
        <% end %>
      <% end %>

      <div phx-feedback-for="user[password]">
        <label class="label" for="user_password">
          <span class="label-text flex items-center">
            <PhoenixKitWeb.Components.Core.Icons.icon_lock class="w-4 h-4 mr-2" /> {gettext(
              "Password"
            )}
          </span>
        </label>
        <.input
          field={@form[:password]}
          type="password"
          placeholder={gettext("Choose a secure password")}
          autocomplete="new-password"
          class="transition-colors focus:input-primary"
          required
        />
      </div>

      <button
        type="submit"
        class="btn btn-primary w-full mt-4 transition-all hover:scale-[1.02] active:scale-[0.98]"
      >
        <PhoenixKitWeb.Components.Core.Icons.icon_user_add class="w-5 h-5 mr-2" /> {gettext(
          "Create account"
        )}
        <span aria-hidden="true">→</span>
      </button>
    </fieldset>
  </.form>

  <%!-- Alternative registration methods --%>
  <%!-- Only show this section if at least one alternative method is available --%>
  <%= if @magic_link_registration_enabled or PhoenixKit.Users.OAuthAvailability.oauth_available?() do %>
    <div class="mt-6">
      <div class="relative">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-base-300" />
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-base-100 text-base-content/60">{gettext("Or continue with")}</span>
        </div>
      </div>

      <div class="mt-4 space-y-2">
        <%!-- Magic Link Registration --%>
        <%= if @magic_link_registration_enabled do %>
          <.link
            navigate={Routes.path("/users/register/magic-link")}
            class="btn btn-outline w-full transition-all hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg"
          >
            <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" />
            {gettext("Register with Magic Link")}
          </.link>
        <% end %>
        <%!-- OAuth authentication --%>
        <PhoenixKitWeb.Components.OAuthButtons.oauth_buttons show_divider={false} />
      </div>
    </div>
  <% end %>

  <%!-- Login link --%>
  <div class="text-center mt-4 text-sm">
    <span>{gettext("Already have an account?")}</span>
    <.link
      navigate={Routes.path("/users/log-in")}
      class="font-semibold text-primary hover:underline"
    >
      {gettext("Sign in")}
    </.link>
  </div>
</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>