<div class="bg-white dark:bg-gray-800 py-8 px-4 shadow rounded-lg">
    <div class="mb-4">
        <LinkTo @route="portal" class="flex items-center justify-center">
            <LogoIcon @brand={{@brand}} @size="12" class="rounded-md" />
        </LinkTo>
        <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
            {{t "auth.reset-password.title"}}
        </h2>
    </div>

    <form class="space-y-6" {{on "submit" (perform this.resetPassword)}}>
        <InputGroup @name={{t "auth.reset-password.form.code.label"}} @value={{this.code}} @inputClass="form-input-lg" @helpText={{t "auth.reset-password.form.code.help-text"}} />
        <InputGroup @name={{t "auth.reset-password.form.password.label"}} @value={{this.password}} @type="password" @inputClass="form-input-lg" @helpText={{t "auth.reset-password.form.password.help-text"}} />
        <InputGroup @name={{t "auth.reset-password.form.confirm-password.label"}} @value={{this.password_confirmation}} @type="password" @inputClass="form-input-lg" @helpText={{t "auth.reset-password.form.confirm-password.help-text"}} />

        <div class="flex space-x-2">
            <Button @icon="check" @size="lg" @type="primary" @buttonType="submit" @text={{t "auth.reset-password.form.submit-button"}} @onClick={{perform this.resetPassword}} @isLoading={{not this.resetPassword.isIdle}} />
            <Button @size="lg" @buttonType="button" @text={{t "auth.reset-password.form.back-button"}} @onClick={{fn (transition-to "portal-auth.login")}} @disabled={{not this.resetPassword.isIdle}} />
        </div>
    </form>
</div>