@model Watcher.ViewModels.LoginViewModel
@{
    Layout = "~/Views/Shared/_LoginLayout.cshtml";
    ViewData["Title"] = "Login";
    var oidc = ViewBag.oidc;
}

<style>
    body {
        background-color: #0d1b2a;
    }

    .login-card {
        background-color: #1b263b;
        color: #ffffff;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        max-width: 400px;
        margin: auto;
    }

    .form-control {
        background-color: #415a77;
        border: none;
        color: white;
    }

    .form-control::placeholder {
        color: #c0c0c0;
    }

    .btn-primary {
        background-color: #0d6efd;
        border: none;
    }

    .btn-pocketid {
        background-color: #14a44d;
        color: white;
        border: none;
    }

    .btn-pocketid:hover {
        background-color: #0f8c3c;
    }

    label {
        margin-top: 1rem;
    }

    .form-error {
        color: #ff6b6b;
        font-size: 0.875rem;
    }
</style>

<div class="login-card">
    <h2 class="text-center mb-4">Anmelden</h2>

    <form asp-controller="Auth" asp-action="Login" method="post">
        <input type="hidden" asp-for="ReturnUrl" />

        <div class="mb-3">
            <label asp-for="Username" class="form-label">Benutzername</label>
            <input asp-for="Username" class="form-control" placeholder="admin" />
            <span asp-validation-for="Username" class="form-error"></span>
        </div>

        <div class="mb-3">
            <label asp-for="Password" class="form-label">Passwort</label>
            <input asp-for="Password" type="password" class="form-control" placeholder="••••••••" />
            <span asp-validation-for="Password" class="form-error"></span>
        </div>

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </form>

    <hr class="my-4" />

    @if (ViewBag.oidc == true)
    {
        <form asp-controller="Auth" asp-action="SignIn" method="get">
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-pocketid">Mit PocketID anmelden</button>
            </div>
        </form>
    }

</div>
