@page
@model WebApp.Pages.SignUpModel
@{
    ViewData["Title"] = "Sign Up";
}

<!-- Section: Design Block -->
<section class="overflow-hidden">
    <style>
        .bg-glass {
            background-color: hsla(0, 0%, 100%, 0.9) !important;
            backdrop-filter: saturate(200%) blur(25px);
        }
    </style>

    <div class="container px-4 py-5 px-md-5 text-center text-lg-start my-5">
        <div class="row gx-lg-5 align-items-center mb-5">
            <div class="col-lg-6 mb-5 mb-lg-0" style="z-index: 10">
                <h1 class="my-5 display-5 fw-bold ls-tight" style="color: #373A40">
                    Time to buy some... guns!*<br />
                    <span style="color: #DC5F00">In the store** of death*** and despair****</span>
                </h1>
                <div class="mb-4 opacity-70 text-body-emphasis" style="color: #686D76">
                    <p>
                        We would like to draw your attention to the fact that our company does not sell products to anyone under the age of 18. All of our products are intended for adult audiences only. We also do not ship to countries where our products are prohibited or restricted by law. Please make sure you meet all the necessary requirements before placing your order. We appreciate your understanding and co-operation in this matter.
                    <div style="font-size: 6px">
                        *toy guns, 
                        **21 guns, 
                        ***a metaphor for death of the happiness of buying our merchandise, 
                        ****a metaphor for despair over the consumer's failure to find this shop previously 
                    </div>
                </div>
                
            </div>

            <div class="col-lg-6 mb-5 mb-lg-0 position-relative">
                
                <div class="card bg-glass">
                    <div class="card-body px-4 py-5 px-md-5">
                        <form method="post">
                            <!-- 2 column grid layout with text inputs for the first and last names -->
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div data-mdb-input-init class="form-outline">
                                        <input asp-for="UserModel.FirstName" type="text" id="firstname" class="form-control" />
                                        <label class="form-label" for="firstname">First name</label>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div data-mdb-input-init class="form-outline">
                                        <input asp-for="UserModel.SecondName" type="text" id="lastname" class="form-control" />
                                        <label class="form-label" for="lastname">Last name</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Email input -->
                            <div data-mdb-input-init class="form-outline mb-4">
                                <input asp-for="UserModel.Email" type="email" id="email" class="form-control" />
                                <label class="form-label" for="email">Email address</label>
                            </div>

                            <!-- Password input -->
                            <div data-mdb-input-init class="form-outline mb-4">
                                <input asp-for="UserModel.Password" type="password" id="password" class="form-control" />
                                <label class="form-label" for="password">Password</label>
                            </div>

                            <!-- Checkbox -->
                            <div class="form-check d-flex justify-content-center mb-4">
                                <input class="form-check-input me-2" type="checkbox" value="" id="confirming" />
                                <label class="form-check-label" for="confirming">
                                    I confirm that I am 18 years of age and have read the Privacy Policy and Terms of Agreement
                                </label>
                            </div>

                            <div class="form-check d-flex justify-content-center mb-4">
                                <input asp-for="UserModel.OnlyImportantMails" class="form-check-input me-2" type="checkbox" id="policy" />
                                <label class="form-check-label" for="policy">
                                    Send only important mails
                                </label>
                            </div>

                            <!-- Submit button -->
                            <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block mb-4">
                                Sign up
                            </button>
                            <div>
                                <p class="mb-0">
                                    Already have an account? <a class="fw-bold" asp-area="" asp-page="/Login">Login</a>
                                </p>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Section: Design Block -->