@page "/auth"
@layout EmptyLayout

<PageTitle>WatchIt - @(_isSingUp ? "Sign up" : "Sign in")</PageTitle>



@if (_loaded)
{
    <div class="h-100 d-flex align-items-center justify-content-center">
        <div class="panel panel-header rounded-3 p-3">
            <div class="d-flex flex-column align-items-center gap-3">
                <a id="logo" class="logo m-0" href="/">WatchIt</a>
                @if (_isSingUp)
                {
                    <EditForm Model="@(_registerModel)">
                        <AntiforgeryToken/>
                        <div class="container-grid">
                            <div class="row form-group mb-1">
                                <label for="username" class="col-5 col-form-label">Username:</label>
                                <div class="col">
                                    <InputText id="username" class="form-control" @bind-Value="_registerModel!.Username"/>
                                </div>
                            </div>
                            <div class="row form-group my-1">
                                <label for="email" class="col-5 col-form-label">Email:</label>
                                <div class="col">
                                    <InputText id="email" class="form-control" @bind-Value="_registerModel!.Email"/>
                                </div>
                            </div>
                            <div class="row form-group my-1">
                                <label for="password" class="col-5 col-form-label">Password:</label>
                                <div class="col">
                                    <InputText id="password" class="form-control" type="password" @bind-Value="_registerModel!.Password"/>
                                </div>
                            </div>
                            <div class="row form-group my-1">
                                <label for="confpassword" class="col-5 col-form-label">Confirm password:</label>
                                <div class="col">
                                    <InputText id="confpassword" class="form-control" type="password" @bind-Value="_registerPasswordConfirmation"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col align-self-center">
                                    <span class="text-@(_formMessageIsSuccess ? "success" : "danger")">@_formMessage</span>
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn btn-dark" @onclick="@(Register)">Sign up</button>
                                </div>
                            </div>
                        </div>
                    </EditForm>
                }
                else
                {
                    <EditForm Model="@(_loginModel)">
                        <AntiforgeryToken/>
                        <div class="container-grid">
                            <div class="row form-group mb-1">
                                <label for="username" class="col-5 col-form-label">Username or email:</label>
                                <div class="col">
                                    <InputText id="username" class="form-control" @bind-Value="_loginModel!.UsernameOrEmail"/>
                                </div>
                            </div>
                            <div class="row form-group my-1">
                                <label for="password" class="col-5 col-form-label">Password:</label>
                                <div class="col">
                                    <InputText id="password" type="password" class="form-control" @bind-Value="_loginModel!.Password"/>
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col">
                                    <div class="form-check">
                                        <InputCheckbox class="form-check-input" @bind-Value="_loginModel!.RememberMe"/>
                                        <label class="form-check-label">Remember me</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col align-self-center">
                                    <span class="text-@(_formMessageIsSuccess ? "success" : "danger")">@_formMessage</span>
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="btn btn-dark" @onclick="@(Login)">Sign in</button>
                                </div>
                            </div>
                        </div>
                    </EditForm>
                }
                <div class="btn-group w-100">
                    <input type="radio" class="btn-check" name="signtype" id="signin" autocomplete="off" checked="@(!_isSingUp)" @onclick="() => { _isSingUp = false; _formMessage = null; _formMessageIsSuccess = false; }">
                    <label class="btn btn-outline-secondary btn-sm" for="signin">Sign in</label>
                    <input type="radio" class="btn-check" name="signtype" id="signup" autocomplete="off" checked="@(_isSingUp)" @onclick="() => { _isSingUp = true; _formMessage = null; _formMessageIsSuccess = false; }">
                    <label class="btn btn-outline-secondary btn-sm" for="signup">Sign up</label>
                </div>
            </div>
        </div>
    </div>



    <style>
        /* TAGS */
        
        body {
            background-image: url('@(_background is null ? "assets/background_temp.jpg": _background.ToString())');
        }
    
    
        /* IDS */
    
        #logo {
            background-image: linear-gradient(45deg, @(_background is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(_background.Background.FirstGradientColor)}, #{Convert.ToHexString(_background.Background.SecondGradientColor)}"));
        }
    </style>
}