diff --git a/models/auth.go b/models/auth.go
new file mode 100644
index 0000000..501ad67
--- /dev/null
+++ b/models/auth.go
@@ -0,0 +1,103 @@
+package models
+
+// AppInfo represents an application requesting authorization
+type AppInfo struct {
+	Name     string
+	Domain   string
+	LogoIcon string
+	Verified bool
+}
+
+// WalletInfo represents a user's wallet details
+type WalletInfo struct {
+	Name    string
+	Address string
+	Balance string
+}
+
+// TokenAmount represents a token amount with its value
+type TokenAmount struct {
+	Symbol   string
+	Amount   string
+	USD      string
+	Initials string
+}
+
+// TxDetails represents transaction details for authorization
+type TxDetails struct {
+	Type       string
+	FromToken  TokenAmount
+	ToToken    TokenAmount
+	Network    string
+	NetworkFee string
+	MaxFee     string
+	Slippage   string
+	Contract   string
+	Function   string
+	RawData    string
+}
+
+// AuthRequest represents an authorization request from an app
+type AuthRequest struct {
+	Type        string
+	App         AppInfo
+	Wallet      WalletInfo
+	Message     string
+	MessageHex  string
+	Transaction *TxDetails
+}
+
+// DefaultAuthRequest returns a sample authorization request for testing
+func DefaultAuthRequest(reqType string) AuthRequest {
+	if reqType == "" {
+		reqType = "connect"
+	}
+
+	return AuthRequest{
+		Type: reqType,
+		App: AppInfo{
+			Name:     "Uniswap",
+			Domain:   "app.uniswap.org",
+			LogoIcon: "cube",
+			Verified: true,
+		},
+		Wallet: WalletInfo{
+			Name:    "Main Wallet",
+			Address: "sonr1x9f...7k2m",
+			Balance: "1,234.56 SNR",
+		},
+		Message: `Welcome to Uniswap!
+
+Click to sign in and accept the Uniswap Terms of Service.
+
+This request will not trigger a blockchain transaction or cost any gas fees.
+
+Wallet address:
+sonr1x9f4h2k8m3n5p7q2r4s6t8v0w3x5y7z9a1b3c5d7k2m
+
+Nonce: 8f4a2b1c`,
+		MessageHex: "0x57656c636f6d6520746f20556e697377617021...",
+		Transaction: &TxDetails{
+			Type: "Swap",
+			FromToken: TokenAmount{
+				Symbol:   "ETH",
+				Amount:   "100.00",
+				USD:      "$234,567.00",
+				Initials: "E",
+			},
+			ToToken: TokenAmount{
+				Symbol:   "USDC",
+				Amount:   "125,000",
+				USD:      "$125,000.00",
+				Initials: "U",
+			},
+			Network:    "Sonr Mainnet",
+			NetworkFee: "~$0.12",
+			MaxFee:     "$0.26",
+			Slippage:   "0.5%",
+			Contract:   "0x7a25...3f8b",
+			Function:   "swapExactTokensForTokens()",
+			RawData:    "0x38ed1739\n0000000000000000000000000000000000000056bc75e2d63100000...",
+		},
+	}
+}
diff --git a/models/dashboard.go b/models/dashboard.go
new file mode 100644
index 0000000..a9fb78b
--- /dev/null
+++ b/models/dashboard.go
@@ -0,0 +1,163 @@
+package models
+
+// Token represents a cryptocurrency token in the wallet
+type Token struct {
+	Symbol   string
+	Name     string
+	Balance  string
+	Value    string
+	Change   string
+	Positive bool
+	Color    string
+	Initials string
+	Network  string
+}
+
+// Transaction represents a wallet transaction
+type Transaction struct {
+	Type     string
+	Asset    string
+	Amount   string
+	USD      string
+	Date     string
+	Time     string
+	Hash     string
+	Positive bool
+	Address  string
+}
+
+// NFT represents a non-fungible token in the wallet
+type NFT struct {
+	Name       string
+	Collection string
+	Image      string
+	Floor      string
+	Value      string
+	Badge      string
+	Verified   bool
+}
+
+type AreaSeriesData struct {
+	Date     string  `json:"date"`
+	Industry string  `json:"industry"`
+	Value    float64 `json:"value"`
+}
+
+type BubbleData struct {
+	Name   string  `json:"name"`
+	Sector string  `json:"sector"`
+	Value  float64 `json:"value"`
+}
+
+// DashboardData holds all data for the dashboard view
+type DashboardData struct {
+	TotalBalance    string
+	Change24h       string
+	Tokens          []Token
+	Transactions    []Transaction
+	NFTs            []NFT
+	PortfolioChart  []AreaSeriesData
+	MarketCapBubble []BubbleData
+}
+
+// DefaultTokens returns sample token data
+func DefaultTokens() []Token {
+	return []Token{
+		{Symbol: "SNR", Name: "Sonr", Balance: "8,432.50", Value: "$4,216.25", Change: "+5.67%", Positive: true, Color: "linear-gradient(135deg, #17c2ff, #0090ff)", Initials: "S", Network: "Sonr Mainnet"},
+		{Symbol: "ETH", Name: "Ethereum", Balance: "2.847", Value: "$6,682.04", Change: "+3.24%", Positive: true, Color: "#627eea", Initials: "E", Network: "Ethereum"},
+		{Symbol: "USDC", Name: "USD Coin", Balance: "1,250.00", Value: "$1,250.00", Change: "0.00%", Positive: true, Color: "#2775ca", Initials: "U", Network: "Ethereum"},
+		{Symbol: "AVAX", Name: "Avalanche", Balance: "24.83", Value: "$699.03", Change: "-2.18%", Positive: false, Color: "#e84142", Initials: "A", Network: "Avalanche"},
+	}
+}
+
+// DefaultTransactions returns sample transaction data
+func DefaultTransactions() []Transaction {
+	return []Transaction{
+		{Type: "receive", Asset: "ETH", Amount: "+0.25 ETH", USD: "$586.25", Date: "Today", Time: "2:34 PM", Hash: "0x8f4a2b1c...", Positive: true, Address: "0x742d...35Cb"},
+		{Type: "send", Asset: "SNR", Amount: "-500 SNR", USD: "$250.00", Date: "Yesterday", Time: "11:22 AM", Hash: "0x7d3e2a1b...", Positive: false, Address: "sonr1k4m...9p3q"},
+		{Type: "swap", Asset: "ETH -> USDC", Amount: "0.5 ETH", USD: "-> 1,172.50 USDC", Date: "Jan 1", Time: "9:15 AM", Hash: "0x1a2b3c4d...", Positive: true, Address: "Uniswap V3"},
+	}
+}
+
+// DefaultNFTs returns sample NFT data
+func DefaultNFTs() []NFT {
+	return []NFT{
+		{Name: "Bored Ape #4521", Collection: "Bored Ape Yacht Club", Image: "https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?w=400&h=400&fit=crop", Floor: "28.5 ETH", Value: "32.0 ETH", Badge: "Listed", Verified: true},
+		{Name: "Sonr Genesis #001", Collection: "Sonr Genesis", Image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=400&h=400&fit=crop", Floor: "0.8 ETH", Value: "2.5 ETH", Badge: "Rare", Verified: true},
+	}
+}
+
+// DefaultPortfolioChartData returns sample stacked area data for portfolio performance
+func DefaultPortfolioChartData() []AreaSeriesData {
+	return []AreaSeriesData{
+		// Day 1
+		{Date: "2024-12-25", Industry: "ETH", Value: 3200},
+		{Date: "2024-12-25", Industry: "SNR", Value: 2100},
+		{Date: "2024-12-25", Industry: "USDC", Value: 1200},
+		{Date: "2024-12-25", Industry: "AVAX", Value: 500},
+		// Day 2
+		{Date: "2024-12-26", Industry: "ETH", Value: 3350},
+		{Date: "2024-12-26", Industry: "SNR", Value: 2200},
+		{Date: "2024-12-26", Industry: "USDC", Value: 1200},
+		{Date: "2024-12-26", Industry: "AVAX", Value: 520},
+		// Day 3
+		{Date: "2024-12-27", Industry: "ETH", Value: 3500},
+		{Date: "2024-12-27", Industry: "SNR", Value: 2350},
+		{Date: "2024-12-27", Industry: "USDC", Value: 1200},
+		{Date: "2024-12-27", Industry: "AVAX", Value: 480},
+		// Day 4
+		{Date: "2024-12-28", Industry: "ETH", Value: 3280},
+		{Date: "2024-12-28", Industry: "SNR", Value: 2400},
+		{Date: "2024-12-28", Industry: "USDC", Value: 1200},
+		{Date: "2024-12-28", Industry: "AVAX", Value: 510},
+		// Day 5
+		{Date: "2024-12-29", Industry: "ETH", Value: 3450},
+		{Date: "2024-12-29", Industry: "SNR", Value: 2550},
+		{Date: "2024-12-29", Industry: "USDC", Value: 1250},
+		{Date: "2024-12-29", Industry: "AVAX", Value: 530},
+		// Day 6
+		{Date: "2024-12-30", Industry: "ETH", Value: 3600},
+		{Date: "2024-12-30", Industry: "SNR", Value: 2680},
+		{Date: "2024-12-30", Industry: "USDC", Value: 1250},
+		{Date: "2024-12-30", Industry: "AVAX", Value: 550},
+		// Day 7
+		{Date: "2024-12-31", Industry: "ETH", Value: 3750},
+		{Date: "2024-12-31", Industry: "SNR", Value: 2800},
+		{Date: "2024-12-31", Industry: "USDC", Value: 1250},
+		{Date: "2024-12-31", Industry: "AVAX", Value: 580},
+		// Day 8
+		{Date: "2025-01-01", Industry: "ETH", Value: 3680},
+		{Date: "2025-01-01", Industry: "SNR", Value: 2900},
+		{Date: "2025-01-01", Industry: "USDC", Value: 1250},
+		{Date: "2025-01-01", Industry: "AVAX", Value: 600},
+	}
+}
+
+// DefaultMarketCapBubbleData returns sample bubble chart data for market cap dominance
+func DefaultMarketCapBubbleData() []BubbleData {
+	return []BubbleData{
+		{Name: "BTC", Sector: "Layer 1", Value: 45000},
+		{Name: "ETH", Sector: "Layer 1", Value: 28000},
+		{Name: "SNR", Sector: "Layer 1", Value: 8500},
+		{Name: "SOL", Sector: "Layer 1", Value: 12000},
+		{Name: "AVAX", Sector: "Layer 1", Value: 6000},
+		{Name: "USDC", Sector: "Stablecoin", Value: 15000},
+		{Name: "USDT", Sector: "Stablecoin", Value: 18000},
+		{Name: "UNI", Sector: "DeFi", Value: 4500},
+		{Name: "AAVE", Sector: "DeFi", Value: 3200},
+		{Name: "LINK", Sector: "Oracle", Value: 5800},
+	}
+}
+
+// DefaultDashboardData returns a complete dashboard data set with sample data
+func DefaultDashboardData() DashboardData {
+	return DashboardData{
+		TotalBalance:    "12847.32",
+		Change24h:       "+$302.18",
+		Tokens:          DefaultTokens(),
+		Transactions:    DefaultTransactions(),
+		NFTs:            DefaultNFTs(),
+		PortfolioChart:  DefaultPortfolioChartData(),
+		MarketCapBubble: DefaultMarketCapBubbleData(),
+	}
+}
diff --git a/models/login.go b/models/login.go
new file mode 100644
index 0000000..b8b535b
--- /dev/null
+++ b/models/login.go
@@ -0,0 +1,15 @@
+package models
+
+// LoginState holds the current login flow state
+type LoginState struct {
+	Step   string
+	Method string
+	Error  string
+}
+
+// DefaultLoginState returns a new login state at step 1
+func DefaultLoginState() LoginState {
+	return LoginState{
+		Step: "1",
+	}
+}
diff --git a/models/register.go b/models/register.go
new file mode 100644
index 0000000..b3e37d2
--- /dev/null
+++ b/models/register.go
@@ -0,0 +1,32 @@
+package models
+
+// DeviceCapabilities holds WebAuthn capability detection results
+type DeviceCapabilities struct {
+	Platform      bool // Biometrics (Face ID, Touch ID, Windows Hello)
+	CrossPlatform bool // Security keys (YubiKey, etc.)
+	Conditional   bool // Passkey autofill support
+}
+
+// RegisterState holds the current registration flow state
+type RegisterState struct {
+	Step     int
+	Method   string // "passkey", "security-key", or "qr-code"
+	Username string
+	Error    string
+}
+
+// DefaultRegisterState returns a new registration state at step 1
+func DefaultRegisterState() RegisterState {
+	return RegisterState{
+		Step: 1,
+	}
+}
+
+// DefaultDeviceCapabilities returns capabilities assuming full support (for testing)
+func DefaultDeviceCapabilities() DeviceCapabilities {
+	return DeviceCapabilities{
+		Platform:      true,
+		CrossPlatform: true,
+		Conditional:   true,
+	}
+}
diff --git a/models/settings.go b/models/settings.go
new file mode 100644
index 0000000..e481bc4
--- /dev/null
+++ b/models/settings.go
@@ -0,0 +1,225 @@
+package models
+
+import "time"
+
+type SocialLinks struct {
+	Twitter string
+	GitHub  string
+	Discord string
+}
+
+type ProfileSettings struct {
+	AvatarURL   string
+	Initials    string
+	DisplayName string
+	Username    string
+	Bio         string
+	Website     string
+	SocialLinks SocialLinks
+	Visibility  string
+}
+
+type Device struct {
+	ID        string
+	Name      string
+	Type      string
+	Browser   string
+	OS        string
+	AuthType  string
+	AddedAt   time.Time
+	LastUsed  time.Time
+	IsCurrent bool
+}
+
+type OAuthScope struct {
+	Name        string
+	Description string
+	Enabled     bool
+	Required    bool
+}
+
+type AuthorizedClient struct {
+	ID       string
+	Name     string
+	Domain   string
+	Initials string
+	Color    string
+	Status   string
+}
+
+type OAuthSettings struct {
+	DefaultScopes   []OAuthScope
+	SessionDuration string
+	ConsentPrompt   string
+	Clients         []AuthorizedClient
+}
+
+type NotificationItem struct {
+	Key         string
+	Title       string
+	Description string
+	Enabled     bool
+	Threshold   int
+}
+
+type NotificationPrefs struct {
+	SecurityAlerts []NotificationItem
+	Transactions   []NotificationItem
+	Apps           []NotificationItem
+	Marketing      []NotificationItem
+}
+
+type Email struct {
+	ID         string
+	Address    string
+	IsPrimary  bool
+	IsVerified bool
+	AddedAt    time.Time
+}
+
+type Phone struct {
+	ID         string
+	Number     string
+	IsPrimary  bool
+	IsVerified bool
+	AddedAt    time.Time
+	Use2FA     bool
+}
+
+type SMSSettings struct {
+	Enabled       bool
+	RecoveryCodes bool
+}
+
+type APIKey struct {
+	ID          string
+	Name        string
+	KeyPreview  string
+	KeyFull     string
+	Environment string
+	Permissions string
+	Status      string
+	CreatedAt   time.Time
+}
+
+type Webhook struct {
+	ID            string
+	URL           string
+	Description   string
+	Events        []string
+	Status        string
+	LastTriggered time.Time
+	FailureCount  int
+}
+
+type OAuthAppConfig struct {
+	ClientID     string
+	ClientSecret string
+	RedirectURIs []string
+}
+
+type DeveloperSettings struct {
+	APIKeys   []APIKey
+	Webhooks  []Webhook
+	OAuthApp  OAuthAppConfig
+	DebugMode bool
+	TestMode  bool
+	ShowRaw   bool
+}
+
+type SettingsData struct {
+	Profile       ProfileSettings
+	Devices       []Device
+	OAuth         OAuthSettings
+	Notifications NotificationPrefs
+	Emails        []Email
+	Phones        []Phone
+	SMSSettings   SMSSettings
+	Developer     DeveloperSettings
+}
+
+func DefaultSettingsData() SettingsData {
+	return SettingsData{
+		Profile: ProfileSettings{
+			Initials:    "JD",
+			DisplayName: "John Doe",
+			Username:    "johndoe",
+			Bio:         "Web3 enthusiast and DeFi explorer. Building on Sonr.",
+			Website:     "https://johndoe.dev",
+			Visibility:  "public",
+		},
+		Devices: []Device{
+			{ID: "dev-1", Name: "MacBook Pro", Type: "laptop", Browser: "Chrome", OS: "macOS", AuthType: "Touch ID", AddedAt: time.Now().AddDate(0, 0, -20), LastUsed: time.Now(), IsCurrent: true},
+			{ID: "dev-2", Name: "iPhone 15 Pro", Type: "mobile", Browser: "Safari", OS: "iOS", AuthType: "Face ID", AddedAt: time.Now().AddDate(0, 0, -25), LastUsed: time.Now().Add(-2 * time.Hour), IsCurrent: false},
+			{ID: "dev-3", Name: "YubiKey 5C", Type: "key", Browser: "", OS: "", AuthType: "FIDO2", AddedAt: time.Now().AddDate(0, -1, -7), LastUsed: time.Now().AddDate(0, 0, -5), IsCurrent: false},
+			{ID: "dev-4", Name: "Windows Desktop", Type: "desktop", Browser: "Firefox", OS: "Windows", AuthType: "Windows Hello", AddedAt: time.Now().AddDate(0, -2, 0), LastUsed: time.Now().AddDate(0, 0, -14), IsCurrent: false},
+		},
+		OAuth: OAuthSettings{
+			DefaultScopes: []OAuthScope{
+				{Name: "openid", Description: "Basic identity information (required)", Enabled: true, Required: true},
+				{Name: "profile", Description: "Display name and avatar", Enabled: true, Required: false},
+				{Name: "email", Description: "Email address access", Enabled: false, Required: false},
+				{Name: "wallet:read", Description: "View wallet balances", Enabled: false, Required: false},
+			},
+			SessionDuration: "7d",
+			ConsentPrompt:   "first",
+			Clients: []AuthorizedClient{
+				{ID: "client-1", Name: "Uniswap", Domain: "app.uniswap.org", Initials: "U", Color: "linear-gradient(135deg, #ff007a, #ff5ca0)", Status: "active"},
+				{ID: "client-2", Name: "OpenSea", Domain: "opensea.io", Initials: "O", Color: "linear-gradient(135deg, #627eea, #4c63d2)", Status: "idle"},
+			},
+		},
+		Notifications: NotificationPrefs{
+			SecurityAlerts: []NotificationItem{
+				{Key: "security.new_device", Title: "New device login", Description: "When your account is accessed from a new device", Enabled: true},
+				{Key: "security.suspicious", Title: "Suspicious activity", Description: "Unusual login attempts or access patterns", Enabled: true},
+				{Key: "security.password", Title: "Password changes", Description: "When security credentials are modified", Enabled: true},
+			},
+			Transactions: []NotificationItem{
+				{Key: "tx.incoming", Title: "Incoming transfers", Description: "When you receive tokens or NFTs", Enabled: true},
+				{Key: "tx.outgoing", Title: "Outgoing transfers", Description: "Confirmation of sent transactions", Enabled: true},
+				{Key: "tx.failed", Title: "Failed transactions", Description: "When a transaction fails or is reverted", Enabled: true},
+				{Key: "tx.large", Title: "Large transactions", Description: "Transactions above threshold", Enabled: true, Threshold: 1000},
+			},
+			Apps: []NotificationItem{
+				{Key: "app.connection", Title: "New app connections", Description: "When a new app connects to your wallet", Enabled: true},
+				{Key: "app.signature", Title: "Signature requests", Description: "When an app requests a signature", Enabled: true},
+				{Key: "app.permission", Title: "Permission changes", Description: "When app permissions are modified", Enabled: false},
+			},
+			Marketing: []NotificationItem{
+				{Key: "marketing.updates", Title: "Product updates", Description: "New features and improvements", Enabled: false},
+				{Key: "marketing.newsletter", Title: "Newsletter", Description: "Weekly digest of Sonr ecosystem news", Enabled: false},
+			},
+		},
+		Emails: []Email{
+			{ID: "email-1", Address: "john.doe@example.com", IsPrimary: true, IsVerified: true, AddedAt: time.Now().AddDate(0, 0, -20)},
+			{ID: "email-2", Address: "johndoe.work@company.io", IsPrimary: false, IsVerified: true, AddedAt: time.Now().AddDate(0, -1, -15)},
+			{ID: "email-3", Address: "backup@gmail.com", IsPrimary: false, IsVerified: false, AddedAt: time.Now().AddDate(0, 0, -2)},
+		},
+		Phones: []Phone{
+			{ID: "phone-1", Number: "+1 (555) 123-4567", IsPrimary: true, IsVerified: true, AddedAt: time.Now().AddDate(0, 0, -20), Use2FA: true},
+			{ID: "phone-2", Number: "+44 7700 900123", IsPrimary: false, IsVerified: true, AddedAt: time.Now().AddDate(0, -2, -10), Use2FA: false},
+		},
+		SMSSettings: SMSSettings{
+			Enabled:       true,
+			RecoveryCodes: false,
+		},
+		Developer: DeveloperSettings{
+			APIKeys: []APIKey{
+				{ID: "key-1", Name: "Production Key", KeyPreview: "sk_live_••••••••••••••••••••••••3f8b", KeyFull: "sk_live_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9d0e1f23f8b", Environment: "live", Permissions: "full", Status: "active", CreatedAt: time.Now().AddDate(0, 0, -35)},
+				{ID: "key-2", Name: "Test Key", KeyPreview: "sk_test_••••••••••••••••••••••••9a2c", KeyFull: "sk_test_z9y8x7w6v5u4t3s2r1q0p9o8n7m6l5k4j3i2h1g0f9e8d7c6b5a4z3y2x1w0v9u89a2c", Environment: "test", Permissions: "full", Status: "active", CreatedAt: time.Now().AddDate(0, 0, -35)},
+			},
+			Webhooks: []Webhook{
+				{ID: "wh-1", URL: "https://api.myapp.com/webhooks/sonr", Description: "Main webhook", Events: []string{"*"}, Status: "active", LastTriggered: time.Now().Add(-2 * time.Hour), FailureCount: 0},
+				{ID: "wh-2", URL: "https://hooks.slack.com/services/...", Description: "Slack notifications", Events: []string{"transaction.*"}, Status: "failing", LastTriggered: time.Now().Add(-1 * time.Hour), FailureCount: 3},
+			},
+			OAuthApp: OAuthAppConfig{
+				ClientID:     "sonr_client_a1b2c3d4e5f6",
+				ClientSecret: "sonr_secret_x9y8z7w6v5u4t3s2r1",
+				RedirectURIs: []string{"https://myapp.com/auth/callback", "http://localhost:3000/auth/callback"},
+			},
+			DebugMode: false,
+			TestMode:  true,
+			ShowRaw:   false,
+		},
+	}
+}
diff --git a/views/settings.templ b/views/settings.templ
new file mode 100644
index 0000000..839d1fa
--- /dev/null
+++ b/views/settings.templ
@@ -0,0 +1,1142 @@
+package views
+
+import (
+	"nebula/layouts"
+	"nebula/models"
+	"strconv"
+	"strings"
+	"time"
+)
+
+templ SettingsPage(data models.SettingsData, activeTab string) {
+	@layouts.DashboardLayout("Settings - Sonr", layouts.WalletUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}, "settings") {
+		@settingsStyles()
+		<header class="page-header">
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-xl">Settings</span>
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Manage your account preferences and security</span>
+			</div>
+		</header>
+		<div class="settings-container">
+			<wa-tab-group class="settings-tabs">
+				<wa-tab panel="profile" active?={ activeTab == "" || activeTab == "profile" }>
+					<wa-icon name="user"></wa-icon>
+					Profile
+				</wa-tab>
+				<wa-tab panel="devices" active?={ activeTab == "devices" }>
+					<wa-icon name="laptop"></wa-icon>
+					Devices
+				</wa-tab>
+				<wa-tab panel="oauth" active?={ activeTab == "oauth" }>
+					<wa-icon name="key"></wa-icon>
+					OAuth
+				</wa-tab>
+				<wa-tab panel="notifications" active?={ activeTab == "notifications" }>
+					<wa-icon name="bell"></wa-icon>
+					Notifications
+				</wa-tab>
+				<wa-tab panel="emails" active?={ activeTab == "emails" }>
+					<wa-icon name="envelope"></wa-icon>
+					Emails
+				</wa-tab>
+				<wa-tab panel="phones" active?={ activeTab == "phones" }>
+					<wa-icon name="phone"></wa-icon>
+					Phone Numbers
+				</wa-tab>
+				<wa-tab panel="developer" active?={ activeTab == "developer" }>
+					<wa-icon name="code"></wa-icon>
+					Developer
+				</wa-tab>
+				<wa-tab-panel name="profile">
+					@ProfileTab(data.Profile)
+				</wa-tab-panel>
+				<wa-tab-panel name="devices">
+					@DevicesTab(data.Devices)
+				</wa-tab-panel>
+				<wa-tab-panel name="oauth">
+					@OAuthTab(data.OAuth)
+				</wa-tab-panel>
+				<wa-tab-panel name="notifications">
+					@NotificationsTab(data.Notifications)
+				</wa-tab-panel>
+				<wa-tab-panel name="emails">
+					@EmailsTab(data.Emails)
+				</wa-tab-panel>
+				<wa-tab-panel name="phones">
+					@PhonesTab(data.Phones, data.SMSSettings)
+				</wa-tab-panel>
+				<wa-tab-panel name="developer">
+					@DeveloperTab(data.Developer)
+				</wa-tab-panel>
+			</wa-tab-group>
+		</div>
+		@AddEmailDialog()
+		@AddPhoneDialog()
+		@AddDeviceDialog()
+		@GenerateKeyDialog()
+		@AddWebhookDialog()
+		@settingsScripts()
+	}
+}
+
+templ ProfileTab(profile models.ProfileSettings) {
+	<div class="wa-stack wa-gap-xl">
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Avatar</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Your public profile image</p>
+				</div>
+				<div class="avatar-upload">
+					<wa-avatar initials={ profile.Initials } style="background: linear-gradient(135deg, #17c2ff, #0090ff);"></wa-avatar>
+					<div class="wa-stack wa-gap-s">
+						<div class="wa-cluster wa-gap-s">
+							<wa-button size="small" variant="neutral" appearance="outlined">
+								<wa-icon slot="start" name="upload"></wa-icon>
+								Upload
+							</wa-button>
+							<wa-button size="small" variant="neutral" appearance="plain">Remove</wa-button>
+						</div>
+						<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">JPG, PNG or GIF. Max 2MB.</span>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Display Name</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Shown on your public profile</p>
+				</div>
+				<wa-input value={ profile.DisplayName } placeholder="Enter display name" name="profile-display-name"></wa-input>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Username</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Your unique identifier</p>
+				</div>
+				<wa-input value={ profile.Username } placeholder="Enter username" name="profile-username">
+					<span slot="prefix">{ "@" }</span>
+				</wa-input>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Bio</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Brief description for your profile</p>
+				</div>
+				<wa-textarea rows="3" placeholder="Tell us about yourself..." value={ profile.Bio } name="profile-bio"></wa-textarea>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Website</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Your personal or project website</p>
+				</div>
+				<wa-input type="url" value={ profile.Website } placeholder="https://example.com" name="profile-website">
+					<wa-icon slot="prefix" name="globe"></wa-icon>
+				</wa-input>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Social Links</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Connect your social accounts</p>
+				</div>
+				<div class="wa-stack wa-gap-m">
+					<wa-input placeholder="twitter.com/username" value={ profile.SocialLinks.Twitter } name="profile-twitter">
+						<wa-icon slot="prefix" name="x-twitter" variant="brand"></wa-icon>
+					</wa-input>
+					<wa-input placeholder="github.com/username" value={ profile.SocialLinks.GitHub } name="profile-github">
+						<wa-icon slot="prefix" name="github" variant="brand"></wa-icon>
+					</wa-input>
+					<wa-input placeholder="discord.gg/invite" value={ profile.SocialLinks.Discord } name="profile-discord">
+						<wa-icon slot="prefix" name="discord" variant="brand"></wa-icon>
+					</wa-input>
+				</div>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Profile Visibility</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Control who can see your profile</p>
+				</div>
+				<wa-radio-group value={ profile.Visibility } name="profile-visibility">
+					<wa-radio value="public">
+						<div class="wa-stack wa-gap-0">
+							<span>Public</span>
+							<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Anyone can view your profile</span>
+						</div>
+					</wa-radio>
+					<wa-radio value="connections">
+						<div class="wa-stack wa-gap-0">
+							<span>Connections Only</span>
+							<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Only connected apps and users</span>
+						</div>
+					</wa-radio>
+					<wa-radio value="private">
+						<div class="wa-stack wa-gap-0">
+							<span>Private</span>
+							<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Only you can see your profile</span>
+						</div>
+					</wa-radio>
+				</wa-radio-group>
+			</div>
+		</div>
+		<div class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
+			<wa-button variant="neutral" appearance="outlined">Cancel</wa-button>
+			<wa-button variant="brand" hx-post="/api/settings/profile" hx-include="[name^='profile-']">Save Changes</wa-button>
+		</div>
+	</div>
+}
+
+templ DevicesTab(devices []models.Device) {
+	<div class="wa-stack wa-gap-xl">
+		<div class="wa-flank">
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-m">Linked Devices</span>
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Passkeys and security keys registered with your account</span>
+			</div>
+			<wa-button size="small" variant="brand" id="add-device-btn">
+				<wa-icon slot="start" name="plus"></wa-icon>
+				Add Device
+			</wa-button>
+		</div>
+		<div class="wa-stack wa-gap-m" id="devices-list">
+			for _, device := range devices {
+				@DeviceItem(device)
+			}
+		</div>
+		<wa-callout variant="neutral">
+			<wa-icon slot="icon" name="shield-check"></wa-icon>
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-xs">Security Recommendation</span>
+				<span class="wa-caption-s">Register at least 2 devices to ensure account recovery if one is lost.</span>
+			</div>
+		</wa-callout>
+	</div>
+}
+
+templ DeviceItem(device models.Device) {
+	<div class="device-item" id={ "device-" + device.ID }>
+		<div class="device-icon">
+			<wa-icon name={ deviceIcon(device.Type) } style="font-size: 24px;"></wa-icon>
+		</div>
+		<div class="device-info">
+			<div class="wa-stack wa-gap-0">
+				<div class="wa-cluster wa-gap-xs">
+					<span class="wa-heading-s">{ device.Name }</span>
+					if device.IsCurrent {
+						<wa-badge variant="success" pill>Current</wa-badge>
+					}
+				</div>
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">
+					if device.Browser != "" {
+						{ device.Browser } on { device.OS } - 
+					}
+					{ device.AuthType }
+				</span>
+			</div>
+		</div>
+		<div class="wa-stack wa-gap-0 wa-align-items-end">
+			<span class="wa-caption-s">Added { formatDate(device.AddedAt) }</span>
+			<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Last used: { formatRelativeTime(device.LastUsed) }</span>
+		</div>
+		<wa-dropdown>
+			<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Options"></wa-icon-button>
+			<wa-dropdown-item>
+				<wa-icon slot="icon" name="pen"></wa-icon>
+				Rename
+			</wa-dropdown-item>
+			<wa-divider></wa-divider>
+			<wa-dropdown-item
+				style="color: var(--wa-color-danger);"
+				hx-delete={ "/api/devices/" + device.ID }
+				hx-target={ "#device-" + device.ID }
+				hx-swap="delete"
+				hx-confirm="Remove this device?"
+			>
+				<wa-icon slot="icon" name="trash"></wa-icon>
+				Remove
+			</wa-dropdown-item>
+		</wa-dropdown>
+	</div>
+}
+
+func deviceIcon(deviceType string) string {
+	switch deviceType {
+	case "laptop":
+		return "laptop"
+	case "mobile":
+		return "mobile"
+	case "key":
+		return "key"
+	case "desktop":
+		return "desktop"
+	default:
+		return "laptop"
+	}
+}
+
+templ OAuthTab(oauth models.OAuthSettings) {
+	<div class="wa-stack wa-gap-xl">
+		<div class="wa-flank">
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-m">OAuth Settings</span>
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Configure your identity provider settings</span>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Default Scopes</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">Permissions granted by default</p>
+				</div>
+				<div class="wa-stack wa-gap-s">
+					for _, scope := range oauth.DefaultScopes {
+						<wa-checkbox checked?={ scope.Enabled } disabled?={ scope.Required }>
+							<div class="wa-stack wa-gap-0">
+								<span>{ scope.Name }</span>
+								<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ scope.Description }</span>
+							</div>
+						</wa-checkbox>
+					}
+				</div>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Session Duration</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">How long OAuth sessions remain valid</p>
+				</div>
+				<wa-select value={ oauth.SessionDuration }>
+					<wa-option value="1h">1 hour</wa-option>
+					<wa-option value="24h">24 hours</wa-option>
+					<wa-option value="7d">7 days</wa-option>
+					<wa-option value="30d">30 days</wa-option>
+					<wa-option value="never">Never expire</wa-option>
+				</wa-select>
+			</div>
+		</div>
+		<div class="form-section">
+			<div class="form-row">
+				<div class="form-label">
+					<span class="wa-heading-s">Consent Prompt</span>
+					<p class="wa-caption-s" style="color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;">When to show permission dialogs</p>
+				</div>
+				<wa-radio-group value={ oauth.ConsentPrompt }>
+					<wa-radio value="always">Always prompt for consent</wa-radio>
+					<wa-radio value="first">Only on first connection</wa-radio>
+					<wa-radio value="scope">When new scopes requested</wa-radio>
+				</wa-radio-group>
+			</div>
+		</div>
+		<wa-divider></wa-divider>
+		<div class="wa-stack wa-gap-m">
+			<div class="wa-flank">
+				<span class="wa-heading-m">Authorized Clients</span>
+				<wa-button size="small" variant="neutral" appearance="outlined">View All</wa-button>
+			</div>
+			<div class="wa-stack wa-gap-s">
+				for _, client := range oauth.Clients {
+					@AuthorizedClientCard(client)
+				}
+			</div>
+		</div>
+		<div class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
+			<wa-button variant="neutral" appearance="outlined">Cancel</wa-button>
+			<wa-button variant="brand">Save Changes</wa-button>
+		</div>
+	</div>
+}
+
+templ AuthorizedClientCard(client models.AuthorizedClient) {
+	<div class="oauth-client-card">
+		<div class="wa-flank">
+			<div class="wa-cluster wa-gap-m">
+				<wa-avatar initials={ client.Initials } style={ "--size: 40px; background: " + client.Color + ";" }></wa-avatar>
+				<div class="wa-stack wa-gap-0">
+					<span class="wa-heading-s">{ client.Name }</span>
+					<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ client.Domain }</span>
+				</div>
+			</div>
+			<div class="wa-cluster wa-gap-s">
+				if client.Status == "active" {
+					<wa-badge variant="success" pill>Active</wa-badge>
+				} else {
+					<wa-badge variant="neutral" pill>Idle</wa-badge>
+				}
+				<wa-button size="small" variant="danger" appearance="plain" hx-post={ "/api/oauth/clients/" + client.ID + "/revoke" } hx-swap="none">Revoke</wa-button>
+			</div>
+		</div>
+	</div>
+}
+
+templ NotificationsTab(prefs models.NotificationPrefs) {
+	<div class="wa-stack wa-gap-xl">
+		<div class="wa-stack wa-gap-2xs">
+			<span class="wa-heading-m">Notification Preferences</span>
+			<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Choose how and when you receive notifications</span>
+		</div>
+		<wa-card>
+			<span slot="header" class="wa-heading-s">Security Alerts</span>
+			<div class="wa-stack">
+				for _, item := range prefs.SecurityAlerts {
+					@NotificationRow(item)
+				}
+			</div>
+		</wa-card>
+		<wa-card>
+			<span slot="header" class="wa-heading-s">Transaction Notifications</span>
+			<div class="wa-stack">
+				for _, item := range prefs.Transactions {
+					@NotificationRow(item)
+				}
+			</div>
+		</wa-card>
+		<wa-card>
+			<span slot="header" class="wa-heading-s">App Notifications</span>
+			<div class="wa-stack">
+				for _, item := range prefs.Apps {
+					@NotificationRow(item)
+				}
+			</div>
+		</wa-card>
+		<wa-card>
+			<span slot="header" class="wa-heading-s">Marketing & Updates</span>
+			<div class="wa-stack">
+				for _, item := range prefs.Marketing {
+					@NotificationRow(item)
+				}
+			</div>
+		</wa-card>
+		<div class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
+			<wa-button variant="brand" hx-post="/api/settings/notifications" hx-swap="none">Save Preferences</wa-button>
+		</div>
+	</div>
+}
+
+templ NotificationRow(item models.NotificationItem) {
+	<div class="notification-row">
+		<div class="wa-stack wa-gap-0">
+			<span class="wa-heading-xs">{ item.Title }</span>
+			<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">{ item.Description }</span>
+		</div>
+		if item.Threshold > 0 {
+			<div class="wa-cluster wa-gap-s">
+				<wa-input type="number" value={ itoa(item.Threshold) } size="small" style="width: 100px;">
+					<span slot="suffix">USD</span>
+				</wa-input>
+				<wa-switch checked?={ item.Enabled } hx-post="/api/settings/notifications" hx-vals={ `{"key":"` + item.Key + `"}` } hx-swap="none"></wa-switch>
+			</div>
+		} else {
+			<wa-switch checked?={ item.Enabled } hx-post="/api/settings/notifications" hx-vals={ `{"key":"` + item.Key + `"}` } hx-swap="none"></wa-switch>
+		}
+	</div>
+}
+
+templ EmailsTab(emails []models.Email) {
+	<div class="wa-stack wa-gap-xl">
+		<div class="wa-flank">
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-m">Email Addresses</span>
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Manage email addresses linked to your account</span>
+			</div>
+			<wa-button size="small" variant="brand" id="add-email-btn">
+				<wa-icon slot="start" name="plus"></wa-icon>
+				Add Email
+			</wa-button>
+		</div>
+		<div class="wa-stack wa-gap-m" id="emails-list">
+			for _, email := range emails {
+				@EmailItem(email)
+			}
+		</div>
+		<wa-callout variant="neutral">
+			<wa-icon slot="icon" name="circle-info"></wa-icon>
+			<span class="wa-caption-s">Your primary email is used for account recovery and important notifications. You must have at least one verified email.</span>
+		</wa-callout>
+	</div>
+}
+
+templ EmailItem(email models.Email) {
+	<div class="contact-item" id={ "email-" + email.ID }>
+		if email.IsVerified {
+			<wa-icon name="envelope" style="font-size: 20px; color: var(--wa-color-neutral-500);"></wa-icon>
+		} else {
+			<wa-icon name="envelope" style="font-size: 20px; color: var(--wa-color-warning);"></wa-icon>
+		}
+		<div class="wa-stack wa-gap-0" style="flex: 1;">
+			<div class="wa-cluster wa-gap-xs">
+				<span class="wa-heading-s">{ email.Address }</span>
+				if email.IsPrimary {
+					<wa-badge variant="success" pill>Primary</wa-badge>
+				}
+				if email.IsVerified {
+					<wa-badge variant="brand" pill>Verified</wa-badge>
+				} else {
+					<wa-badge variant="warning" pill>Pending</wa-badge>
+				}
+			</div>
+			if email.IsVerified {
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Added { formatDate(email.AddedAt) }</span>
+			} else {
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Verification sent - check your inbox</span>
+			}
+		</div>
+		<wa-dropdown>
+			<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Options"></wa-icon-button>
+			<wa-dropdown-item disabled?={ email.IsPrimary }>
+				<wa-icon slot="icon" name="star"></wa-icon>
+				Set as Primary
+			</wa-dropdown-item>
+			<wa-dropdown-item hx-post={ "/api/settings/emails/" + email.ID + "/resend" } hx-swap="none">
+				<wa-icon slot="icon" name="paper-plane"></wa-icon>
+				Resend Verification
+			</wa-dropdown-item>
+			<wa-divider></wa-divider>
+			<wa-dropdown-item
+				disabled?={ email.IsPrimary }
+				style="color: var(--wa-color-danger);"
+				hx-delete={ "/api/settings/emails/" + email.ID }
+				hx-target={ "#email-" + email.ID }
+				hx-swap="delete"
+			>
+				<wa-icon slot="icon" name="trash"></wa-icon>
+				Remove
+			</wa-dropdown-item>
+		</wa-dropdown>
+	</div>
+}
+
+templ PhonesTab(phones []models.Phone, smsSettings models.SMSSettings) {
+	<div class="wa-stack wa-gap-xl">
+		<div class="wa-flank">
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-m">Phone Numbers</span>
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Manage phone numbers for 2FA and recovery</span>
+			</div>
+			<wa-button size="small" variant="brand" id="add-phone-btn">
+				<wa-icon slot="start" name="plus"></wa-icon>
+				Add Phone
+			</wa-button>
+		</div>
+		<div class="wa-stack wa-gap-m" id="phones-list">
+			for _, phone := range phones {
+				@PhoneItem(phone)
+			}
+		</div>
+		<wa-card>
+			<span slot="header" class="wa-heading-s">SMS Authentication</span>
+			<div class="wa-stack">
+				<div class="notification-row">
+					<div class="wa-stack wa-gap-0">
+						<span class="wa-heading-xs">Enable SMS 2FA</span>
+						<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Receive codes via SMS for high-risk actions</span>
+					</div>
+					<wa-switch checked?={ smsSettings.Enabled }></wa-switch>
+				</div>
+				<div class="notification-row">
+					<div class="wa-stack wa-gap-0">
+						<span class="wa-heading-xs">SMS recovery codes</span>
+						<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Allow account recovery via SMS</span>
+					</div>
+					<wa-switch checked?={ smsSettings.RecoveryCodes }></wa-switch>
+				</div>
+			</div>
+		</wa-card>
+		<wa-callout variant="warning">
+			<wa-icon slot="icon" name="triangle-alert"></wa-icon>
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-xs">SMS Security Notice</span>
+				<span class="wa-caption-s">SMS-based authentication is less secure than passkeys. We recommend using passkeys as your primary authentication method.</span>
+			</div>
+		</wa-callout>
+	</div>
+}
+
+templ PhoneItem(phone models.Phone) {
+	<div class="contact-item" id={ "phone-" + phone.ID }>
+		<wa-icon name="phone" style="font-size: 20px; color: var(--wa-color-neutral-500);"></wa-icon>
+		<div class="wa-stack wa-gap-0" style="flex: 1;">
+			<div class="wa-cluster wa-gap-xs">
+				<span class="wa-heading-s">{ phone.Number }</span>
+				if phone.IsPrimary {
+					<wa-badge variant="success" pill>Primary</wa-badge>
+				}
+				if phone.IsVerified {
+					<wa-badge variant="brand" pill>Verified</wa-badge>
+				}
+			</div>
+			<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">
+				Added { formatDate(phone.AddedAt) }
+				if phone.Use2FA {
+					 - Used for 2FA
+				}
+			</span>
+		</div>
+		<wa-dropdown>
+			<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Options"></wa-icon-button>
+			<wa-dropdown-item disabled?={ phone.IsPrimary }>
+				<wa-icon slot="icon" name="star"></wa-icon>
+				Set as Primary
+			</wa-dropdown-item>
+			<wa-dropdown-item hx-post={ "/api/settings/phones/" + phone.ID + "/test" } hx-swap="none">
+				<wa-icon slot="icon" name="message"></wa-icon>
+				Send Test SMS
+			</wa-dropdown-item>
+			<wa-divider></wa-divider>
+			<wa-dropdown-item
+				disabled?={ phone.IsPrimary }
+				style="color: var(--wa-color-danger);"
+				hx-delete={ "/api/settings/phones/" + phone.ID }
+				hx-target={ "#phone-" + phone.ID }
+				hx-swap="delete"
+			>
+				<wa-icon slot="icon" name="trash"></wa-icon>
+				Remove
+			</wa-dropdown-item>
+		</wa-dropdown>
+	</div>
+}
+
+templ DeveloperTab(dev models.DeveloperSettings) {
+	<div class="wa-stack wa-gap-xl">
+		<div class="wa-stack wa-gap-2xs">
+			<span class="wa-heading-m">Developer Settings</span>
+			<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">API access and integration options</span>
+		</div>
+		<wa-card>
+			<div slot="header" class="wa-flank">
+				<span class="wa-heading-s">API Keys</span>
+				<wa-button size="small" variant="neutral" appearance="outlined" id="generate-key-btn">
+					<wa-icon slot="start" name="plus"></wa-icon>
+					Generate Key
+				</wa-button>
+			</div>
+			<div class="wa-stack wa-gap-m" id="api-keys-list">
+				for _, key := range dev.APIKeys {
+					@APIKeyCard(key)
+				}
+			</div>
+		</wa-card>
+		<wa-card>
+			<div slot="header" class="wa-flank">
+				<span class="wa-heading-s">Webhooks</span>
+				<wa-button size="small" variant="neutral" appearance="outlined" id="add-webhook-btn">
+					<wa-icon slot="start" name="plus"></wa-icon>
+					Add Endpoint
+				</wa-button>
+			</div>
+			<div class="wa-stack wa-gap-m" id="webhooks-list">
+				for _, wh := range dev.Webhooks {
+					@WebhookCard(wh)
+				}
+			</div>
+		</wa-card>
+		@OAuthAppConfigCard(dev.OAuthApp)
+		<wa-card>
+			<span slot="header" class="wa-heading-s">Developer Mode</span>
+			<div class="wa-stack">
+				<div class="notification-row">
+					<div class="wa-stack wa-gap-0">
+						<span class="wa-heading-xs">Enable debug logging</span>
+						<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Log detailed API requests and responses</span>
+					</div>
+					<wa-switch checked?={ dev.DebugMode }></wa-switch>
+				</div>
+				<div class="notification-row">
+					<div class="wa-stack wa-gap-0">
+						<span class="wa-heading-xs">Test mode</span>
+						<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Use testnet for all transactions</span>
+					</div>
+					<wa-switch checked?={ dev.TestMode }></wa-switch>
+				</div>
+				<div class="notification-row">
+					<div class="wa-stack wa-gap-0">
+						<span class="wa-heading-xs">Show raw responses</span>
+						<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Display JSON in UI for debugging</span>
+					</div>
+					<wa-switch checked?={ dev.ShowRaw }></wa-switch>
+				</div>
+			</div>
+		</wa-card>
+		<wa-callout variant="neutral">
+			<wa-icon slot="icon" name="book"></wa-icon>
+			<div class="wa-stack wa-gap-2xs">
+				<span class="wa-heading-xs">API Documentation</span>
+				<span class="wa-caption-s">
+					View our <a href="#" style="color: var(--wa-color-primary);">API reference</a> and 
+					<a href="#" style="color: var(--wa-color-primary);">integration guides</a> to get started.
+				</span>
+			</div>
+		</wa-callout>
+		<div class="wa-cluster wa-gap-s" style="justify-content: flex-end;">
+			<wa-button variant="neutral" appearance="outlined">Cancel</wa-button>
+			<wa-button variant="brand">Save Changes</wa-button>
+		</div>
+	</div>
+}
+
+templ APIKeyCard(key models.APIKey) {
+	<div class="wa-stack wa-gap-s">
+		<div class="wa-flank">
+			<div class="wa-stack wa-gap-0">
+				<span class="wa-heading-xs">{ key.Name }</span>
+				<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Created { formatDate(key.CreatedAt) }</span>
+			</div>
+			if key.Environment == "live" {
+				<wa-badge variant="success" pill>Active</wa-badge>
+			} else {
+				<wa-badge variant="neutral" pill>Test Mode</wa-badge>
+			}
+		</div>
+		<div class="api-key-display">
+			<span>{ key.KeyPreview }</span>
+			<wa-copy-button value={ key.KeyFull }></wa-copy-button>
+			<wa-tooltip content="Reveal key">
+				<wa-icon-button name="eye" label="Reveal"></wa-icon-button>
+			</wa-tooltip>
+		</div>
+	</div>
+}
+
+templ WebhookCard(wh models.Webhook) {
+	<div class="webhook-item">
+		<div class="wa-flank">
+			<div class="wa-stack wa-gap-0">
+				<div class="wa-cluster wa-gap-xs">
+					<span class="wa-heading-xs">{ wh.URL }</span>
+					if wh.Status == "active" {
+						<wa-badge variant="success" pill>Active</wa-badge>
+					} else {
+						<wa-badge variant="warning" pill>Failing</wa-badge>
+					}
+				</div>
+				if wh.Status == "failing" {
+					<span class="wa-caption-xs" style="color: var(--wa-color-danger);">{ formatEvents(wh.Events) } events - { itoa(wh.FailureCount) } failures in last hour</span>
+				} else {
+					<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">{ formatEvents(wh.Events) } events - Last triggered { formatRelativeTime(wh.LastTriggered) }</span>
+				}
+			</div>
+			<wa-dropdown>
+				<wa-icon-button slot="trigger" name="ellipsis-vertical" label="Options"></wa-icon-button>
+				<wa-dropdown-item>
+					<wa-icon slot="icon" name="pen"></wa-icon>
+					Edit
+				</wa-dropdown-item>
+				<wa-dropdown-item hx-post={ "/api/webhooks/" + wh.ID + "/test" } hx-swap="none">
+					<wa-icon slot="icon" name="paper-plane"></wa-icon>
+					Send Test
+				</wa-dropdown-item>
+				<wa-dropdown-item>
+					<wa-icon slot="icon" name="clock-rotate-left"></wa-icon>
+					View Logs
+				</wa-dropdown-item>
+				<wa-divider></wa-divider>
+				<wa-dropdown-item style="color: var(--wa-color-danger);" hx-delete={ "/api/webhooks/" + wh.ID } hx-target="closest .webhook-item" hx-swap="delete">
+					<wa-icon slot="icon" name="trash"></wa-icon>
+					Delete
+				</wa-dropdown-item>
+			</wa-dropdown>
+		</div>
+	</div>
+}
+
+templ OAuthAppConfigCard(config models.OAuthAppConfig) {
+	<wa-card>
+		<span slot="header" class="wa-heading-s">OAuth Application</span>
+		<div class="wa-stack wa-gap-l">
+			<div class="form-row" style="grid-template-columns: 140px 1fr;">
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Client ID</span>
+				<div class="wa-cluster wa-gap-s">
+					<code style="font-family: var(--wa-font-mono); font-size: var(--wa-font-size-s);">{ config.ClientID }</code>
+					<wa-copy-button value={ config.ClientID }></wa-copy-button>
+				</div>
+			</div>
+			<div class="form-row" style="grid-template-columns: 140px 1fr;">
+				<span class="wa-caption-s" style="color: var(--wa-color-neutral-500);">Client Secret</span>
+				<div class="wa-cluster wa-gap-s">
+					<code style="font-family: var(--wa-font-mono); font-size: var(--wa-font-size-s);">••••••••••••••••</code>
+					<wa-copy-button value={ config.ClientSecret }></wa-copy-button>
+					<wa-button size="small" appearance="plain">Regenerate</wa-button>
+				</div>
+			</div>
+			<wa-divider></wa-divider>
+			<div class="wa-stack wa-gap-s">
+				<span class="wa-heading-xs">Redirect URIs</span>
+				for _, uri := range config.RedirectURIs {
+					<wa-input value={ uri } placeholder="https://example.com/callback">
+						<wa-icon-button slot="suffix" name="trash" label="Remove"></wa-icon-button>
+					</wa-input>
+				}
+				<wa-button size="small" appearance="plain">
+					<wa-icon slot="start" name="plus"></wa-icon>
+					Add URI
+				</wa-button>
+			</div>
+		</div>
+	</wa-card>
+}
+
+templ AddEmailDialog() {
+	<wa-dialog label="Add Email Address" id="add-email-dialog" style="--width: 420px;">
+		<div class="wa-stack wa-gap-l">
+			<wa-input type="email" label="Email Address" placeholder="you@example.com" autofocus name="email">
+				<wa-icon slot="prefix" name="envelope"></wa-icon>
+			</wa-input>
+			<wa-callout variant="neutral">
+				<wa-icon slot="icon" name="circle-info"></wa-icon>
+				<span class="wa-caption-s">We'll send a verification link to this address.</span>
+			</wa-callout>
+		</div>
+		<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end; width: 100%;">
+			<wa-button variant="neutral" appearance="outlined" data-dialog="close">Cancel</wa-button>
+			<wa-button variant="brand" hx-post="/api/settings/emails" hx-target="#emails-list" hx-swap="beforeend">Send Verification</wa-button>
+		</div>
+	</wa-dialog>
+}
+
+templ AddPhoneDialog() {
+	<wa-dialog label="Add Phone Number" id="add-phone-dialog" style="--width: 420px;">
+		<div class="wa-stack wa-gap-l">
+			<div class="wa-cluster wa-gap-s">
+				<wa-select value="+1" style="width: 100px;" name="country-code">
+					<wa-option value="+1">+1</wa-option>
+					<wa-option value="+44">+44</wa-option>
+					<wa-option value="+49">+49</wa-option>
+					<wa-option value="+33">+33</wa-option>
+					<wa-option value="+81">+81</wa-option>
+				</wa-select>
+				<wa-input type="tel" label="Phone Number" placeholder="(555) 123-4567" style="flex: 1;" name="phone">
+					<wa-icon slot="prefix" name="phone"></wa-icon>
+				</wa-input>
+			</div>
+			<wa-callout variant="neutral">
+				<wa-icon slot="icon" name="circle-info"></wa-icon>
+				<span class="wa-caption-s">We'll send a verification code via SMS.</span>
+			</wa-callout>
+		</div>
+		<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end; width: 100%;">
+			<wa-button variant="neutral" appearance="outlined" data-dialog="close">Cancel</wa-button>
+			<wa-button variant="brand" hx-post="/api/settings/phones" hx-target="#phones-list" hx-swap="beforeend">Send Code</wa-button>
+		</div>
+	</wa-dialog>
+}
+
+templ AddDeviceDialog() {
+	<wa-dialog label="Add Device" id="add-device-dialog" style="--width: 480px;">
+		<div class="wa-stack wa-gap-l" style="text-align: center;">
+			<wa-icon name="fingerprint" style="font-size: 64px; color: var(--wa-color-primary);"></wa-icon>
+			<div class="wa-stack wa-gap-xs">
+				<span class="wa-heading-m">Register a Passkey</span>
+				<span class="wa-caption-m" style="color: var(--wa-color-neutral-500);">
+					Use your device's built-in authenticator (Face ID, Touch ID, Windows Hello) or a security key.
+				</span>
+			</div>
+			<wa-button variant="brand" size="large" style="width: 100%;" id="register-passkey-btn">
+				<wa-icon slot="start" name="plus"></wa-icon>
+				Register Device
+			</wa-button>
+			<wa-divider>or</wa-divider>
+			<wa-button variant="neutral" appearance="outlined" style="width: 100%;" id="register-security-key-btn">
+				<wa-icon slot="start" name="key"></wa-icon>
+				Use Security Key
+			</wa-button>
+		</div>
+		<div slot="footer" class="wa-cluster" style="justify-content: center; width: 100%;">
+			<wa-button variant="neutral" appearance="plain" data-dialog="close">Cancel</wa-button>
+		</div>
+	</wa-dialog>
+}
+
+templ GenerateKeyDialog() {
+	<wa-dialog label="Generate API Key" id="generate-key-dialog" style="--width: 420px;">
+		<div class="wa-stack wa-gap-l">
+			<wa-input label="Key Name" placeholder="e.g., Production Server" autofocus name="key-name">
+				<wa-icon slot="prefix" name="tag"></wa-icon>
+			</wa-input>
+			<wa-select label="Environment" value="test" name="key-env">
+				<wa-option value="test">Test Mode</wa-option>
+				<wa-option value="live">Production</wa-option>
+			</wa-select>
+			<wa-select label="Permissions" value="full" name="key-perms">
+				<wa-option value="full">Full Access</wa-option>
+				<wa-option value="read">Read Only</wa-option>
+				<wa-option value="write">Write Only</wa-option>
+			</wa-select>
+			<wa-callout variant="warning">
+				<wa-icon slot="icon" name="triangle-alert"></wa-icon>
+				<span class="wa-caption-s">Your secret key will only be shown once. Store it securely.</span>
+			</wa-callout>
+		</div>
+		<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end; width: 100%;">
+			<wa-button variant="neutral" appearance="outlined" data-dialog="close">Cancel</wa-button>
+			<wa-button variant="brand" hx-post="/api/settings/api-keys" hx-target="#api-keys-list" hx-swap="beforeend">Generate Key</wa-button>
+		</div>
+	</wa-dialog>
+}
+
+templ AddWebhookDialog() {
+	<wa-dialog label="Add Webhook Endpoint" id="add-webhook-dialog" style="--width: 480px;">
+		<div class="wa-stack wa-gap-l">
+			<wa-input label="Endpoint URL" placeholder="https://api.example.com/webhooks" type="url" name="webhook-url">
+				<wa-icon slot="prefix" name="globe"></wa-icon>
+			</wa-input>
+			<wa-input label="Description" placeholder="Optional description" name="webhook-desc">
+				<wa-icon slot="prefix" name="align-left"></wa-icon>
+			</wa-input>
+			<div class="wa-stack wa-gap-s">
+				<span class="wa-heading-xs">Events to Subscribe</span>
+				<wa-checkbox checked name="webhook-event-tx">
+					<div class="wa-stack wa-gap-0">
+						<span>transaction.*</span>
+						<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">All transaction events</span>
+					</div>
+				</wa-checkbox>
+				<wa-checkbox checked name="webhook-event-conn">
+					<div class="wa-stack wa-gap-0">
+						<span>connection.*</span>
+						<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">App connection events</span>
+					</div>
+				</wa-checkbox>
+				<wa-checkbox name="webhook-event-sig">
+					<div class="wa-stack wa-gap-0">
+						<span>signature.*</span>
+						<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Signature request events</span>
+					</div>
+				</wa-checkbox>
+				<wa-checkbox name="webhook-event-acct">
+					<div class="wa-stack wa-gap-0">
+						<span>account.*</span>
+						<span class="wa-caption-xs" style="color: var(--wa-color-neutral-500);">Account update events</span>
+					</div>
+				</wa-checkbox>
+			</div>
+		</div>
+		<div slot="footer" class="wa-cluster wa-gap-s" style="justify-content: flex-end; width: 100%;">
+			<wa-button variant="neutral" appearance="outlined" data-dialog="close">Cancel</wa-button>
+			<wa-button variant="brand" hx-post="/api/settings/webhooks" hx-target="#webhooks-list" hx-swap="beforeend">Create Webhook</wa-button>
+		</div>
+	</wa-dialog>
+}
+
+func itoa(i int) string {
+	return strconv.Itoa(i)
+}
+
+func formatDate(t time.Time) string {
+	return t.Format("Jan 2, 2006")
+}
+
+func formatRelativeTime(t time.Time) string {
+	diff := time.Since(t)
+	if diff < time.Minute {
+		return "Just now"
+	}
+	if diff < time.Hour {
+		mins := int(diff.Minutes())
+		if mins == 1 {
+			return "1 minute ago"
+		}
+		return strconv.Itoa(mins) + " minutes ago"
+	}
+	if diff < 24*time.Hour {
+		hours := int(diff.Hours())
+		if hours == 1 {
+			return "1 hour ago"
+		}
+		return strconv.Itoa(hours) + " hours ago"
+	}
+	days := int(diff.Hours() / 24)
+	if days == 1 {
+		return "1 day ago"
+	}
+	if days < 14 {
+		return strconv.Itoa(days) + " days ago"
+	}
+	weeks := days / 7
+	if weeks == 1 {
+		return "1 week ago"
+	}
+	return strconv.Itoa(weeks) + " weeks ago"
+}
+
+func formatEvents(events []string) string {
+	if len(events) == 1 && events[0] == "*" {
+		return "All"
+	}
+	return strings.Join(events, ", ")
+}
+
+templ settingsStyles() {
+	<style>
+		.page-header {
+			margin-bottom: var(--wa-space-xl);
+		}
+		.settings-container {
+			background: var(--wa-color-surface);
+			border-radius: var(--wa-radius-l);
+			overflow: hidden;
+		}
+		.settings-tabs {
+			--indicator-color: var(--wa-color-primary);
+		}
+		.settings-tabs wa-tab-panel {
+			padding: var(--wa-space-xl);
+		}
+		.settings-tabs wa-tab-group::part(base) {
+			display: flex;
+			flex-direction: column;
+		}
+		.settings-tabs wa-tab-group::part(nav) {
+			background: var(--wa-color-surface);
+			border-bottom: 1px solid var(--wa-color-neutral-200);
+			padding: 0 var(--wa-space-m);
+		}
+		.form-section {
+			padding: var(--wa-space-l) 0;
+			border-bottom: 1px solid var(--wa-color-neutral-100);
+		}
+		.form-section:first-child {
+			padding-top: 0;
+		}
+		.form-section:last-child {
+			border-bottom: none;
+			padding-bottom: 0;
+		}
+		.form-row {
+			display: grid;
+			grid-template-columns: 200px 1fr;
+			gap: var(--wa-space-xl);
+			align-items: start;
+		}
+		@media (max-width: 768px) {
+			.form-row {
+				grid-template-columns: 1fr;
+				gap: var(--wa-space-s);
+			}
+		}
+		.form-label {
+			padding-top: var(--wa-space-xs);
+		}
+		.avatar-upload {
+			display: flex;
+			align-items: center;
+			gap: var(--wa-space-l);
+		}
+		.avatar-upload wa-avatar {
+			--size: 80px;
+		}
+		.device-item {
+			display: flex;
+			align-items: center;
+			gap: var(--wa-space-m);
+			padding: var(--wa-space-m);
+			background: var(--wa-color-surface-alt);
+			border-radius: var(--wa-radius-m);
+		}
+		.device-icon {
+			width: 48px;
+			height: 48px;
+			border-radius: var(--wa-radius-m);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: var(--wa-color-surface);
+			border: 1px solid var(--wa-color-neutral-200);
+		}
+		.device-info {
+			flex: 1;
+		}
+		.contact-item {
+			display: flex;
+			align-items: center;
+			gap: var(--wa-space-m);
+			padding: var(--wa-space-m);
+			background: var(--wa-color-surface-alt);
+			border-radius: var(--wa-radius-m);
+		}
+		.api-key-display {
+			display: flex;
+			align-items: center;
+			gap: var(--wa-space-s);
+			padding: var(--wa-space-m);
+			background: var(--wa-color-neutral-900);
+			color: var(--wa-color-neutral-100);
+			border-radius: var(--wa-radius-m);
+			font-family: var(--wa-font-mono);
+			font-size: var(--wa-font-size-s);
+		}
+		.api-key-display span {
+			flex: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.webhook-item {
+			padding: var(--wa-space-m);
+			background: var(--wa-color-surface-alt);
+			border-radius: var(--wa-radius-m);
+		}
+		.notification-row {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: var(--wa-space-m) 0;
+			border-bottom: 1px solid var(--wa-color-neutral-100);
+		}
+		.notification-row:last-child {
+			border-bottom: none;
+		}
+		.oauth-client-card {
+			padding: var(--wa-space-m);
+			background: var(--wa-color-surface-alt);
+			border-radius: var(--wa-radius-m);
+		}
+	</style>
+}
+
+templ settingsScripts() {
+	<script>
+		(function() {
+			const addEmailDialog = document.getElementById('add-email-dialog');
+			const addPhoneDialog = document.getElementById('add-phone-dialog');
+			const addDeviceDialog = document.getElementById('add-device-dialog');
+			const generateKeyDialog = document.getElementById('generate-key-dialog');
+			const addWebhookDialog = document.getElementById('add-webhook-dialog');
+
+			document.getElementById('add-email-btn')?.addEventListener('click', () => {
+				addEmailDialog.open = true;
+			});
+
+			document.getElementById('add-phone-btn')?.addEventListener('click', () => {
+				addPhoneDialog.open = true;
+			});
+
+			document.getElementById('add-device-btn')?.addEventListener('click', () => {
+				addDeviceDialog.open = true;
+			});
+
+			document.getElementById('generate-key-btn')?.addEventListener('click', () => {
+				generateKeyDialog.open = true;
+			});
+
+			document.getElementById('add-webhook-btn')?.addEventListener('click', () => {
+				addWebhookDialog.open = true;
+			});
+
+			document.querySelectorAll('[data-dialog="close"]').forEach(btn => {
+				btn.addEventListener('click', () => {
+					btn.closest('wa-dialog').open = false;
+				});
+			});
+		})();
+	</script>
+}
diff --git a/views/settings_templ.go b/views/settings_templ.go
new file mode 100644
index 0000000..d4589bb
--- /dev/null
+++ b/views/settings_templ.go
@@ -0,0 +1,2152 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.3.977
+package views
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import templruntime "github.com/a-h/templ/runtime"
+
+import (
+	"nebula/layouts"
+	"nebula/models"
+	"strconv"
+	"strings"
+	"time"
+)
+
+func SettingsPage(data models.SettingsData, activeTab string) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Var2 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+			templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+			templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+			if !templ_7745c5c3_IsBuffer {
+				defer func() {
+					templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+					if templ_7745c5c3_Err == nil {
+						templ_7745c5c3_Err = templ_7745c5c3_BufErr
+					}
+				}()
+			}
+			ctx = templ.InitializeContext(ctx)
+			templ_7745c5c3_Err = settingsStyles().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <header class=\"page-header\"><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-xl\">Settings</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Manage your account preferences and security</span></div></header><div class=\"settings-container\"><wa-tab-group class=\"settings-tabs\"><wa-tab panel=\"profile\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if activeTab == "" || activeTab == "profile" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " active")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "><wa-icon name=\"user\"></wa-icon> Profile</wa-tab> <wa-tab panel=\"devices\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if activeTab == "devices" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " active")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "><wa-icon name=\"laptop\"></wa-icon> Devices</wa-tab> <wa-tab panel=\"oauth\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if activeTab == "oauth" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " active")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "><wa-icon name=\"key\"></wa-icon> OAuth</wa-tab> <wa-tab panel=\"notifications\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if activeTab == "notifications" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " active")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "><wa-icon name=\"bell\"></wa-icon> Notifications</wa-tab> <wa-tab panel=\"emails\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if activeTab == "emails" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " active")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "><wa-icon name=\"envelope\"></wa-icon> Emails</wa-tab> <wa-tab panel=\"phones\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if activeTab == "phones" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, " active")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "><wa-icon name=\"phone\"></wa-icon> Phone Numbers</wa-tab> <wa-tab panel=\"developer\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if activeTab == "developer" {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " active")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "><wa-icon name=\"code\"></wa-icon> Developer</wa-tab> <wa-tab-panel name=\"profile\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = ProfileTab(data.Profile).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</wa-tab-panel> <wa-tab-panel name=\"devices\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = DevicesTab(data.Devices).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</wa-tab-panel> <wa-tab-panel name=\"oauth\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = OAuthTab(data.OAuth).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</wa-tab-panel> <wa-tab-panel name=\"notifications\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = NotificationsTab(data.Notifications).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</wa-tab-panel> <wa-tab-panel name=\"emails\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = EmailsTab(data.Emails).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "</wa-tab-panel> <wa-tab-panel name=\"phones\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = PhonesTab(data.Phones, data.SMSSettings).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</wa-tab-panel> <wa-tab-panel name=\"developer\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = DeveloperTab(data.Developer).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</wa-tab-panel></wa-tab-group></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = AddEmailDialog().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = AddPhoneDialog().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = AddDeviceDialog().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = GenerateKeyDialog().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = AddWebhookDialog().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = settingsScripts().Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			return nil
+		})
+		templ_7745c5c3_Err = layouts.DashboardLayout("Settings - Sonr", layouts.WalletUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}, "settings").Render(templ.WithChildren(ctx, templ_7745c5c3_Var2), templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func ProfileTab(profile models.ProfileSettings) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div class=\"wa-stack wa-gap-xl\"><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Avatar</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Your public profile image</p></div><div class=\"avatar-upload\"><wa-avatar initials=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(profile.Initials)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 91, Col: 43}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\" style=\"background: linear-gradient(135deg, #17c2ff, #0090ff);\"></wa-avatar><div class=\"wa-stack wa-gap-s\"><div class=\"wa-cluster wa-gap-s\"><wa-button size=\"small\" variant=\"neutral\" appearance=\"outlined\"><wa-icon slot=\"start\" name=\"upload\"></wa-icon> Upload</wa-button> <wa-button size=\"small\" variant=\"neutral\" appearance=\"plain\">Remove</wa-button></div><span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">JPG, PNG or GIF. Max 2MB.</span></div></div></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Display Name</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Shown on your public profile</p></div><wa-input value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var5 string
+		templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(profile.DisplayName)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 111, Col: 41}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" placeholder=\"Enter display name\" name=\"profile-display-name\"></wa-input></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Username</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Your unique identifier</p></div><wa-input value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(profile.Username)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 120, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" placeholder=\"Enter username\" name=\"profile-username\"><span slot=\"prefix\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs("@")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 121, Col: 30}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</span></wa-input></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Bio</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Brief description for your profile</p></div><wa-textarea rows=\"3\" placeholder=\"Tell us about yourself...\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 string
+		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(profile.Bio)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 131, Col: 85}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "\" name=\"profile-bio\"></wa-textarea></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Website</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Your personal or project website</p></div><wa-input type=\"url\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var9 string
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(profile.Website)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 140, Col: 48}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "\" placeholder=\"https://example.com\" name=\"profile-website\"><wa-icon slot=\"prefix\" name=\"globe\"></wa-icon></wa-input></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Social Links</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Connect your social accounts</p></div><div class=\"wa-stack wa-gap-m\"><wa-input placeholder=\"twitter.com/username\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(profile.SocialLinks.Twitter)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 152, Col: 85}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\" name=\"profile-twitter\"><wa-icon slot=\"prefix\" name=\"x-twitter\" variant=\"brand\"></wa-icon></wa-input> <wa-input placeholder=\"github.com/username\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(profile.SocialLinks.GitHub)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 155, Col: 83}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, "\" name=\"profile-github\"><wa-icon slot=\"prefix\" name=\"github\" variant=\"brand\"></wa-icon></wa-input> <wa-input placeholder=\"discord.gg/invite\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var12 string
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(profile.SocialLinks.Discord)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 158, Col: 82}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, "\" name=\"profile-discord\"><wa-icon slot=\"prefix\" name=\"discord\" variant=\"brand\"></wa-icon></wa-input></div></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Profile Visibility</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Control who can see your profile</p></div><wa-radio-group value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(profile.Visibility)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 170, Col: 46}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, "\" name=\"profile-visibility\"><wa-radio value=\"public\"><div class=\"wa-stack wa-gap-0\"><span>Public</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">Anyone can view your profile</span></div></wa-radio> <wa-radio value=\"connections\"><div class=\"wa-stack wa-gap-0\"><span>Connections Only</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">Only connected apps and users</span></div></wa-radio> <wa-radio value=\"private\"><div class=\"wa-stack wa-gap-0\"><span>Private</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">Only you can see your profile</span></div></wa-radio></wa-radio-group></div></div><div class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end;\"><wa-button variant=\"neutral\" appearance=\"outlined\">Cancel</wa-button> <wa-button variant=\"brand\" hx-post=\"/api/settings/profile\" hx-include=\"[name^='profile-']\">Save Changes</wa-button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func DevicesTab(devices []models.Device) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, "<div class=\"wa-stack wa-gap-xl\"><div class=\"wa-flank\"><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-m\">Linked Devices</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Passkeys and security keys registered with your account</span></div><wa-button size=\"small\" variant=\"brand\" id=\"add-device-btn\"><wa-icon slot=\"start\" name=\"plus\"></wa-icon> Add Device</wa-button></div><div class=\"wa-stack wa-gap-m\" id=\"devices-list\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, device := range devices {
+			templ_7745c5c3_Err = DeviceItem(device).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "</div><wa-callout variant=\"neutral\"><wa-icon slot=\"icon\" name=\"shield-check\"></wa-icon><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-xs\">Security Recommendation</span> <span class=\"wa-caption-s\">Register at least 2 devices to ensure account recovery if one is lost.</span></div></wa-callout></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func DeviceItem(device models.Device) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var15 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var15 == nil {
+			templ_7745c5c3_Var15 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "<div class=\"device-item\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var16 string
+		templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs("device-" + device.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 227, Col: 52}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\"><div class=\"device-icon\"><wa-icon name=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var17 string
+		templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(deviceIcon(device.Type))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 229, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\" style=\"font-size: 24px;\"></wa-icon></div><div class=\"device-info\"><div class=\"wa-stack wa-gap-0\"><div class=\"wa-cluster wa-gap-xs\"><span class=\"wa-heading-s\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var18 string
+		templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(device.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 234, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if device.IsCurrent {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<wa-badge variant=\"success\" pill>Current</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 46, "</div><span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if device.Browser != "" {
+			var templ_7745c5c3_Var19 string
+			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(device.Browser)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 241, Col: 22}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 47, " on ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var20 string
+			templ_7745c5c3_Var20, templ_7745c5c3_Err = templ.JoinStringErrs(device.OS)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 241, Col: 39}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var20))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 48, " -  ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		var templ_7745c5c3_Var21 string
+		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(device.AuthType)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 243, Col: 22}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 49, "</span></div></div><div class=\"wa-stack wa-gap-0 wa-align-items-end\"><span class=\"wa-caption-s\">Added ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var22 string
+		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(formatDate(device.AddedAt))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 248, Col: 64}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 50, "</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">Last used: ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(formatRelativeTime(device.LastUsed))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 249, Col: 123}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 51, "</span></div><wa-dropdown><wa-icon-button slot=\"trigger\" name=\"ellipsis-vertical\" label=\"Options\"></wa-icon-button> <wa-dropdown-item><wa-icon slot=\"icon\" name=\"pen\"></wa-icon> Rename</wa-dropdown-item> <wa-divider></wa-divider> <wa-dropdown-item style=\"color: var(--wa-color-danger);\" hx-delete=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var24 string
+		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs("/api/devices/" + device.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 260, Col: 43}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 52, "\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs("#device-" + device.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 261, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 53, "\" hx-swap=\"delete\" hx-confirm=\"Remove this device?\"><wa-icon slot=\"icon\" name=\"trash\"></wa-icon> Remove</wa-dropdown-item></wa-dropdown></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func deviceIcon(deviceType string) string {
+	switch deviceType {
+	case "laptop":
+		return "laptop"
+	case "mobile":
+		return "mobile"
+	case "key":
+		return "key"
+	case "desktop":
+		return "desktop"
+	default:
+		return "laptop"
+	}
+}
+
+func OAuthTab(oauth models.OAuthSettings) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var26 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var26 == nil {
+			templ_7745c5c3_Var26 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 54, "<div class=\"wa-stack wa-gap-xl\"><div class=\"wa-flank\"><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-m\">OAuth Settings</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Configure your identity provider settings</span></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Default Scopes</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">Permissions granted by default</p></div><div class=\"wa-stack wa-gap-s\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, scope := range oauth.DefaultScopes {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 55, "<wa-checkbox")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if scope.Enabled {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 56, " checked")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			if scope.Required {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 57, " disabled")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 58, "><div class=\"wa-stack wa-gap-0\"><span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var27 string
+			templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(scope.Name)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 305, Col: 26}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 59, "</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var28 string
+			templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(scope.Description)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 306, Col: 99}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 60, "</span></div></wa-checkbox>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 61, "</div></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Session Duration</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">How long OAuth sessions remain valid</p></div><wa-select value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var29 string
+		templ_7745c5c3_Var29, templ_7745c5c3_Err = templ.JoinStringErrs(oauth.SessionDuration)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 319, Col: 44}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var29))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 62, "\"><wa-option value=\"1h\">1 hour</wa-option> <wa-option value=\"24h\">24 hours</wa-option> <wa-option value=\"7d\">7 days</wa-option> <wa-option value=\"30d\">30 days</wa-option> <wa-option value=\"never\">Never expire</wa-option></wa-select></div></div><div class=\"form-section\"><div class=\"form-row\"><div class=\"form-label\"><span class=\"wa-heading-s\">Consent Prompt</span><p class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500); margin: var(--wa-space-2xs) 0 0;\">When to show permission dialogs</p></div><wa-radio-group value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var30 string
+		templ_7745c5c3_Var30, templ_7745c5c3_Err = templ.JoinStringErrs(oauth.ConsentPrompt)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 334, Col: 47}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var30))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 63, "\"><wa-radio value=\"always\">Always prompt for consent</wa-radio> <wa-radio value=\"first\">Only on first connection</wa-radio> <wa-radio value=\"scope\">When new scopes requested</wa-radio></wa-radio-group></div></div><wa-divider></wa-divider><div class=\"wa-stack wa-gap-m\"><div class=\"wa-flank\"><span class=\"wa-heading-m\">Authorized Clients</span> <wa-button size=\"small\" variant=\"neutral\" appearance=\"outlined\">View All</wa-button></div><div class=\"wa-stack wa-gap-s\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, client := range oauth.Clients {
+			templ_7745c5c3_Err = AuthorizedClientCard(client).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 64, "</div></div><div class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end;\"><wa-button variant=\"neutral\" appearance=\"outlined\">Cancel</wa-button> <wa-button variant=\"brand\">Save Changes</wa-button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func AuthorizedClientCard(client models.AuthorizedClient) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var31 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var31 == nil {
+			templ_7745c5c3_Var31 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 65, "<div class=\"oauth-client-card\"><div class=\"wa-flank\"><div class=\"wa-cluster wa-gap-m\"><wa-avatar initials=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var32 string
+		templ_7745c5c3_Var32, templ_7745c5c3_Err = templ.JoinStringErrs(client.Initials)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 364, Col: 41}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var32))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 66, "\" style=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var33 string
+		templ_7745c5c3_Var33, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("--size: 40px; background: " + client.Color + ";")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 364, Col: 101}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var33))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 67, "\"></wa-avatar><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-s\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var34 string
+		templ_7745c5c3_Var34, templ_7745c5c3_Err = templ.JoinStringErrs(client.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 366, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var34))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 68, "</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var35 string
+		templ_7745c5c3_Var35, templ_7745c5c3_Err = templ.JoinStringErrs(client.Domain)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 367, Col: 92}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var35))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 69, "</span></div></div><div class=\"wa-cluster wa-gap-s\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if client.Status == "active" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 70, "<wa-badge variant=\"success\" pill>Active</wa-badge> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 71, "<wa-badge variant=\"neutral\" pill>Idle</wa-badge> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 72, "<wa-button size=\"small\" variant=\"danger\" appearance=\"plain\" hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var36 string
+		templ_7745c5c3_Var36, templ_7745c5c3_Err = templ.JoinStringErrs("/api/oauth/clients/" + client.ID + "/revoke")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 376, Col: 119}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var36))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 73, "\" hx-swap=\"none\">Revoke</wa-button></div></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func NotificationsTab(prefs models.NotificationPrefs) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var37 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var37 == nil {
+			templ_7745c5c3_Var37 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 74, "<div class=\"wa-stack wa-gap-xl\"><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-m\">Notification Preferences</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Choose how and when you receive notifications</span></div><wa-card><span slot=\"header\" class=\"wa-heading-s\">Security Alerts</span><div class=\"wa-stack\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, item := range prefs.SecurityAlerts {
+			templ_7745c5c3_Err = NotificationRow(item).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 75, "</div></wa-card> <wa-card><span slot=\"header\" class=\"wa-heading-s\">Transaction Notifications</span><div class=\"wa-stack\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, item := range prefs.Transactions {
+			templ_7745c5c3_Err = NotificationRow(item).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 76, "</div></wa-card> <wa-card><span slot=\"header\" class=\"wa-heading-s\">App Notifications</span><div class=\"wa-stack\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, item := range prefs.Apps {
+			templ_7745c5c3_Err = NotificationRow(item).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 77, "</div></wa-card> <wa-card><span slot=\"header\" class=\"wa-heading-s\">Marketing & Updates</span><div class=\"wa-stack\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, item := range prefs.Marketing {
+			templ_7745c5c3_Err = NotificationRow(item).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 78, "</div></wa-card><div class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end;\"><wa-button variant=\"brand\" hx-post=\"/api/settings/notifications\" hx-swap=\"none\">Save Preferences</wa-button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func NotificationRow(item models.NotificationItem) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var38 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var38 == nil {
+			templ_7745c5c3_Var38 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 79, "<div class=\"notification-row\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-xs\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var39 string
+		templ_7745c5c3_Var39, templ_7745c5c3_Err = templ.JoinStringErrs(item.Title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 429, Col: 43}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var39))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 80, "</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var40 string
+		templ_7745c5c3_Var40, templ_7745c5c3_Err = templ.JoinStringErrs(item.Description)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 430, Col: 92}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var40))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 81, "</span></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if item.Threshold > 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 82, "<div class=\"wa-cluster wa-gap-s\"><wa-input type=\"number\" value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var41 string
+			templ_7745c5c3_Var41, templ_7745c5c3_Err = templ.JoinStringErrs(itoa(item.Threshold))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 434, Col: 56}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var41))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 83, "\" size=\"small\" style=\"width: 100px;\"><span slot=\"suffix\">USD</span></wa-input> <wa-switch")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if item.Enabled {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 84, " checked")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 85, " hx-post=\"/api/settings/notifications\" hx-vals=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var42 string
+			templ_7745c5c3_Var42, templ_7745c5c3_Err = templ.JoinStringErrs(`{"key":"` + item.Key + `"}`)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 437, Col: 117}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var42))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 86, "\" hx-swap=\"none\"></wa-switch></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 87, "<wa-switch")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if item.Enabled {
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 88, " checked")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 89, " hx-post=\"/api/settings/notifications\" hx-vals=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var43 string
+			templ_7745c5c3_Var43, templ_7745c5c3_Err = templ.JoinStringErrs(`{"key":"` + item.Key + `"}`)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 440, Col: 116}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var43))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 90, "\" hx-swap=\"none\"></wa-switch>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 91, "</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func EmailsTab(emails []models.Email) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var44 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var44 == nil {
+			templ_7745c5c3_Var44 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 92, "<div class=\"wa-stack wa-gap-xl\"><div class=\"wa-flank\"><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-m\">Email Addresses</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Manage email addresses linked to your account</span></div><wa-button size=\"small\" variant=\"brand\" id=\"add-email-btn\"><wa-icon slot=\"start\" name=\"plus\"></wa-icon> Add Email</wa-button></div><div class=\"wa-stack wa-gap-m\" id=\"emails-list\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, email := range emails {
+			templ_7745c5c3_Err = EmailItem(email).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 93, "</div><wa-callout variant=\"neutral\"><wa-icon slot=\"icon\" name=\"circle-info\"></wa-icon> <span class=\"wa-caption-s\">Your primary email is used for account recovery and important notifications. You must have at least one verified email.</span></wa-callout></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func EmailItem(email models.Email) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var45 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var45 == nil {
+			templ_7745c5c3_Var45 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 94, "<div class=\"contact-item\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var46 string
+		templ_7745c5c3_Var46, templ_7745c5c3_Err = templ.JoinStringErrs("email-" + email.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 470, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var46))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 95, "\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if email.IsVerified {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 96, "<wa-icon name=\"envelope\" style=\"font-size: 20px; color: var(--wa-color-neutral-500);\"></wa-icon>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 97, "<wa-icon name=\"envelope\" style=\"font-size: 20px; color: var(--wa-color-warning);\"></wa-icon>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 98, "<div class=\"wa-stack wa-gap-0\" style=\"flex: 1;\"><div class=\"wa-cluster wa-gap-xs\"><span class=\"wa-heading-s\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var47 string
+		templ_7745c5c3_Var47, templ_7745c5c3_Err = templ.JoinStringErrs(email.Address)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 478, Col: 46}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var47))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 99, "</span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if email.IsPrimary {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 100, "<wa-badge variant=\"success\" pill>Primary</wa-badge> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if email.IsVerified {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 101, "<wa-badge variant=\"brand\" pill>Verified</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 102, "<wa-badge variant=\"warning\" pill>Pending</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 103, "</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if email.IsVerified {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 104, "<span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Added ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var48 string
+			templ_7745c5c3_Var48, templ_7745c5c3_Err = templ.JoinStringErrs(formatDate(email.AddedAt))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 489, Col: 108}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var48))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 105, "</span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 106, "<span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Verification sent - check your inbox</span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 107, "</div><wa-dropdown><wa-icon-button slot=\"trigger\" name=\"ellipsis-vertical\" label=\"Options\"></wa-icon-button> <wa-dropdown-item")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if email.IsPrimary {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 108, " disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 109, "><wa-icon slot=\"icon\" name=\"star\"></wa-icon> Set as Primary</wa-dropdown-item> <wa-dropdown-item hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var49 string
+		templ_7745c5c3_Var49, templ_7745c5c3_Err = templ.JoinStringErrs("/api/settings/emails/" + email.ID + "/resend")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 500, Col: 77}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var49))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 110, "\" hx-swap=\"none\"><wa-icon slot=\"icon\" name=\"paper-plane\"></wa-icon> Resend Verification</wa-dropdown-item> <wa-divider></wa-divider> <wa-dropdown-item")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if email.IsPrimary {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 111, " disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 112, " style=\"color: var(--wa-color-danger);\" hx-delete=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var50 string
+		templ_7745c5c3_Var50, templ_7745c5c3_Err = templ.JoinStringErrs("/api/settings/emails/" + email.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 508, Col: 50}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var50))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 113, "\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var51 string
+		templ_7745c5c3_Var51, templ_7745c5c3_Err = templ.JoinStringErrs("#email-" + email.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 509, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var51))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 114, "\" hx-swap=\"delete\"><wa-icon slot=\"icon\" name=\"trash\"></wa-icon> Remove</wa-dropdown-item></wa-dropdown></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func PhonesTab(phones []models.Phone, smsSettings models.SMSSettings) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var52 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var52 == nil {
+			templ_7745c5c3_Var52 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 115, "<div class=\"wa-stack wa-gap-xl\"><div class=\"wa-flank\"><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-m\">Phone Numbers</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Manage phone numbers for 2FA and recovery</span></div><wa-button size=\"small\" variant=\"brand\" id=\"add-phone-btn\"><wa-icon slot=\"start\" name=\"plus\"></wa-icon> Add Phone</wa-button></div><div class=\"wa-stack wa-gap-m\" id=\"phones-list\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, phone := range phones {
+			templ_7745c5c3_Err = PhoneItem(phone).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 116, "</div><wa-card><span slot=\"header\" class=\"wa-heading-s\">SMS Authentication</span><div class=\"wa-stack\"><div class=\"notification-row\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-xs\">Enable SMS 2FA</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Receive codes via SMS for high-risk actions</span></div><wa-switch")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if smsSettings.Enabled {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 117, " checked")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 118, "></wa-switch></div><div class=\"notification-row\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-xs\">SMS recovery codes</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Allow account recovery via SMS</span></div><wa-switch")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if smsSettings.RecoveryCodes {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 119, " checked")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 120, "></wa-switch></div></div></wa-card> <wa-callout variant=\"warning\"><wa-icon slot=\"icon\" name=\"triangle-alert\"></wa-icon><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-xs\">SMS Security Notice</span> <span class=\"wa-caption-s\">SMS-based authentication is less secure than passkeys. We recommend using passkeys as your primary authentication method.</span></div></wa-callout></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func PhoneItem(phone models.Phone) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var53 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var53 == nil {
+			templ_7745c5c3_Var53 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 121, "<div class=\"contact-item\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var54 string
+		templ_7745c5c3_Var54, templ_7745c5c3_Err = templ.JoinStringErrs("phone-" + phone.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 566, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var54))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 122, "\"><wa-icon name=\"phone\" style=\"font-size: 20px; color: var(--wa-color-neutral-500);\"></wa-icon><div class=\"wa-stack wa-gap-0\" style=\"flex: 1;\"><div class=\"wa-cluster wa-gap-xs\"><span class=\"wa-heading-s\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var55 string
+		templ_7745c5c3_Var55, templ_7745c5c3_Err = templ.JoinStringErrs(phone.Number)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 570, Col: 45}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var55))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 123, "</span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if phone.IsPrimary {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 124, "<wa-badge variant=\"success\" pill>Primary</wa-badge> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		if phone.IsVerified {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 125, "<wa-badge variant=\"brand\" pill>Verified</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 126, "</div><span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Added ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var56 string
+		templ_7745c5c3_Var56, templ_7745c5c3_Err = templ.JoinStringErrs(formatDate(phone.AddedAt))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 579, Col: 37}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var56))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 127, " ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if phone.Use2FA {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 128, "- Used for 2FA")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 129, "</span></div><wa-dropdown><wa-icon-button slot=\"trigger\" name=\"ellipsis-vertical\" label=\"Options\"></wa-icon-button> <wa-dropdown-item")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if phone.IsPrimary {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 130, " disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 131, "><wa-icon slot=\"icon\" name=\"star\"></wa-icon> Set as Primary</wa-dropdown-item> <wa-dropdown-item hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var57 string
+		templ_7745c5c3_Var57, templ_7745c5c3_Err = templ.JoinStringErrs("/api/settings/phones/" + phone.ID + "/test")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 591, Col: 75}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var57))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 132, "\" hx-swap=\"none\"><wa-icon slot=\"icon\" name=\"message\"></wa-icon> Send Test SMS</wa-dropdown-item> <wa-divider></wa-divider> <wa-dropdown-item")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if phone.IsPrimary {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 133, " disabled")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 134, " style=\"color: var(--wa-color-danger);\" hx-delete=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var58 string
+		templ_7745c5c3_Var58, templ_7745c5c3_Err = templ.JoinStringErrs("/api/settings/phones/" + phone.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 599, Col: 50}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var58))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 135, "\" hx-target=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var59 string
+		templ_7745c5c3_Var59, templ_7745c5c3_Err = templ.JoinStringErrs("#phone-" + phone.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 600, Col: 36}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var59))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 136, "\" hx-swap=\"delete\"><wa-icon slot=\"icon\" name=\"trash\"></wa-icon> Remove</wa-dropdown-item></wa-dropdown></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func DeveloperTab(dev models.DeveloperSettings) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var60 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var60 == nil {
+			templ_7745c5c3_Var60 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 137, "<div class=\"wa-stack wa-gap-xl\"><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-m\">Developer Settings</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">API access and integration options</span></div><wa-card><div slot=\"header\" class=\"wa-flank\"><span class=\"wa-heading-s\">API Keys</span> <wa-button size=\"small\" variant=\"neutral\" appearance=\"outlined\" id=\"generate-key-btn\"><wa-icon slot=\"start\" name=\"plus\"></wa-icon> Generate Key</wa-button></div><div class=\"wa-stack wa-gap-m\" id=\"api-keys-list\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, key := range dev.APIKeys {
+			templ_7745c5c3_Err = APIKeyCard(key).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 138, "</div></wa-card> <wa-card><div slot=\"header\" class=\"wa-flank\"><span class=\"wa-heading-s\">Webhooks</span> <wa-button size=\"small\" variant=\"neutral\" appearance=\"outlined\" id=\"add-webhook-btn\"><wa-icon slot=\"start\" name=\"plus\"></wa-icon> Add Endpoint</wa-button></div><div class=\"wa-stack wa-gap-m\" id=\"webhooks-list\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, wh := range dev.Webhooks {
+			templ_7745c5c3_Err = WebhookCard(wh).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 139, "</div></wa-card>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = OAuthAppConfigCard(dev.OAuthApp).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 140, "<wa-card><span slot=\"header\" class=\"wa-heading-s\">Developer Mode</span><div class=\"wa-stack\"><div class=\"notification-row\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-xs\">Enable debug logging</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Log detailed API requests and responses</span></div><wa-switch")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if dev.DebugMode {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 141, " checked")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 142, "></wa-switch></div><div class=\"notification-row\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-xs\">Test mode</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Use testnet for all transactions</span></div><wa-switch")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if dev.TestMode {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 143, " checked")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 144, "></wa-switch></div><div class=\"notification-row\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-xs\">Show raw responses</span> <span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Display JSON in UI for debugging</span></div><wa-switch")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if dev.ShowRaw {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 145, " checked")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 146, "></wa-switch></div></div></wa-card> <wa-callout variant=\"neutral\"><wa-icon slot=\"icon\" name=\"book\"></wa-icon><div class=\"wa-stack wa-gap-2xs\"><span class=\"wa-heading-xs\">API Documentation</span> <span class=\"wa-caption-s\">View our <a href=\"#\" style=\"color: var(--wa-color-primary);\">API reference</a> and  <a href=\"#\" style=\"color: var(--wa-color-primary);\">integration guides</a> to get started.</span></div></wa-callout><div class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end;\"><wa-button variant=\"neutral\" appearance=\"outlined\">Cancel</wa-button> <wa-button variant=\"brand\">Save Changes</wa-button></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func APIKeyCard(key models.APIKey) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var61 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var61 == nil {
+			templ_7745c5c3_Var61 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 147, "<div class=\"wa-stack wa-gap-s\"><div class=\"wa-flank\"><div class=\"wa-stack wa-gap-0\"><span class=\"wa-heading-xs\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var62 string
+		templ_7745c5c3_Var62, templ_7745c5c3_Err = templ.JoinStringErrs(key.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 692, Col: 42}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var62))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 148, "</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">Created ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var63 string
+		templ_7745c5c3_Var63, templ_7745c5c3_Err = templ.JoinStringErrs(formatDate(key.CreatedAt))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 693, Col: 111}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var63))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 149, "</span></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if key.Environment == "live" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 150, "<wa-badge variant=\"success\" pill>Active</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 151, "<wa-badge variant=\"neutral\" pill>Test Mode</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 152, "</div><div class=\"api-key-display\"><span>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var64 string
+		templ_7745c5c3_Var64, templ_7745c5c3_Err = templ.JoinStringErrs(key.KeyPreview)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 702, Col: 25}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var64))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 153, "</span> <wa-copy-button value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var65 string
+		templ_7745c5c3_Var65, templ_7745c5c3_Err = templ.JoinStringErrs(key.KeyFull)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 703, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var65))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 154, "\"></wa-copy-button> <wa-tooltip content=\"Reveal key\"><wa-icon-button name=\"eye\" label=\"Reveal\"></wa-icon-button></wa-tooltip></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func WebhookCard(wh models.Webhook) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var66 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var66 == nil {
+			templ_7745c5c3_Var66 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 155, "<div class=\"webhook-item\"><div class=\"wa-flank\"><div class=\"wa-stack wa-gap-0\"><div class=\"wa-cluster wa-gap-xs\"><span class=\"wa-heading-xs\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var67 string
+		templ_7745c5c3_Var67, templ_7745c5c3_Err = templ.JoinStringErrs(wh.URL)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 716, Col: 41}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var67))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 156, "</span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if wh.Status == "active" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 157, "<wa-badge variant=\"success\" pill>Active</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 158, "<wa-badge variant=\"warning\" pill>Failing</wa-badge>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 159, "</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if wh.Status == "failing" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 160, "<span class=\"wa-caption-xs\" style=\"color: var(--wa-color-danger);\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var68 string
+			templ_7745c5c3_Var68, templ_7745c5c3_Err = templ.JoinStringErrs(formatEvents(wh.Events))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 724, Col: 97}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var68))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 161, " events - ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var69 string
+			templ_7745c5c3_Var69, templ_7745c5c3_Err = templ.JoinStringErrs(itoa(wh.FailureCount))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 724, Col: 132}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var69))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 162, " failures in last hour</span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 163, "<span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var70 string
+			templ_7745c5c3_Var70, templ_7745c5c3_Err = templ.JoinStringErrs(formatEvents(wh.Events))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 726, Col: 102}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var70))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 164, " events - Last triggered ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var71 string
+			templ_7745c5c3_Var71, templ_7745c5c3_Err = templ.JoinStringErrs(formatRelativeTime(wh.LastTriggered))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 726, Col: 167}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var71))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 165, "</span>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 166, "</div><wa-dropdown><wa-icon-button slot=\"trigger\" name=\"ellipsis-vertical\" label=\"Options\"></wa-icon-button> <wa-dropdown-item><wa-icon slot=\"icon\" name=\"pen\"></wa-icon> Edit</wa-dropdown-item> <wa-dropdown-item hx-post=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var72 string
+		templ_7745c5c3_Var72, templ_7745c5c3_Err = templ.JoinStringErrs("/api/webhooks/" + wh.ID + "/test")
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 735, Col: 66}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var72))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 167, "\" hx-swap=\"none\"><wa-icon slot=\"icon\" name=\"paper-plane\"></wa-icon> Send Test</wa-dropdown-item> <wa-dropdown-item><wa-icon slot=\"icon\" name=\"clock-rotate-left\"></wa-icon> View Logs</wa-dropdown-item> <wa-divider></wa-divider> <wa-dropdown-item style=\"color: var(--wa-color-danger);\" hx-delete=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var73 string
+		templ_7745c5c3_Var73, templ_7745c5c3_Err = templ.JoinStringErrs("/api/webhooks/" + wh.ID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 744, Col: 97}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var73))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 168, "\" hx-target=\"closest .webhook-item\" hx-swap=\"delete\"><wa-icon slot=\"icon\" name=\"trash\"></wa-icon> Delete</wa-dropdown-item></wa-dropdown></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func OAuthAppConfigCard(config models.OAuthAppConfig) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var74 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var74 == nil {
+			templ_7745c5c3_Var74 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 169, "<wa-card><span slot=\"header\" class=\"wa-heading-s\">OAuth Application</span><div class=\"wa-stack wa-gap-l\"><div class=\"form-row\" style=\"grid-template-columns: 140px 1fr;\"><span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Client ID</span><div class=\"wa-cluster wa-gap-s\"><code style=\"font-family: var(--wa-font-mono); font-size: var(--wa-font-size-s);\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var75 string
+		templ_7745c5c3_Var75, templ_7745c5c3_Err = templ.JoinStringErrs(config.ClientID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 760, Col: 104}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var75))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 170, "</code> <wa-copy-button value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var76 string
+		templ_7745c5c3_Var76, templ_7745c5c3_Err = templ.JoinStringErrs(config.ClientID)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 761, Col: 44}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var76))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 171, "\"></wa-copy-button></div></div><div class=\"form-row\" style=\"grid-template-columns: 140px 1fr;\"><span class=\"wa-caption-s\" style=\"color: var(--wa-color-neutral-500);\">Client Secret</span><div class=\"wa-cluster wa-gap-s\"><code style=\"font-family: var(--wa-font-mono); font-size: var(--wa-font-size-s);\">••••••••••••••••</code> <wa-copy-button value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var77 string
+		templ_7745c5c3_Var77, templ_7745c5c3_Err = templ.JoinStringErrs(config.ClientSecret)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 768, Col: 48}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var77))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 172, "\"></wa-copy-button> <wa-button size=\"small\" appearance=\"plain\">Regenerate</wa-button></div></div><wa-divider></wa-divider><div class=\"wa-stack wa-gap-s\"><span class=\"wa-heading-xs\">Redirect URIs</span> ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, uri := range config.RedirectURIs {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 173, "<wa-input value=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var78 string
+			templ_7745c5c3_Var78, templ_7745c5c3_Err = templ.JoinStringErrs(uri)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 776, Col: 26}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var78))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 174, "\" placeholder=\"https://example.com/callback\"><wa-icon-button slot=\"suffix\" name=\"trash\" label=\"Remove\"></wa-icon-button></wa-input> ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 175, "<wa-button size=\"small\" appearance=\"plain\"><wa-icon slot=\"start\" name=\"plus\"></wa-icon> Add URI</wa-button></div></div></wa-card>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func AddEmailDialog() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var79 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var79 == nil {
+			templ_7745c5c3_Var79 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 176, "<wa-dialog label=\"Add Email Address\" id=\"add-email-dialog\" style=\"--width: 420px;\"><div class=\"wa-stack wa-gap-l\"><wa-input type=\"email\" label=\"Email Address\" placeholder=\"you@example.com\" autofocus name=\"email\"><wa-icon slot=\"prefix\" name=\"envelope\"></wa-icon></wa-input> <wa-callout variant=\"neutral\"><wa-icon slot=\"icon\" name=\"circle-info\"></wa-icon> <span class=\"wa-caption-s\">We'll send a verification link to this address.</span></wa-callout></div><div slot=\"footer\" class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end; width: 100%;\"><wa-button variant=\"neutral\" appearance=\"outlined\" data-dialog=\"close\">Cancel</wa-button> <wa-button variant=\"brand\" hx-post=\"/api/settings/emails\" hx-target=\"#emails-list\" hx-swap=\"beforeend\">Send Verification</wa-button></div></wa-dialog>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func AddPhoneDialog() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var80 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var80 == nil {
+			templ_7745c5c3_Var80 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 177, "<wa-dialog label=\"Add Phone Number\" id=\"add-phone-dialog\" style=\"--width: 420px;\"><div class=\"wa-stack wa-gap-l\"><div class=\"wa-cluster wa-gap-s\"><wa-select value=\"+1\" style=\"width: 100px;\" name=\"country-code\"><wa-option value=\"+1\">+1</wa-option> <wa-option value=\"+44\">+44</wa-option> <wa-option value=\"+49\">+49</wa-option> <wa-option value=\"+33\">+33</wa-option> <wa-option value=\"+81\">+81</wa-option></wa-select> <wa-input type=\"tel\" label=\"Phone Number\" placeholder=\"(555) 123-4567\" style=\"flex: 1;\" name=\"phone\"><wa-icon slot=\"prefix\" name=\"phone\"></wa-icon></wa-input></div><wa-callout variant=\"neutral\"><wa-icon slot=\"icon\" name=\"circle-info\"></wa-icon> <span class=\"wa-caption-s\">We'll send a verification code via SMS.</span></wa-callout></div><div slot=\"footer\" class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end; width: 100%;\"><wa-button variant=\"neutral\" appearance=\"outlined\" data-dialog=\"close\">Cancel</wa-button> <wa-button variant=\"brand\" hx-post=\"/api/settings/phones\" hx-target=\"#phones-list\" hx-swap=\"beforeend\">Send Code</wa-button></div></wa-dialog>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func AddDeviceDialog() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var81 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var81 == nil {
+			templ_7745c5c3_Var81 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 178, "<wa-dialog label=\"Add Device\" id=\"add-device-dialog\" style=\"--width: 480px;\"><div class=\"wa-stack wa-gap-l\" style=\"text-align: center;\"><wa-icon name=\"fingerprint\" style=\"font-size: 64px; color: var(--wa-color-primary);\"></wa-icon><div class=\"wa-stack wa-gap-xs\"><span class=\"wa-heading-m\">Register a Passkey</span> <span class=\"wa-caption-m\" style=\"color: var(--wa-color-neutral-500);\">Use your device's built-in authenticator (Face ID, Touch ID, Windows Hello) or a security key.</span></div><wa-button variant=\"brand\" size=\"large\" style=\"width: 100%;\" id=\"register-passkey-btn\"><wa-icon slot=\"start\" name=\"plus\"></wa-icon> Register Device</wa-button> <wa-divider>or</wa-divider> <wa-button variant=\"neutral\" appearance=\"outlined\" style=\"width: 100%;\" id=\"register-security-key-btn\"><wa-icon slot=\"start\" name=\"key\"></wa-icon> Use Security Key</wa-button></div><div slot=\"footer\" class=\"wa-cluster\" style=\"justify-content: center; width: 100%;\"><wa-button variant=\"neutral\" appearance=\"plain\" data-dialog=\"close\">Cancel</wa-button></div></wa-dialog>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func GenerateKeyDialog() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var82 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var82 == nil {
+			templ_7745c5c3_Var82 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 179, "<wa-dialog label=\"Generate API Key\" id=\"generate-key-dialog\" style=\"--width: 420px;\"><div class=\"wa-stack wa-gap-l\"><wa-input label=\"Key Name\" placeholder=\"e.g., Production Server\" autofocus name=\"key-name\"><wa-icon slot=\"prefix\" name=\"tag\"></wa-icon></wa-input> <wa-select label=\"Environment\" value=\"test\" name=\"key-env\"><wa-option value=\"test\">Test Mode</wa-option> <wa-option value=\"live\">Production</wa-option></wa-select> <wa-select label=\"Permissions\" value=\"full\" name=\"key-perms\"><wa-option value=\"full\">Full Access</wa-option> <wa-option value=\"read\">Read Only</wa-option> <wa-option value=\"write\">Write Only</wa-option></wa-select> <wa-callout variant=\"warning\"><wa-icon slot=\"icon\" name=\"triangle-alert\"></wa-icon> <span class=\"wa-caption-s\">Your secret key will only be shown once. Store it securely.</span></wa-callout></div><div slot=\"footer\" class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end; width: 100%;\"><wa-button variant=\"neutral\" appearance=\"outlined\" data-dialog=\"close\">Cancel</wa-button> <wa-button variant=\"brand\" hx-post=\"/api/settings/api-keys\" hx-target=\"#api-keys-list\" hx-swap=\"beforeend\">Generate Key</wa-button></div></wa-dialog>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func AddWebhookDialog() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var83 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var83 == nil {
+			templ_7745c5c3_Var83 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 180, "<wa-dialog label=\"Add Webhook Endpoint\" id=\"add-webhook-dialog\" style=\"--width: 480px;\"><div class=\"wa-stack wa-gap-l\"><wa-input label=\"Endpoint URL\" placeholder=\"https://api.example.com/webhooks\" type=\"url\" name=\"webhook-url\"><wa-icon slot=\"prefix\" name=\"globe\"></wa-icon></wa-input> <wa-input label=\"Description\" placeholder=\"Optional description\" name=\"webhook-desc\"><wa-icon slot=\"prefix\" name=\"align-left\"></wa-icon></wa-input><div class=\"wa-stack wa-gap-s\"><span class=\"wa-heading-xs\">Events to Subscribe</span> <wa-checkbox checked name=\"webhook-event-tx\"><div class=\"wa-stack wa-gap-0\"><span>transaction.*</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">All transaction events</span></div></wa-checkbox> <wa-checkbox checked name=\"webhook-event-conn\"><div class=\"wa-stack wa-gap-0\"><span>connection.*</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">App connection events</span></div></wa-checkbox> <wa-checkbox name=\"webhook-event-sig\"><div class=\"wa-stack wa-gap-0\"><span>signature.*</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">Signature request events</span></div></wa-checkbox> <wa-checkbox name=\"webhook-event-acct\"><div class=\"wa-stack wa-gap-0\"><span>account.*</span> <span class=\"wa-caption-xs\" style=\"color: var(--wa-color-neutral-500);\">Account update events</span></div></wa-checkbox></div></div><div slot=\"footer\" class=\"wa-cluster wa-gap-s\" style=\"justify-content: flex-end; width: 100%;\"><wa-button variant=\"neutral\" appearance=\"outlined\" data-dialog=\"close\">Cancel</wa-button> <wa-button variant=\"brand\" hx-post=\"/api/settings/webhooks\" hx-target=\"#webhooks-list\" hx-swap=\"beforeend\">Create Webhook</wa-button></div></wa-dialog>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func itoa(i int) string {
+	return strconv.Itoa(i)
+}
+
+func formatDate(t time.Time) string {
+	return t.Format("Jan 2, 2006")
+}
+
+func formatRelativeTime(t time.Time) string {
+	diff := time.Since(t)
+	if diff < time.Minute {
+		return "Just now"
+	}
+	if diff < time.Hour {
+		mins := int(diff.Minutes())
+		if mins == 1 {
+			return "1 minute ago"
+		}
+		return strconv.Itoa(mins) + " minutes ago"
+	}
+	if diff < 24*time.Hour {
+		hours := int(diff.Hours())
+		if hours == 1 {
+			return "1 hour ago"
+		}
+		return strconv.Itoa(hours) + " hours ago"
+	}
+	days := int(diff.Hours() / 24)
+	if days == 1 {
+		return "1 day ago"
+	}
+	if days < 14 {
+		return strconv.Itoa(days) + " days ago"
+	}
+	weeks := days / 7
+	if weeks == 1 {
+		return "1 week ago"
+	}
+	return strconv.Itoa(weeks) + " weeks ago"
+}
+
+func formatEvents(events []string) string {
+	if len(events) == 1 && events[0] == "*" {
+		return "All"
+	}
+	return strings.Join(events, ", ")
+}
+
+func settingsStyles() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var84 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var84 == nil {
+			templ_7745c5c3_Var84 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 181, "<style>\n\t\t.page-header {\n\t\t\tmargin-bottom: var(--wa-space-xl);\n\t\t}\n\t\t.settings-container {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tborder-radius: var(--wa-radius-l);\n\t\t\toverflow: hidden;\n\t\t}\n\t\t.settings-tabs {\n\t\t\t--indicator-color: var(--wa-color-primary);\n\t\t}\n\t\t.settings-tabs wa-tab-panel {\n\t\t\tpadding: var(--wa-space-xl);\n\t\t}\n\t\t.settings-tabs wa-tab-group::part(base) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t\t.settings-tabs wa-tab-group::part(nav) {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t\tpadding: 0 var(--wa-space-m);\n\t\t}\n\t\t.form-section {\n\t\t\tpadding: var(--wa-space-l) 0;\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-100);\n\t\t}\n\t\t.form-section:first-child {\n\t\t\tpadding-top: 0;\n\t\t}\n\t\t.form-section:last-child {\n\t\t\tborder-bottom: none;\n\t\t\tpadding-bottom: 0;\n\t\t}\n\t\t.form-row {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: 200px 1fr;\n\t\t\tgap: var(--wa-space-xl);\n\t\t\talign-items: start;\n\t\t}\n\t\t@media (max-width: 768px) {\n\t\t\t.form-row {\n\t\t\t\tgrid-template-columns: 1fr;\n\t\t\t\tgap: var(--wa-space-s);\n\t\t\t}\n\t\t}\n\t\t.form-label {\n\t\t\tpadding-top: var(--wa-space-xs);\n\t\t}\n\t\t.avatar-upload {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-l);\n\t\t}\n\t\t.avatar-upload wa-avatar {\n\t\t\t--size: 80px;\n\t\t}\n\t\t.device-item {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-m);\n\t\t\tpadding: var(--wa-space-m);\n\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t\tborder-radius: var(--wa-radius-m);\n\t\t}\n\t\t.device-icon {\n\t\t\twidth: 48px;\n\t\t\theight: 48px;\n\t\t\tborder-radius: var(--wa-radius-m);\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tborder: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t.device-info {\n\t\t\tflex: 1;\n\t\t}\n\t\t.contact-item {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-m);\n\t\t\tpadding: var(--wa-space-m);\n\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t\tborder-radius: var(--wa-radius-m);\n\t\t}\n\t\t.api-key-display {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-s);\n\t\t\tpadding: var(--wa-space-m);\n\t\t\tbackground: var(--wa-color-neutral-900);\n\t\t\tcolor: var(--wa-color-neutral-100);\n\t\t\tborder-radius: var(--wa-radius-m);\n\t\t\tfont-family: var(--wa-font-mono);\n\t\t\tfont-size: var(--wa-font-size-s);\n\t\t}\n\t\t.api-key-display span {\n\t\t\tflex: 1;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.webhook-item {\n\t\t\tpadding: var(--wa-space-m);\n\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t\tborder-radius: var(--wa-radius-m);\n\t\t}\n\t\t.notification-row {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\tpadding: var(--wa-space-m) 0;\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-100);\n\t\t}\n\t\t.notification-row:last-child {\n\t\t\tborder-bottom: none;\n\t\t}\n\t\t.oauth-client-card {\n\t\t\tpadding: var(--wa-space-m);\n\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t\tborder-radius: var(--wa-radius-m);\n\t\t}\n\t</style>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func settingsScripts() templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var85 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var85 == nil {
+			templ_7745c5c3_Var85 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 182, "<script>\n\t\t(function() {\n\t\t\tconst addEmailDialog = document.getElementById('add-email-dialog');\n\t\t\tconst addPhoneDialog = document.getElementById('add-phone-dialog');\n\t\t\tconst addDeviceDialog = document.getElementById('add-device-dialog');\n\t\t\tconst generateKeyDialog = document.getElementById('generate-key-dialog');\n\t\t\tconst addWebhookDialog = document.getElementById('add-webhook-dialog');\n\n\t\t\tdocument.getElementById('add-email-btn')?.addEventListener('click', () => {\n\t\t\t\taddEmailDialog.open = true;\n\t\t\t});\n\n\t\t\tdocument.getElementById('add-phone-btn')?.addEventListener('click', () => {\n\t\t\t\taddPhoneDialog.open = true;\n\t\t\t});\n\n\t\t\tdocument.getElementById('add-device-btn')?.addEventListener('click', () => {\n\t\t\t\taddDeviceDialog.open = true;\n\t\t\t});\n\n\t\t\tdocument.getElementById('generate-key-btn')?.addEventListener('click', () => {\n\t\t\t\tgenerateKeyDialog.open = true;\n\t\t\t});\n\n\t\t\tdocument.getElementById('add-webhook-btn')?.addEventListener('click', () => {\n\t\t\t\taddWebhookDialog.open = true;\n\t\t\t});\n\n\t\t\tdocument.querySelectorAll('[data-dialog=\"close\"]').forEach(btn => {\n\t\t\t\tbtn.addEventListener('click', () => {\n\t\t\t\t\tbtn.closest('wa-dialog').open = false;\n\t\t\t\t});\n\t\t\t});\n\t\t})();\n\t</script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+var _ = templruntime.GeneratedTemplate