<div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg">
    <div class="mb-4">
        <Image src={{@model.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} width="160" height="56" class="w-40 h-14 mx-auto" />
        <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
            {{if this.isSent "Almost done!" "Forgot your password?"}}
        </h2>
    </div>

    {{#if this.isSent}}
        <div class="flex px-3 py-2 mb-4 rounded-md shadow-sm bg-green-200">
            <div>
                <FaIcon @icon="check-circle" @size="lg" class="text-green-900 mr-4" />
            </div>
            <p class="flex-1 text-sm text-green-900 dark:text-green-900">
                <strong>Check your email!</strong><br> We've sent you a magic link to your email which will allow you to reset your password. The link expires in 15 minutes.
            </p>
        </div>
    {{else}}
        <div class="flex px-3 py-2 mb-6 rounded-md shadow-sm bg-blue-200">
            <div>
                <FaIcon @icon="info-circle" @size="lg" class="text-blue-900 mr-4" />
            </div>
            <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
                <strong>Don't worry, we've got your back.</strong><br> Enter the email you use to login to {{t "app.name"}} and we will send you a secure link to reset your password.
            </p>
        </div>

        <form class="space-y-6" {{on "submit" this.sendSecureLink}}>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-50">
                    Your email address
                </label>
                <div class="mt-2">
                    <Input @value={{this.email}} @type="email" id="email" name="email" required class="form-input form-input-lg w-full" placeholder="Your email" />
                </div>
            </div>

            <div class="flex flex-row space-x-2">
                <Button @icon="magic" @type="primary" @buttonType="submit" @text="OK, Send me a magic link!" @onClick={{this.sendSecureLink}} @isLoading={{this.isLoading}} />
                <Button @buttonType="button" @text="Nevermind" @onClick={{fn (transition-to "auth.login")}} @disabled={{this.isLoading}} />
            </div>
        </form>
    {{/if}}
</div>