component SignUp {
  props {
    action = "/api/auth/register"
    schema = "auth-register"
    redirect = ""
    title = "Create your account"
    description = "Use a strong password and verify your contact details."
    submitLabel = "Create account"
    signInHref = "/sign-in"
    showPhone = true
    showUsername = true
    requireConsent = true
    color = "primary"
    size = "md"
    class = ""
  }
  view {
    <section {...attrs} data-wrnexus-runtime="auth" class='w-full max-w-lg rounded-[var(--wire-radius-lg)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface)] p-6 text-[var(--wire-color-text)] shadow-[var(--wire-shadow-2)] {class}'>
      <header class="mb-6 space-y-1.5">
        <h1 class="m-0 text-2xl font-semibold">{title}</h1>
        <p class="m-0 text-sm text-[var(--wire-color-muted)]">{description}</p>
      </header>

      <form
        method="post"
        action='{action}'
        data-schema='{schema}'
        data-redirect='{redirect}'
        novalidate
        class="grid gap-4 sm:grid-cols-2"
      >
        <div class="space-y-1.5 sm:col-span-2">
          <label for="auth-sign-up-name" class="text-sm font-medium">Full name</label>
          <input id="auth-sign-up-name" name="displayName" autocomplete="name" class="h-11 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 outline-none focus:border-[var(--wire-color-primary)]" />
          <p data-error="displayName" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
        </div>

        <div class="space-y-1.5">
          <label for="auth-sign-up-email" class="text-sm font-medium">Email</label>
          <input id="auth-sign-up-email" name="email" type="email" autocomplete="email" class="h-11 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 outline-none focus:border-[var(--wire-color-primary)]" />
          <p data-error="email" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
        </div>

        {#if showPhone}
          <div class="space-y-1.5">
            <label for="auth-sign-up-phone" class="text-sm font-medium">Phone</label>
            <input id="auth-sign-up-phone" name="phone" type="tel" autocomplete="tel" class="h-11 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 outline-none focus:border-[var(--wire-color-primary)]" />
            <p data-error="phone" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
          </div>
        {/if}

        {#if showUsername}
          <div class="space-y-1.5 sm:col-span-2">
            <label for="auth-sign-up-username" class="text-sm font-medium">Username</label>
            <input id="auth-sign-up-username" name="username" autocomplete="username" class="h-11 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 outline-none focus:border-[var(--wire-color-primary)]" />
            <p data-error="username" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
          </div>
        {/if}

        <div class="space-y-1.5 sm:col-span-2">
          <label for="auth-sign-up-password" class="text-sm font-medium">Password</label>
          <input id="auth-sign-up-password" name="password" type="password" autocomplete="new-password" class="h-11 w-full rounded-[var(--wire-radius-sm)] border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-2)] px-3 outline-none focus:border-[var(--wire-color-primary)]" />
          <p class="m-0 text-xs text-[var(--wire-color-muted)]">At least 12 characters with uppercase, lowercase, and a number.</p>
          <p data-error="password" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
        </div>

        {#if requireConsent}
          <div class="space-y-1 sm:col-span-2">
            <label class="flex items-start gap-2 text-sm text-[var(--wire-color-muted)]">
              <input name="consent" type="checkbox" class="mt-0.5 size-4" />
              <span>I agree to the terms and privacy policy.</span>
            </label>
            <p data-error="consent" class="m-0 min-h-4 text-xs text-[var(--wire-color-danger)]"></p>
          </div>
        {:else}
          <input type="hidden" name="consent" value="true" />
        {/if}

        <div class="sm:col-span-2"><slot></slot></div>

        <p data-error="_form" role="alert" class="m-0 hidden rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-danger)_10%,transparent)] p-3 text-sm text-[var(--wire-color-danger)] sm:col-span-2"></p>
        <p data-success="Account created successfully." role="status" hidden class="m-0 rounded-[var(--wire-radius-sm)] bg-[color-mix(in_srgb,var(--wire-color-success)_10%,transparent)] p-3 text-sm text-[var(--wire-color-success)] sm:col-span-2"></p>

        <button type="submit" class="h-11 rounded-[var(--wire-radius-sm)] bg-[var(--wire-color-primary)] px-4 text-sm font-semibold text-white sm:col-span-2 disabled:cursor-not-allowed disabled:opacity-60">{submitLabel}</button>
      </form>

      <p class="mb-0 mt-5 text-center text-sm text-[var(--wire-color-muted)]">Already have an account? <a href='{signInHref}' class="font-semibold text-[var(--wire-color-primary)] hover:underline">Sign in</a></p>
    </section>
  }
}