@page "/forgot-password"
@using FoodsharingSiegen.Shared.Helper
@layout LoginLayout

@inherits FoodsharingSiegen.Server.BaseClasses.FsBase

<PageTitle>@AppSettings.Terms.Title - Passwort vergessen</PageTitle>

<div class="d-flex justify-content-center align-items-center" style="min-height: 100vh; background-color: #f4f6f8;">
    <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;">Einarbeitungen</small> @AppSettings.Terms.Title</h4>
                <p class="text-muted">Passwort zurücksetzen</p>
            </div>

            @if (IsSubmitted)
            {
                <div class="alert alert-success text-center">
                    Wenn ein Benutzerkonto mit dieser E-Mail-Adresse existiert, wurde eine E-Mail mit weiteren Anweisungen versendet.
                </div>
                <div class="text-center mt-4">
                    <a href="/login" class="btn btn-outline-primary"><i class="fas fa-arrow-left mr-2"></i> Zurück zum Login</a>
                </div>
            }
            else
            {
                <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>

                <Button Class="mt-4 w-100" Color="Color.Primary" Size="Size.Large" Clicked="SubmitRequest" Disabled="@(IsValidMail != ValidationStatus.Success || IsLoading)">
                    @if (IsLoading)
                    {
                        <i class="fas fa-spinner fa-spin mr-2"></i> <span>Wird gesendet...</span>
                    }
                    else
                    {
                        <i class="fas fa-paper-plane mr-2"></i> <span>Passwort zurücksetzen</span>
                    }
                </Button>
                
                <div class="text-center mt-3">
                    <a href="/login" style="font-size: 0.85rem; color: #64ae24; text-decoration: none;"><i class="fas fa-arrow-left mr-1"></i> Zurück zum Login</a>
                </div>
            }
        </div>
    </div>
</div>