@page "/login"
@inherits StudioComponentBase
@layout BasicLayout

@* <div class="login-backdrop" style="left:0; top: 0; bottom:0; right:0; position: fixed; background-color: red; background-image: url(_content/Elsa.Studio.Login/bg.jpg); background-repeat: no-repeat; background-size: cover;"> *@
<div class="d-flex justify-end flex-grow-1">
    <MudIconButton Icon="@Icons.Material.Outlined.Book" Color="Color.Inherit" Href="https://v3.elsaworkflows.io/" Target="_blank" title="Documentation"/>
    <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://github.com/elsa-workflows/elsa-core" Target="_blank" title="Source code"/>
</div>

<MudContainer MaxWidth="MaxWidth.Small">
    <MudStack Spacing="10">
        <h2 class="LoginTitle"></h2>
        @* <h2 class="LoginTitle">Elsa @ServerVersion</h2> *@
        <MudPaper Elevation="1">
            <MudGrid Spacing="0" Justify="Justify.Center">
                <MudItem md="9" xs="7" Class="pa-4 mx-auto my-4">
                    <MudStack Spacing="1">
                        <MudText Typo="Typo.h5">Login</MudText>
                        <EditForm Model="@_model" OnValidSubmit="TryLogin">
                            <div class="d-flex flex-column">
                                <DataAnnotationsValidator/>
                                <MudTextField Label="Username" Required="true" Variant="Variant.Outlined" For="@(() => _model.Username)" @bind-Value="_model.Username" autocomplete="username"/>
                                <MudTextField Label="Password" Required="true" Variant="Variant.Outlined" For="@(() => _model.Password)" @bind-Value="_model.Password" InputType="InputType.Password" autocomplete="current-password"/>
                                <MudCheckBox @bind-Value="_model.RememberMe" Label="Remember me"/>
                                <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="mt-3 align-self-end">Login</MudButton>
                            </div>
                        </EditForm>
                    </MudStack>
                </MudItem>
            </MudGrid>
        </MudPaper>
    </MudStack>
    @* <MudText Typo="Typo.subtitle2" Align="Align.Center" Class="mt-2">Elsa Studio @ClientVersion</MudText> *@
</MudContainer>
@* </div> *@