@inherits ViewModelTemplate<UserAuthenticationViewModel>
@using Dynamicweb.Users.Frontend.UserAuthentication
@using Dynamicweb.Users.Frontend
@using Dynamicweb.Rendering
@using Dynamicweb


<div class="mx-auto w-100" style="max-width: 30rem;">
    @if (Model.Result != UserAuthenticationResultType.None) {
        var resultText = Model.Result switch
        {
            UserAuthenticationResultType.IncorrectLogin => "The username or password you entered is incorrect. Please try again.",
            UserAuthenticationResultType.PasswordLengthInvalid => "The password you entered does not meet the required length. Please ensure it meets the minimum length criteria and try again.",
            UserAuthenticationResultType.ExceededFailedLogOnLimit => "You have exceeded the maximum number of failed login attempts. Please wait a while before trying again.",
            UserAuthenticationResultType.LoginLocked => "Your account has been locked due to multiple failed login attempts.",
            UserAuthenticationResultType.ExternalProviderAuthenticationFailed => "External provider authentication failed",
            UserAuthenticationResultType.ExternalProviderEmailNotProvided => "External provider email not provided",
            UserAuthenticationResultType.ExternalProviderNotRegisteredOrInactive => "External provider not registered or inactive",
            UserAuthenticationResultType.UserAutoCreationDisabled => "User auto creation is disabled",
            UserAuthenticationResultType.UserCreationFailed => "User auto creation failed",
            UserAuthenticationResultType.Success => "You have successfully logged in. Welcome back!",
            UserAuthenticationResultType.PasswordChangedSuccess => "You have successfully changed the password.",
            UserAuthenticationResultType.MfaVerificationRequired => "Multi-factor authentication needs to be configured before you can log in.",
            UserAuthenticationResultType.MfaVerificationFailed => "Multi-factor authentication was unsuccessful. Please try again.",
            _ => Model.Result.ToString()
        };
        var alertClass = (Model.Result == UserAuthenticationResultType.Success || Model.Result == UserAuthenticationResultType.PasswordChangedSuccess) ? "success" : "danger";

        <div class="alert alert-@alertClass" role="alert">@Translate(resultText)</div>
    }

    <form method="post">
        <input type="hidden" name="redirect" value="@Model.RedirectAfterLogin">

        <div class="form-floating mb-4">
            <input type="text" class="form-control" id="Username" name="username" placeholder="@Translate("Email")" required>
            <label for="Username">@Translate("Email")</label>
        </div>

        <div class="form-floating mb-2">
            <input type="password" class="form-control" id="Password" name="password" placeholder="@Translate("Password")" required>
            <label for="Password">@Translate("Password")</label>
        </div>

        <div class="d-flex justify-content-between mb-4">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="True" name="Autologin" id="RememberMe">
                <label class="form-check-label" for="RememberMe">@Translate("Keep me signed in")</label>
            </div>

            @if (!string.IsNullOrEmpty(Model.CreatePasswordLink))
            {
                <div class="d-flex justify-content-end fw-bold">
                    <a href="@Model.CreatePasswordLink" class="text-decoration-none text-decoration-underline-hover">@Translate("Forgot password?")</a>
                </div>
            }
        </div>

        <button type="submit" class="btn btn-primary w-100" data-dw-button id="SignIn">@Translate("Sign in")</button>
    </form>

    @if (Model.ExternalLogins.Any()) {
        <div class="hstack gap-3 my-4">
            <span class="border-top flex-fill"></span>
            <span class="text-uppercase text-muted fs-7">@Translate("or")</span>
            <span class="border-top flex-fill"></span>
        </div>
        foreach(var provider in Model.ExternalLogins)
        {
            <form class="grid grid-1 gap-4 mb-4" method="post">   
                <input type="hidden" name="redirect" value="@Model.RedirectAfterLogin">

                <button type="submit" name="DwExternalLoginProvider" value="@provider.Id" class="btn btn-outline-primary w-100" data-dw-button>
                    <span class="hstack gap-2 justify-content-center align-items-center">
                        @if (!string.IsNullOrEmpty(provider.Icon)) 
                        {
                            if (provider.Icon.EndsWith(".svg", StringComparison.OrdinalIgnoreCase)) {
                                <span class="icon-3">
                                    @ReadFile(provider.Icon)
                                </span>
                            } 
                            else
                            {
                                <img src="/Admin/Public/GetImage.ashx?image=@(provider.Icon)&width=18&format=webp" >
                            }
                        }
                        <span>@Translate("Sign in with") @provider.Name</span>
                    </span>
                </button>
            </form>
        }
    }

    @if (!string.IsNullOrEmpty(Model.CreateUserLink))
    {
        <div class="hstack justify-content-center mt-4 gap-2">
            @Translate("Don't have a user profile?") 
            <span class="fw-bold">
                <a href="@Model.CreateUserLink" class="text-decoration-none text-decoration-underline-hover">@Translate("Sign up")</a>
            </span>
        </div>
    }
</div>
