<div class="bg-white dark:bg-gray-800 py-5 px-4 shadow rounded-lg w-full">
    <div class="mb-4">
        <Image src={{@model.logo_url}} @fallbackSrc="/images/fleetbase-logo-svg.svg" alt={{t "app.name"}} height="56" class="h-10 object-contain mx-auto" />
        <div class="mt-2">
            <h2 class="text-center text-lg font-extrabold text-gray-900 dark:text-white truncate">
                {{t "onboard.index.title"}}
            </h2>
        </div>
    </div>

    <div class="flex px-3 py-2 mb-4 rounded-md shadow-sm bg-blue-200">
        <div>
            <FaIcon @icon="hand-spock" @size="lg" class="text-blue-900 mr-4" />
        </div>
        <p class="flex-1 text-sm text-blue-900 dark:text-blue-900">
            {{t "onboard.index.welcome-title" htmlSafe=true companyName=(t "app.name")}}
            {{t "onboard.index.welcome-text"}}
        </p>
    </div>

    <form {{on "submit" this.startOnboard}}>
        {{#if this.error}}
            <InfoBlock @icon="exclamation-triangle" @text={{this.error}} class="mb-6 px-3 py-2 bg-red-300 text-red-900" @textClass="text-red-900" />
        {{/if}}
        <InputGroup @name={{t "onboard.index.full-name"}} @value={{this.name}} @helpText={{t "onboard.index.full-name-help-text"}} @inputClass="input-lg" />
        <InputGroup @name={{t "onboard.index.your-email"}} @type="email" @value={{this.email}} @helpText={{t "onboard.index.your-email-help-text"}} @inputClass="input-lg" />
        <InputGroup @name={{t "onboard.index.phone"}} @helpText={{t "onboard.index.phone-help-text"}}>
            <PhoneInput @onInput={{fn (mut this.phone)}} class="form-input input-lg w-full" />
        </InputGroup>
        <InputGroup @name={{t "onboard.index.organization-name"}} @value={{this.organization_name}} @helpText={{t "onboard.index.organization-help-text"}} @inputClass="input-lg" />
        <InputGroup @name={{t "onboard.index.password"}} @value={{this.password}} @type="password" @helpText={{t "onboard.index.password-help-text"}} @inputClass="input-lg" />
        <InputGroup @name={{t "onboard.index.confirm-password"}} @value={{this.password_confirmation}} @type="password" @helpText={{t "onboard.index.confirm-password-help-text"}} @inputClass="input-lg" />

        <div class="flex items-center justify-end mt-5">
            <Button @icon="check" @iconPrefix="fas" @type="primary" @size="lg" @text={{t "onboard.index.continue-button-text"}} @isLoading={{this.isLoading}} @disabled={{this.readyToSubmit}} @onClick={{this.startOnboard}} />
        </div>
    </form>
</div>