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

{{ define "title" }}Login{{ end }}
{{ define "extraheader" }}
	<style>
		.login-container {
			max-width: 900px;
			margin: 0 auto;
		}
		.login-box {
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			overflow: hidden;
		}
		.login-form-section {
			padding: 40px;
		}
		.product-info-section {
			padding: 40px;
			background-color: #f8f9fa;
		}
		.login-header {
			margin-bottom: 25px;
		}
	</style>
{{ end }}
{{ define "content" }}
	<div
		class="container min-vh-100 d-flex align-items-center justify-content-center py-5"
	>
		<div class="login-container">
			<div class="row login-box g-0">
				<!-- Left side: Login Form -->
				<div class="col-md-6 login-form-section">
					<div class="login-header">
						<h2>Welcome Back</h2>
						<p class="text-muted">Please enter your credentials</p>
					</div>

					<form method="POST" action="/signin">
						<input type="hidden" name="next" value="{{ .C.Next }}" />
						<div class="mb-3">
							<label for="username" class="form-label">Username</label>
							<input
								type="text"
								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>

						{{ if .C.InvalidCredentials }}
							<div class="alert alert-danger" role="alert">
								The credentials you provided weren't recognized.
							</div>
						{{ end }}


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

						<div class="mt-3 text-center">
							<p>Don't have an account? <a href="/signup">Sign up</a></p>
							<a href="forgot-password.html">Forgot password?</a>
						</div>
					</form>
				</div>

				<!-- Right side: Product Information -->
				<div class="col-md-6 product-info-section">
					<div>
						<img src="/static/img/nidus-logo-256-transparent.png" />
						<h2>Nidus Sync</h2>
						<p class="lead mb-4">
							All your field data, sync'd to all your techs
						</p>

						<div class="mb-4">
							<p>Something intelligent and intriguing</p>
						</div>

						<div class="mb-4">
							<h5>Key Features</h5>
							<ul>
								<li>Works with <b>Fieldseeker</b></li>
								<li>Works <i>with</i> Fieldseeker</li>
								<li><b>Works</b> with Fieldseeker</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{{ end }}