@model WebApplication1.Models.user

@{
    ViewBag.Title = "Register";
}

<h2>Create a new user</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
<script>
    function checkPasswords() {
        var password = document.getElementById("password");
        var confirmPassword = document.getElementById("ConfirmPassword");
        var errorMessage = document.getElementById("passwordMismatch");

        if (password.value !== confirmPassword.value) {
            errorMessage.textContent = "Passwords do not match.";
            return false;
        }
        else {
            errorMessage.textContent = "";
            return true;
        }
    }
</script>
<div class="form-horizontal">
    <h4>user</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.usename, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.usename, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.usename, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.password, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.password, new { htmlAttributes = new {@id="password", @type = "password", @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.password, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2">Confirm password</label>
        <input type="password" name="ConfirmPassword" id="ConfirmPassword" oninput="checkPasswords()" class="form-control" />
        <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
        <span id="passwordMismatch" class="text-danger"></span>
    </div>


    <div class="form-group">
        @Html.LabelFor(model => model.displayname, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.displayname, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.displayname, "", new { @class = "text-danger" })
        </div>
    </div>
    <br />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-outline-dark" />
        </div>
    </div>
</div>
}

<div>
    @Html.ActionLink("already have an account? Login", "Login")
</div>
