@page "/login"
@layout LoginLayout
@attribute [AllowAnonymous]

@code {
    [Parameter] public string? returnUrl { get; set; }
    private string ActionUrl => $"/pvk/scanner/auth/login?returnUrl={Uri.EscapeDataString(returnUrl ?? "/pvk/scanner/")}";
}

<div class="login-wrap min-vh-100 d-flex align-items-center justify-content-center">
    <div class="login-card shadow-lg">
        <div class="text-center mb-3">
            <div class="brand">Werksverkauf Scanner</div>
            <div class="subtitle">Bitte Kassierer-Code eingeben</div>
        </div>

        <form method="post" action="@ActionUrl" class="needs-validation" novalidate>
            <label class="form-label fw-semibold" for="code">Kassierer-Code</label>

            <div class="input-group input-group-lg mb-3">
                <span class="input-group-text">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M3 8V6a5 5 0 1 1 10 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h1zm2 0h6V6a3 3 0 0 0-6 0v2z" />
                    </svg>
                </span>

                <!-- Passwortfeld (maskiert) -->
                <input id="code"
                       name="kassiererCode"
                       type="password"
                       class="form-control"
                       placeholder="Code scannen oder tippen"
                       autocomplete="one-time-code"
                       inputmode="numeric"
                       enterkeyhint="done"
                       autofocus
                       required />

                <!-- Anzeigen/Verbergen -->
                <button type="button" class="input-group-text toggle-btn"
                        onclick="const i=this.previousElementSibling; i.type = i.type==='password' ? 'text' : 'password'; this.classList.toggle('showing');"
                        aria-label="Code anzeigen/verbergen">
                    <svg class="eye eye-closed" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M13.359 11.238 15 12.88l-.707.707-1.652-1.652A8.46 8.46 0 0 1 8 13.5C3.5 13.5.5 8 .5 8s.933-1.6 2.47-3.07L1.22 3.18 1.927 2.47 13.359 11.238zM5.354 6.232 9.77 9.648A3 3 0 0 0 5.354 6.232zM8 2.5c4.5 0 7.5 5.5 7.5 5.5a14.26 14.26 0 0 1-2.006 2.62l-.722-.722C13.831 8.91 14.5 8 14.5 8S11.5 3.5 8 3.5c-.907 0-1.76.26-2.527.71l-.7-.7A8.48 8.48 0 0 1 8 2.5z" />
                    </svg>
                    <svg class="eye eye-open d-none" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M16 8s-3 5.5-8 5.5S0 8 0 8s3-5.5 8-5.5S16 8 16 8zM8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z" />
                    </svg>
                </button>
            </div>

            <button class="btn btn-primary btn-lg w-100 mb-2" type="submit">Einloggen</button>

        </form>
    </div>
</div>

<footer class="login-footer text-center text-muted small">
    &copy; @DateTime.Now.Year Lambertz – ScannerPilot
</footer>

<style>
    /* Hintergrund */
    .login-wrap {
        background: radial-gradient(1200px 600px at 10% -10%, #e9d7ff 0%, rgba(233, 215, 255, 0) 60%), radial-gradient(1200px 600px at 110% 110%, #d6e4ff 0%, rgba(214, 228, 255, 0) 60%), #f7f7fb;
        padding: 1rem;
    }

    /* Karte */
    .login-card {
        width: 100%;
        max-width: 420px;
        background: #fff;
        border-radius: 16px;
        padding: 22px 22px 18px;
        border: 1px solid rgba(0,0,0,.06);
    }

    .brand {
        font-weight: 700;
        font-size: 1.15rem;
        letter-spacing: .2px;
    }

    .subtitle {
        color: #6c757d;
        font-size: .95rem;
    }

    /* Input Eye Button */
    .toggle-btn {
        cursor: pointer;
        user-select: none;
        border-left: 0;
        background: #fff;
    }

        .toggle-btn .eye {
            transition: opacity .15s ease;
        }

        .toggle-btn.showing .eye-closed {
            display: none !important;
        }

        .toggle-btn.showing .eye-open {
            display: inline !important;
        }

    /* Mobile Tuning */
    @@media (max-width: 480px) {
        .login-card {
            padding: 18px 16px 14px;
            border-radius: 14px;
        }

        .brand {
            font-size: 1.05rem;
        }

        .subtitle {
            font-size: .9rem;
        }
    }

    .login-footer {
        padding: .75rem 0 1rem;
    }
</style>
