@model watcher_monitoring.Models.LoginViewModel

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

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Watcher Monitoring</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-container {
            max-width: 400px;
            width: 100%;
        }
        .login-card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            padding: 40px;
        }
        .login-header {
            text-align: center;
            margin-bottom: 30px;
        }
        .login-header h2 {
            color: #333;
            font-weight: 600;
        }
        .login-header p {
            color: #666;
            margin-top: 10px;
        }
        .btn-login {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            font-weight: 600;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .btn-login:hover {
            background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-card">
            <div class="login-header">
                <h2>🔒 Watcher Monitoring</h2>
                <p>Bitte melden Sie sich an</p>
            </div>

            @if (TempData["Error"] != null)
            {
                <div class="alert alert-danger" role="alert">
                    @TempData["Error"]
                </div>
            }

            <form asp-action="Login" asp-controller="Auth" method="post">
                <div class="form-group mb-3">
                    <label asp-for="Username" class="form-label">Benutzername</label>
                    <input asp-for="Username" class="form-control" placeholder="Benutzername eingeben" autofocus />
                    <span asp-validation-for="Username" class="text-danger"></span>
                </div>

                <div class="form-group mb-4">
                    <label asp-for="Password" class="form-label">Passwort</label>
                    <input asp-for="Password" type="password" class="form-control" placeholder="Passwort eingeben" />
                    <span asp-validation-for="Password" class="text-danger"></span>
                </div>

                <div class="form-check mb-3">
                    <input asp-for="RememberMe" type="checkbox" class="form-check-input" />
                    <label asp-for="RememberMe" class="form-check-label">
                        Angemeldet bleiben
                    </label>
                </div>

                <button type="submit" class="btn btn-primary btn-login">Anmelden</button>
            </form>
        </div>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
