{{ template "sync/layout/base.html" . }}

{{ define "title" }}Login{{ end }}
{{ define "extraheader" }}
	<style>
		.register-container {
			max-width: 900px;
			margin: 0 auto;
		}
		.register-box {
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			overflow: hidden;
		}
		.register-form-section {
			padding: 40px;
		}
		.register-info-section {
			padding: 40px;
			background-color: #f8f9fa;
		}
		.register-header {
			margin-bottom: 25px;
		}
		.logo-area {
			text-align: center;
			margin-bottom: 30px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div
		class="container min-vh-100 d-flex align-items-center justify-content-center py-5"
	>
		<div class="register-container">
			<div class="row register-box g-0">
				<!-- Left side: Registration Form -->
				<div class="col-md-6 register-form-section">
					<div class="register-header">
						<h2>Create an Account</h2>
						<p class="text-muted">Join us today to get started</p>
					</div>

					<form method="POST" action="/api/signup">
						<div class="mb-3">
							<label for="name" class="form-label">Display Name</label>
							<input type="text" class="form-control" name="name" required />
						</div>

						<div class="mb-3">
							<label for="username" class="form-label">Username</label>
							<input
								type="username"
								class="form-control"
								name="username"
								required
							/>
						</div>

						<div class="mb-3">
							<label for="password" class="form-label">Password</label>
							<input
								type="password"
								class="form-control"
								name="password"
								required
							/>
						</div>

						<div class="mb-3 form-check">
							<input
								type="checkbox"
								class="form-check-input"
								name="terms"
								required
							/>
							<label class="form-check-label" for="terms"
								>I agree to the <a href="#">Terms of Service</a> and
								<a href="#">Privacy Policy</a></label
							>
						</div>

						<div class="d-grid gap-2">
							<button type="submit" class="btn btn-primary">Register</button>
						</div>

						<div class="mt-3 text-center">
							<p>Already have an account? <a href="/signin">Sign in</a></p>
						</div>
					</form>
				</div>

				<!-- Right side: Account Information -->
				<div class="col-md-6 register-info-section">
					<div>
						<div class="logo-area">
							<img src="/static/img/nidus-logo-256-transparent.png" />
						</div>

						<div class="mb-4">
							<h5>Who should register?</h5>
							<p>
								This platform is designed for professionals who need to manage
								projects and collaborate with team members. Whether you're a
								freelancer, small business owner, or part of a larger
								organization, our tools can help streamline your workflow.
							</p>
						</div>

						<div class="mb-4">
							<h5>What happens after registration?</h5>
							<p>
								After you register with your email, you'll receive a
								confirmation message with instructions to complete your account
								setup. You'll then have access to all features and can customize
								your workspace based on your specific needs.
							</p>
						</div>

						<div class="mb-3">
							<small class="text-muted"
								>For any questions about account types or registration, please
								contact our support team at support@yourproduct.com</small
							>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}
