@model Models.DataTransferObjects.LoginDTO

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



<div class="auth-wrapper">
    <div class="auth d-flex justify-content-center align-items-center flex-column">
        <h3>Sign in</h3>
        <span class="text-muted">Enter your credentials</span>
            <form method="post" asp-action="Login" asp-controller="Identity" asp-antiforgery="true">
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Email">Email</label>
                    <input asp-for="Email" autocomplete="off" class="form-control" />
                    <span asp-validation-for="Email" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Password">Password</label>
                    <input type="password" asp-for="Password" class="form-control" />
                    <span asp-validation-for="Password" class="text-danger"></span>
                </div>

                <button type="submit" class="btn btn-primary mt-2">Login</button>
            </form>
            <div class="mt-2">
                <p>
                    Don't have an account? @Html.ActionLink("Sign up", "Register", "Identity")
                </p>
            </div>
    </div>
</div>

<style>
    auth-wrapper {
        min-height: calc(100vh - 100px);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .auth {
        padding: 50px;
        width: 500px;
        box-shadow: 0 0 2px 1px #f1f1f1;
        margin: 25px auto;
        color: white;
        border-radius: 15px;
    }

        .auth input[type="text"], .auth input[type="password"], .auth input[type="submit"] {
            display: block;
            padding: 10px;
            margin: 15px auto;
            min-width: 250px;
        }

        .auth input[type="checkbox"] {
            margin-left: 15px;
        }

        .auth input[type="submit"] {
            background-color: cornflowerblue;
            color: white;
        }

            .auth input[type="submit"]:hover {
                opacity: 0.9;
            }

        .auth span {
            margin-bottom: 30px;
        }
</style>