@page "/login"
@using FoodsharingSiegen.Shared.Helper
@layout LoginLayout

@inherits FoodsharingSiegen.Server.BaseClasses.FsBase

<PageTitle>@AppSettings.Terms.Title - Login</PageTitle>

<div class="d-flex justify-content-center align-items-center-sm" style="min-height: 100vh; align-items: start;">
    <div class="card shadow border-0" style="width: 100%; max-width: 420px; border-radius: 12px; margin: 1rem;">
        
        <div class="card-body p-4 p-md-5">
            <div class="text-center mb-4">
                <i class="fa-solid fa-leaf mb-3" style="font-size: 3rem; color: #64ae24;"></i>
                <h4 class="font-weight-bold" style="color: #533a20;"><small style="font-size: .6em;" class="d-block">Einarbeitungen</small> @AppSettings.Terms.Title</h4>
                <p class="text-muted">Bitte melde dich an, um fortzufahren.</p>
            </div>

            <Validation Validator="ValidationHelper.ValidateMail" @bind-Status="@IsValidMail">
                <Field>
                    <FieldLabel>E-Mail Adresse</FieldLabel>
                    <TextEdit @bind-Text="MailAddress" Role="TextRole.Email" Placeholder="E-Mail" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
                </Field>
            </Validation>

            <Validation Validator="ValidationHelper.ValidatePassword" @bind-Status="@IsValidPassword">
                <Field Class="mt-3">
                    <FieldLabel>Passwort</FieldLabel>
                    <TextEdit @bind-Text="Password" Role="TextRole.Password" Placeholder="Passwort" KeyUp="TextEdit_KeyUp" Size="Size.Large"></TextEdit>
                </Field>
            </Validation>

            @if (!string.IsNullOrEmpty(LoginErrorMessage))
            {
                <div class="text-danger mt-3 text-center">
                    <i class="fas fa-exclamation-triangle mr-1"></i> @LoginErrorMessage
                </div>
            }

            <Button Class="mt-4 w-100" Color="Color.Primary" Size="Size.Large" Clicked="PerformLogin" Disabled="@(IsValidMail != ValidationStatus.Success || IsValidPassword != ValidationStatus.Success)">
                <i class="fas fa-sign-in-alt mr-2"></i> Einloggen
            </Button>
            <div class="d-flex justify-content-center align-items-center mt-2">
                <a href="/forgot-password" tabindex="-1" style="font-size: 0.85rem; color: #64ae24; text-decoration: none;">Passwort vergessen?</a>
            </div>
        </div>
    </div>
</div>