package auth

import (
	"github.com/zhang2092/go-url-shortener/internal/templ/base"
	"github.com/zhang2092/go-url-shortener/internal/templ/models"
	"github.com/zhang2092/go-url-shortener/internal/templ/util"
	"net/http"
)

templ Register(r *http.Request, form *models.RegisterPageData) {
	@base.Base(r, nil, nil) {
		<div class="container">
			<div class="flex flex-column align-items row py-md-5 mt-md-5">
				<h1>注册</h1>
				<div class="col-sm-4 py-md-5">
					<form action="/register" method="post">
						@templ.Raw(util.CsrfField(r))
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text">邮箱</span>
								</div>
								<input
									type="email"
									name="email"
									class="form-control"
									required
									id="email"
									value={ form.Email }
									aria-describedby="emailValid"
								/>
							</div>
							if form.Email!="" {
								<small id="emailValid" style="color: #f44336;" class="form-text">{ form.EmailMsg }</small>
							}
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text">名称</span>
								</div>
								<input
									type="text"
									name="username"
									class="form-control"
									required
									id="username"
									value={ form.Username }
									aria-describedby="usernameValid"
								/>
							</div>
							if form.Username!="" {
								<small id="usernameValid" style="color: #f44336;" class="form-text">{ form.UsernameMsg }</small>
							}
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-prepend">
									<span class="input-group-text">密码</span>
								</div>
								<input
									type="password"
									name="password"
									class="form-control"
									required
									id="password"
									value={ form.Password }
									aria-describedby="passwordValid"
								/>
							</div>
							if form.Password!="" {
								<small id="passwordValid" style="color: #f44336;" class="form-text">{ form.PasswordMsg }</small>
							}
						</div>
						<button type="submit" class="btn btn-primary btn-block">提交</button>
					</form>
					if form.Summary != "" {
						<div class="py-md-5" style="color: #f44336;">
							{ form.Summary }
						</div>
					}
				</div>
			</div>
		</div>
	}
}