package index

import (
	"github.com/onsonr/sonr/internal/nebula/card"
	"github.com/onsonr/sonr/internal/nebula/layout"
	"github.com/onsonr/sonr/internal/nebula/text"
)

templ InitialView() {
	@layout.View("Sonr.ID") {
		@card.Container() {
			@text.TitleDescription("Sonr.ID", "The decentralized identity layer for the web.")
			<div class="pt-1.5 mb-3 flex flex-col items-center justify-center h-full">
				<sl-button size="large" hx-target="#container" hx-get="/register" hx-push-url="/register" type="button">
					<sl-icon slot="prefix" library="sonr" name="sonr"></sl-icon>
					Get Started
					<sl-icon slot="suffix" library="sonr" name="arrow-right"></sl-icon>
				</sl-button>
			</div>
			<div class="pt-1.5 flex flex-row items-center justify-center h-full gap-3">
				<sl-button circle outline href="https://sonr.io">
					<sl-icon name="home" library="sonr" label="Home"></sl-icon>
				</sl-button>
				<sl-button circle outline href="https://onsonr.dev">
					<sl-icon name="docs" library="sonr" label="Docs"></sl-icon>
				</sl-button>
				<sl-button circle outline href="https://github.com/onsonr/sonr">
					<sl-icon name="social-github" library="sonr" label="Open Source"></sl-icon>
				</sl-button>
			</div>
		}
	}
}

templ ReturningView() {
	@layout.View("Login | Sonr.ID") {
		@card.Container() {
			@text.TitleDescription("Welcome Back!", "Continue with your existing Sonr.ID.")
			<div class="pt-3 flex flex-col items-center justify-center h-full">
				<sl-button hx-target="#container" hx-get="/register" type="button">
					<sl-icon slot="prefix" library="sonr" name="sonr"></sl-icon>
					Log back in
					<sl-icon slot="suffix" library="sonr" name="arrow-right"></sl-icon>
				</sl-button>
			</div>
		}
	}
}