<div class="portal-account-settings-stack">
    <form class="portal-account-card flex flex-col md:flex-row" aria-label="Profile settings" {{on "submit" (perform this.saveProfile)}}>
        <div class="w-32 flex flex-col justify-center mb-6 mr-6">
            <Image src={{this.user.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} class="w-32 h-32 rounded-md" />
            <FileUpload @name={{t "console.account.index.photos"}} @accept="image/*" @onFileAdded={{this.uploadNewPhoto}} @labelClass="flex flex-row items-center justify-center" as |queue|>
                <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default" disabled={{queue.files.length}}>
                    {{#if queue.files.length}}
                        <div class="mr-1.5"><Spinner /></div>
                        <span>{{t "common.uploading"}}</span>
                    {{else}}
                        <FaIcon @icon="image" class="mr-1.5" />
                        <span>{{t "console.account.index.upload-new"}}</span>
                    {{/if}}
                </a>
            </FileUpload>
        </div>
        <div class="flex-1">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2 text-xs dark:text-gray-100">
                <InputGroup @name={{t "common.name"}} @value={{this.user.name}} />
                <InputGroup @name={{t "common.email"}} @type="email" @value={{this.user.email}} />
                <InputGroup @name={{t "common.phone"}} @helpText={{t "console.account.index.phone"}}>
                    <PhoneInput @value={{this.user.phone}} @onInput={{fn (mut this.user.phone)}} class="form-input input-lg w-full" />
                </InputGroup>
                <InputGroup @name={{t "common.date-of-birth"}} @type="date" @value={{this.user.date_of_birth}} />
            </div>
            <div class="mt-3 flex items-center justify-end">
                <Button
                    @buttonType="submit"
                    @type="primary"
                    @size="lg"
                    @icon="save"
                    @text={{t "common.save-changes"}}
                    @onClick={{perform this.saveProfile}}
                    @isLoading={{not this.saveProfile.isIdle}}
                />
            </div>
        </div>
    </form>

    <div class="portal-account-card">
        <div class="portal-settings-row">
            <div>
                <div class="portal-settings-row-title">Account type</div>
                <div class="portal-settings-row-copy">
                    {{#if this.isContactAccount}}
                        Personal customer account
                    {{else}}
                        Company account
                    {{/if}}
                </div>
            </div>
            {{#if this.isContactAccount}}
                <button type="button" class="portal-link-button" {{on "click" this.openConvertModal}}>Convert to Company Account</button>
            {{/if}}
        </div>
    </div>

    <form class="portal-account-card" aria-label="Change password" {{on "submit" (perform this.changePassword)}}>
        <div class="portal-settings-row mb-4">
            <div>
                <div class="portal-settings-row-title">Change password</div>
                <div class="portal-settings-row-copy">Update the password used to sign in to this customer portal.</div>
            </div>
        </div>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 text-xs dark:text-gray-100">
            <InputGroup @name="Current Password" @type="password" @value={{this.currentPassword}} />
            <InputGroup @name="New Password" @type="password" @value={{this.newPassword}} />
            <InputGroup @name="Confirm New Password" @type="password" @value={{this.newPasswordConfirmation}} />
        </div>
        <div class="mt-3 flex items-center justify-end">
            <Button
                @buttonType="submit"
                @type="primary"
                @size="lg"
                @icon="lock"
                @text="Change Password"
                @onClick={{perform this.changePassword}}
                @isLoading={{not this.changePassword.isIdle}}
            />
        </div>
    </form>
</div>
