@model KernelRecordsMVC.Application.ViewModels.RegisterViewModel

@{
    ViewData["Title"] = "Register";
}

<div class="auth-page">

    <div class="auth-shell auth-shell-register">

        <div class="auth-brand-panel">

            <a asp-controller="Home"
               asp-action="Index"
               class="auth-logo-link">

                <img src="~/images/logo.png"
                     asp-append-version="true"
                     alt="Kernel Records"
                     class="auth-logo" />

            </a>

            <div class="auth-brand-copy">

                <span class="auth-eyebrow">
                    KERNEL RECORDS
                </span>

                <h1>
                    Start your collection.
                </h1>

                <p>
                    Create an account to save releases,
                    build your wishlist and place orders.
                </p>

            </div>

        </div>


        <div class="auth-form-panel">

            <div class="auth-form-header">

                <span class="auth-eyebrow">
                    NEW ACCOUNT
                </span>

                <h2>Register</h2>

                <p>
                    Create your Kernel Records account.
                </p>

            </div>


            <form asp-action="Register"
                  method="post"
                  class="auth-form">

                @Html.AntiForgeryToken()


                <div asp-validation-summary="ModelOnly"
                     class="auth-validation-summary">
                </div>


                <!-- EMAIL -->

                <div class="auth-field">

                    <label asp-for="Email">
                        Email
                    </label>

                    <input asp-for="Email"
                           autocomplete="email"
                           placeholder="mila@gmail.com" />

                    <span asp-validation-for="Email"
                          class="auth-field-error">
                    </span>

                </div>


                <!-- USERNAME -->

                <div class="auth-field">

                    <label asp-for="Username">
                        Username
                    </label>

                    <input asp-for="Username"
                           autocomplete="username"
                           placeholder="Choose a username" />

                    <span asp-validation-for="Username"
                          class="auth-field-error">
                    </span>

                </div>


                <!-- PASSWORD ROW -->

                <div class="auth-form-row">

                    <div class="auth-field">

                        <label asp-for="Password">
                            Password
                        </label>

                        <div class="auth-password-field">

                            <input asp-for="Password"
                                   autocomplete="new-password"
                                   placeholder="Create password"
                                   id="registerPassword" />

                            <button type="button"
                                    class="auth-password-toggle"
                                    data-password-toggle="registerPassword"
                                    aria-label="Show password">

                                Show

                            </button>

                        </div>

                        <span asp-validation-for="Password"
                              class="auth-field-error">
                        </span>

                    </div>


                    <div class="auth-field">

                        <label asp-for="ConfirmPassword">
                            Confirm Password
                        </label>

                        <div class="auth-password-field">

                            <input asp-for="ConfirmPassword"
                                   autocomplete="new-password"
                                   placeholder="Repeat password"
                                   id="confirmPassword" />

                            <button type="button"
                                    class="auth-password-toggle"
                                    data-password-toggle="confirmPassword"
                                    aria-label="Show password">

                                Show

                            </button>

                        </div>

                        <span asp-validation-for="ConfirmPassword"
                              class="auth-field-error">
                        </span>

                    </div>

                </div>


                <!-- SHIPPING ADDRESS -->

                <div class="auth-field">

                    <label asp-for="ShippingAddress">
                        Shipping Address
                        <span class="auth-optional">
                            Optional
                        </span>
                    </label>

                    <input asp-for="ShippingAddress"
                           autocomplete="street-address"
                           placeholder="Shipping address" />

                    <span asp-validation-for="ShippingAddress"
                          class="auth-field-error">
                    </span>

                </div>


                <!-- TELEPHONE -->

                <div class="auth-field">

                    <label asp-for="TelephoneNumber">
                        Telephone Number
                        <span class="auth-optional">
                            Optional
                        </span>
                    </label>
    
                    <input asp-for="TelephoneNumber"
                           type="tel"
                           autocomplete="tel"
                           placeholder="+389..." />

                    <span asp-validation-for="TelephoneNumber"
                          class="auth-field-error">
                    </span>

                </div>


                <button type="submit"
                        class="auth-submit">

                    Create Account

                </button>

            </form>


            <div class="auth-switch">

                <span>
                    Already have an account?
                </span>

                <a asp-action="Login">
                    Login →
                </a>

            </div>

        </div>

    </div>

</div>


@section Scripts
{
    <partial name="_ValidationScriptsPartial" />

    <script>

        document
            .querySelectorAll("[data-password-toggle]")
            .forEach(function (button)
            {
                button.addEventListener(
                    "click",
                    function ()
                    {
                        const input =
                            document.getElementById(
                                button.dataset.passwordToggle);


                        if (input.type === "password")
                        {
                            input.type = "text";
                            button.textContent = "Hide";
                            button.setAttribute(
                                "aria-label",
                                "Hide password");
                        }
                        else
                        {
                            input.type = "password";
                            button.textContent = "Show";
                            button.setAttribute(
                                "aria-label",
                                "Show password");
                        }
                    });
            });

    </script>
}