<Layout::Section::Header @title="Profile" />

<Layout::Section::Body class="overflow-y-scroll h-full">
    <div class="container mx-auto h-screen" {{increase-height-by 500}}>
        <div class="max-w-3xl my-10 mx-auto">
            <ContentPanel @title="Your Profile" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                <form class="flex flex-col md:flex-row" {{on "submit" 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="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>
                                        Uploading...
                                    </span>
                                {{else}}
                                    <FaIcon @icon="image" class="mr-1.5" />
                                    <span>
                                        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="Name" @value={{this.user.name}} />
                            <InputGroup @name="Email" @type="email" @value={{this.user.email}} />
                            <InputGroup @name="Your phone number" @helpText="Your phone number.">
                                <PhoneInput @value={{this.user.phone}} @onInput={{fn (mut this.user.phone)}} class="form-input input-lg w-full" />
                            </InputGroup>
                            <InputGroup @name="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="Save Changes" @onClick={{this.saveProfile}} @isLoading={{this.isLoading}} />
                        </div>
                    </div>
                </form>
            </ContentPanel>
        </div>
    </div>
</Layout::Section::Body>