@model FamilyBudget.ViewModels.LoginViewModel
@{
    Layout = "~/Views/Shared/_blankLayout.cshtml";
}


<style>
    body {
        margin: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f4f7fc;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        padding: 10px;
        animation: fadeIn 1s ease-in-out;
    }

    .container {
        display: flex;
        width: 900px;
        background-color: white;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .container:hover {
            transform: scale(1.02);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
        }

    .form-section {
        flex: 1;
        padding: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .form-section h2 {
            margin-bottom: 25px;
            color: #4CAF50;
            font-size: 28px;
            font-weight: 600;
        }

        .form-section label {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }

        .form-section input {
            margin-bottom: 20px;
            padding: 12px 15px;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
            transition: border 0.3s ease, box-shadow 0.3s ease;
        }

            .form-section input:focus {
                border-color: #4CAF50;
                box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
                outline: none;
            }

        .form-section .remember-me {
            margin-bottom: 25px;
        }

            .form-section .remember-me input {
                margin-right: 8px;
            }

        .form-section .forgot-password {
            color: #4CAF50;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }

            .form-section .forgot-password:hover {
                color: #388e3c;
            }

        .form-section .register {
            color: #4CAF50;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s ease;
        }

            .form-section .register:hover {
                color: #388e3c;
            }

        .form-section p {
            color: #333;
            font-size: 14px;
            transition: color 0.3s ease;
        }

        .form-section input[type="submit"] {
            padding: 12px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

            .form-section input[type="submit"]:hover {
                background-color: #4CAF50;
            }

    .illustration-section {
        flex: 1;
        background-color: #f0f4f8;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        text-align: center;
    }

        .illustration-section img {
            max-width: 85%;
            margin-bottom: 30px;
            border-radius: 8px;
        }

        .illustration-section h3 {
            color: #4CAF50;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .illustration-section p {
            color: #555;
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 10px;
        }
</style>
<link rel="stylesheet" href="~/css/login.css" />
@if (!ViewData.ModelState.IsValid)
{
    <div class="alert alert-danger">
        @Html.ValidationSummary(false, "", new { @class = "text-danger" })
    </div>
}
<div class="container">
    <div class="form-section">
        <h2>Connexion</h2>
        <form asp-action="Login" method="post">
            <div>
                <label>📧 Email</label>
                <input type="email" asp-for="Email" />
                <span asp-validation-for="Email"></span>
            </div>
            <div>
                <label>🔒 Mot de passe</label>
                <input asp-for="MotDePasse" type="password" />
                <span asp-validation-for="MotDePasse"></span>
                <a asp-controller="Compte" asp-action="ForgotPassword" class="forgot-password">mot de passe oublie ?</a>
            </div>

            <input type="submit" value="🔑 Se connecter" />

            <p>Vous n'avez pas de compte?📝<a asp-controller="Compte" asp-action="Register" class="register">S'inscrire</a></p>
        </form>
    </div>
    <div class="illustration-section">
        <img src="~/images/log.jpg" alt="Project Progress Illustration">
        <h3>FAMILYBUDGET</h3>
        <p>Simplifiez vos finances, réalisez vos rêves en famille !</p>
    </div>

</div>
@*<div class="container">
        <div class="form-section">
            <h2>Login</h2>
            <input type="text" placeholder="Username or email">
            <input type="password" placeholder="Password">

            <a href="#" class="forgot-password">Forgot password?</a>
            <button>Login</button>
        </div>
        <div class="illustration-section">
            <img src="illustration.png" alt="Project Progress Illustration">
            <h3>Check Your Project Progress</h3>
            <p>Monitor your progress efficiently and achieve your goals with clarity.</p>
        </div>
    </div>*@
