<div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg">
    <div class="mb-4">
        <LinkTo @route="console" class="flex items-center justify-center">
            <LogoIcon @size="12" class="rounded-md" />
        </LinkTo>
        <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
            {{if this.isSent (t "auth.forgot-password.is-sent.title") (t "auth.forgot-password.not-sent.title")}}
        </h2>
    </div>

    {{#if this.isSent}}
        <InfoBlock @type="success" @icon="info-circle" @iconSize="lg" @iconClass="mt-1" class="my-6">
            <p>
                {{t "auth.forgot-password.is-sent.message" htmlSafe=true}}
            </p>
        </InfoBlock>
        <div class="flex flex-row">
            <Button @icon="check" @type="primary" @text={{t "common.continue"}} @onClick={{transition-to "auth.login"}} />
        </div>
    {{else}}
        <InfoBlock @icon="info-circle" @iconSize="lg" @iconClass="mt-1" class="my-6">
            <p>
                {{t "auth.forgot-password.not-sent.message" htmlSafe=true appName=(t "app.name")}}
            </p>
        </InfoBlock>

        <form class="space-y-6" {{on "submit" (perform this.sendSecureLink)}}>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-50">
                    {{t "auth.forgot-password.form.email-label"}}
                </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={{t "auth.forgot-password.form.email-label"}}
                    />
                </div>
            </div>

            <div class="flex flex-row space-x-2">
                <Button
                    @icon="magic"
                    @type="primary"
                    @buttonType="submit"
                    @text={{t "auth.forgot-password.form.submit-button"}}
                    @onClick={{perform this.sendSecureLink}}
                    @isLoading={{this.sendSecureLink.isRunning}}
                />
                <Button @buttonType="button" @text={{t "auth.forgot-password.form.nevermind-button"}} @onClick={{fn (transition-to "auth.login")}} @disabled={{this.isLoading}} />
            </div>
        </form>
    {{/if}}
</div>