<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">
            Reset your password
        </h2>
    </div>

    <form class="space-y-6" {{on "submit" this.resetPassword}}>
        <InputGroup @name="Your reset code" @value={{this.code}} @inputClass="form-input-lg" @helpText="The verification code you received in your email." />
        <InputGroup @name="New Password" @value={{this.password}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 6 characters to continue." />
        <InputGroup @name="Confirm new Password" @value={{this.password_confirmation}} @type="password" @inputClass="form-input-lg" @helpText="Enter a password at-least 6 characters to continue." />

        <div class="flex space-x-2">
            <Button @icon="check" @size="lg" @type="primary" @buttonType="submit" @text="Reset Password" @onClick={{this.resetPassword}} @isLoading={{this.isLoading}} />
            <Button @size="lg" @buttonType="button" @text="Back" @onClick={{fn (transition-to "auth.login")}} @disabled={{this.isLoading}} />
        </div>
    </form>
</div>