package components

import (
	"context"
)

templ Register(ctx context.Context, errorMessage string) {
	@LayoutWithContext("Register", ctx) {
		<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
			<div class="max-w-md w-full space-y-8">
				<div>
					<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
						Create a new user account
					</h2>
					<p class="mt-2 text-center text-sm text-gray-600">
						Complete the form below to create a new user
					</p>
				</div>
				
				if errorMessage != "" {
					<div class="mt-4">
						<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
							<span class="block sm:inline">{ errorMessage }</span>
						</div>
					</div>
				}
				
				<form class="mt-8 space-y-6" hx-post="/register" hx-target="body"
					x-data="{ 
						email: '', 
						password: '',
						confirmPassword: '',
						loading: false,
						validate() {
							return this.email && 
								this.password && 
								this.confirmPassword && 
								this.password === this.confirmPassword;
						}
					}"
					@htmx:before-request="loading = true"
					@htmx:after-request="loading = false">
					<input type="hidden" name="remember" value="true" />
					<div class="rounded-md shadow-sm -space-y-px">
						<div>
							<label for="email" class="sr-only">Email address</label>
							<input 
								id="email" 
								name="email" 
								type="email" 
								required 
								x-model="email"
								class="form-input rounded-t-md" 
								placeholder="Email address"/>
						</div>
						<div>
							<label for="password" class="sr-only">Password</label>
							<input 
								id="password" 
								name="password" 
								type="password" 
								required 
								x-model="password"
								class="form-input" 
								placeholder="Password"/>
						</div>
						<div>
							<label for="confirm-password" class="sr-only">Confirm Password</label>
							<input 
								id="confirm-password" 
								name="confirm_password" 
								type="password" 
								required 
								x-model="confirmPassword"
								class="form-input rounded-b-md" 
								placeholder="Confirm Password"/>
						</div>
					</div>

					<div>
						<button 
							type="submit" 
							class="btn-primary w-full flex justify-center"
							x-bind:disabled="!validate() || loading">
							<span x-show="!loading">Create User</span>
							<span x-show="loading" class="flex items-center">
								<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
									<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
									<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
								</svg>
								Processing...
							</span>
						</button>
					</div>
				</form>
				<div class="text-center">
					<p class="text-sm text-gray-600">
						Already have an account?
						<a href="/login" class="font-medium text-blue-600 hover:text-blue-500">Sign in</a>
					</p>
				</div>
			</div>
		</div>
	}
}