@model VberAdmin.Web.Models.Account.RegisterViewModel
@{
    ViewBag.Title = L("Register");
}

@section scripts{
<script>
    (function () {
        var _$form = $('#RegisterForm');

        $.validator.addMethod("customUsername", function (value, element) {
            if (value === _$form.find('input[name="EmailAddress"]').val()) {
                return true;
            }

            //Username can not be an email address (except the email address entered)
            return !$.validator.methods.email.apply(this, arguments);
        }, abp.localization.localize("RegisterFormUserNameInvalidMessage", "VberAdmin"));

        _$form.validate({
            rules: {
                UserName: {
                    required: true,
                    customUsername: true
                }
            }
        });
    })();
</script>

}
<h4 class="text-center">@L("Register")</h4>
<form id="RegisterForm" asp-action="Register" method="post">
    @if (ViewBag.ErrorMessage != null)
    {
        <div class="alert alert-danger">
            <i class="fas fa-warning"></i> @ViewBag.ErrorMessage
        </div>
    }
    <input type="hidden" name="IsExternalLogin" value="@Model.IsExternalLogin.ToString()" />
    <input type="hidden" name="ExternalLoginAuthSchema" value="@Model.ExternalLoginAuthSchema" />
    <div class="input-group mb-3">
        <input type="text" name="Name" class="form-control" placeholder="@L("Name")" value="@Model.Name" required maxlength="@VberZero.BaseSystem.Users.User.MaxNameLength">
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-arrow-left"></span>
            </div>
        </div>
    </div>
    <div class="input-group mb-3">
        <input type="text" name="Surname" class="form-control" placeholder="@L("Surname")" value="@Model.Surname" required maxlength="@VberZero.BaseSystem.Users.User.MaxSurnameLength">
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-arrow-left"></span>
            </div>
        </div>
    </div>
    <div class="input-group mb-3">
        <input type="email" name="EmailAddress" class="form-control" placeholder="@L("EmailAddress")" value="@Model.EmailAddress" required maxlength="@VberZero.BaseSystem.Users.User.MaxEmailAddressLength">
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-envelope"></span>
            </div>
        </div>
    </div>
    <div class="input-group mb-3">
        <input type="text" name="UserName" class="form-control" placeholder="@L("UserName")" value="@Model.UserName" required maxlength="@VberZero.BaseSystem.Users.User.MaxUserNameLength">
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-user"></span>
            </div>
        </div>
    </div>
    <div class="input-group mb-3">
        <input type="password" name="Password" class="form-control" placeholder="@L("Password")" required maxlength="@VberZero.BaseSystem.Users.User.MaxPlainPasswordLength">
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-lock"></span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-8">
            <a asp-action="Login" class="btn btn-default btn-flat"><i class="fa fa-arrow-circle-left"></i> @L("Back")</a>
        </div>
        <div class="col-4">
            <button type="submit" id="RegisterButton" class="btn btn-primary btn-flat float-right">@L("Register")</button>
        </div>
    </div>
</form>
@*<div class="social-auth-links text-center">
        <p>- OR -</p>
        <a href="javascript:;" class="btn btn-block btn-primary">
            <i class="fab fa-facebook mr-2"></i>
            Sign up using Facebook
        </a>
        <a href="javascript:;" class="btn btn-block btn-danger">
            <i class="fab fa-google-plus mr-2"></i>
            Sign up using Google+
        </a>
    </div>*@