package register

import (
	"github.com/onsonr/sonr/internal/nebula/card"
	"github.com/onsonr/sonr/internal/nebula/form"
	"github.com/onsonr/sonr/internal/nebula/input"
)

templ formCreateProfile(action string, method string, data CreateProfileData) {
	@form.Root(action, method, "create-profile") {
		@form.Body() {
			@form.Header() {
				<sl-progress-bar value="50"></sl-progress-bar>
			}
			@input.Name()
			@input.Handle()
			@input.HumanSlider(data.FirstNumber, data.LastNumber)
			@form.Footer() {
				@form.CancelButton()
				@form.SubmitButton("Next")
			}
		}
	}
}

templ formRegisterPasskey(action, method string, data RegisterPasskeyData) {
	<form action={ templ.SafeURL(action) } method={ method } id="passkey-form">
		<input type="hidden" name="credential" id="credential-data" required/>
		<sl-card class="card-form gap-4 max-w-xl">
			<div slot="header">
				<div class="w-full py-2">
					@card.SonrProfile(data.Address, data.Name, data.Handle, data.CreationBlock)
				</div>
			</div>
			@input.CoinSelect()
			<div slot="footer" class="space-y-2">
				@input.Passkey(data.Address, data.Handle, data.Challenge)
				<sl-button href="/" style="width: 100%;" outline>
					<sl-icon slot="prefix" name="x-lg"></sl-icon>
					Cancel
				</sl-button>
			</div>
			<style>
  		.card-form [slot='footer'] {
    		justify-content: space-evenly;
    		align-items: center;
  		}
		</style>
		</sl-card>
	</form>
}