@inject IUserService userService
@inject NavigationManager navigationManager
@inject IJSRuntime jsRuntime

@if(authorized) {
    <div id="navbar">
        <a href="/">Home</a>
        <a href="/TagDefinitions">Tags</a>
        <a href="/Gallery?ingest=true">Ingest</a>
        <a href="/Upload">Upload</a>
        <a href="javascript:;" @onclick=@(() => aboutDialog.Show())>About</a>

        <p id="nsfw-label">NSFW</p>
        <div id="nsfw-switch">
            <NsfwSwitch/>
        </div>
        <form action="/Gallery" method="get">
            <input type="text" name="q" placeholder="Search"/>
        </form>
        <a href="javascript:;" @onclick=userService.Logout>Logout</a>
    </div>
    <AboutDialog @ref=aboutDialog/>
} else {
    <div id="navbar">
        <h2>Login</h2>
        <form @onsubmit=Login class="login">
            <input @bind=username name="username" placeholder="Username" type="text"/>
            <input @bind=password name="password" placeholder="Password" type="password"/>
        </form>
        <a href="javascript:;" @onclick=Login>Login</a>
        <a href="javascript:;" @onclick=userService.Logout>Logout</a>
    </div>
    <script suppress-error="BL9992">
        function warnBadLogin() {
            var form = document.querySelector('form.login');
            form.classList.remove('bad-login');
            @* TODO: improve this hacky method of triggering reflow *@
            form.offsetWidth;
            form.classList.add('bad-login');
            document.querySelector('form.login input').focus();
        }
    </script>
}

@code {
    private bool authorized = false;

    private string username;
    private string password;

    private AboutDialog aboutDialog;

    private void Login() {
        if(userService.Login(username, password))
            navigationManager.NavigateTo("/");
        else
            WarnBadLogin();
    }

    private void WarnBadLogin() {
        jsRuntime.InvokeVoidAsync("warnBadLogin");
        username = password = "";
    }
}