<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col justify-center py-12">
    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <div class="mb-8">
                <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">
                    {{t "invite.for-users.invitation-message" companyName=@model.name}}
                </h2>
            </div>

            <div class="flex px-3 py-2 mb-6 rounded-md shadow-sm bg-blue-200">
                <div>
                    <FaIcon @icon="info-circle" class="text-blue-900 mr-4" />
                </div>
                <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
                    {{t "invite.for-users.invitation-sent-message" htnmlSafe=true companyName=@model.name appName=(t "app.name")}}
                </p>
            </div>

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

                <div>
                    <Button @icon="check" @size="lg" @type="primary" @buttonType="submit" @text={{t "invite.for-users.accept-invitation-text"}} @onClick={{this.acceptInvite}} @isLoading={{this.isLoading}} />
                </div>
            </form>
        </div>
    </div>
</div>