<div
    class="modal fade"
    id="avatar-modal"
    role="dialog"
    aria-labelledby="avatar-modal-label"
    aria-hidden="true"
    tabindex="-1"
>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form
                class="avatar-form"
                method="post"
                action="{{ route('public.account.avatar') }}"
                enctype="multipart/form-data"
            >
                <div class="modal-header">
                    <h4
                        class="modal-title"
                        id="avatar-modal-label"
                    ><i class="til_img"></i><strong>{{ trans('plugins/real-estate::dashboard.change_profile_image') }}</strong>
                    </h4>
                    <button
                        class="btn-close"
                        data-bs-dismiss="modal"
                        type="button"
                    ></button>
                </div>
                <div class="modal-body">

                    <div class="avatar-body">

                        <!-- Upload image and data -->
                        <div class="avatar-upload">
                            <input
                                class="avatar-src"
                                name="avatar_src"
                                type="hidden"
                            >
                            <input
                                class="avatar-data"
                                name="avatar_data"
                                type="hidden"
                            >
                            @csrf
                            <label for="avatarInput">{{ trans('plugins/real-estate::dashboard.new_image') }}</label>
                            <input
                                class="avatar-input"
                                id="avatarInput"
                                name="avatar_file"
                                type="file"
                            >
                        </div>

                        <div
                            class="loading"
                            role="img"
                            aria-label="{{ trans('plugins/real-estate::dashboard.loading') }}"
                            tabindex="-1"
                        ></div>

                        <!-- Crop and preview -->
                        <div class="row">
                            <div class="col-md-9">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="col-md-3 avatar-preview-wrapper">
                                <div class="avatar-preview preview-lg"></div>
                                <div class="avatar-preview preview-md"></div>
                                <div class="avatar-preview preview-sm"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button
                        class="btn btn-secondary"
                        data-bs-dismiss="modal"
                        type="button"
                    >{{ trans('plugins/real-estate::dashboard.close') }}</button>
                    <button
                        class="btn btn-primary avatar-save"
                        type="submit"
                    >{{ trans('plugins/real-estate::dashboard.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div><!-- /.modal -->
