<!-- Form group -->
<div x-data="{
    imageUrl: null,

    handleFileChange(event) {
        const file = event.target.files[0];
        if (!file) return;

        if (this.imageUrl) {
            URL.revokeObjectURL(this.imageUrl);
        }

        this.imageUrl = URL.createObjectURL(file);
    },

    deleteImage() {
        if (this.imageUrl) {
            URL.revokeObjectURL(this.imageUrl);
        }
        this.imageUrl = null;
        this.$refs.fileInput.value = null;
    }
}" class="flex items-center gap-x-4">
    <div class="shrink-0 inline-flex relative">
        <!-- placeholder icon -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20" class="size-16 text-border" x-show="!imageUrl">
            <path fill="currentColor"
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 4c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6m0 14c-2.03 0-4.43-.82-6.14-2.88a9.95 9.95 0 0 1 12.28 0C16.43 19.18 14.03 20 12 20" />
        </svg>

        <!-- image preview -->
        <img x-show="imageUrl" x-bind:src="imageUrl" alt="..." class="size-16 object-cover rounded-full" />

        <!-- remove image button -->
        <button type="button" x-show="imageUrl" x-on:click="deleteImage()"
            class="inline-flex items-center justify-center absolute -top-1 -end-1 size-6 bg-background border rounded-full text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-foreground hover:bg-muted active:scale-95">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                <path
                    d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
            </svg>
        </button>
    </div>

    <div class="grow flex flex-col items-start gap-y-2">
        <!-- upload/change button -->
        <button type="button"
            class="inline-flex items-center justify-center h-9 bg-background border rounded-lg font-medium text-xs text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-foreground hover:bg-muted active:scale-95 px-4"
            x-on:click="$refs.fileInput.click()">
            <span x-show="!imageUrl">انتخاب تصویر</span>
            <span x-show="imageUrl">تغییر تصویر</span>
        </button>

        <!-- hidden file input -->
        <input type="file" name="avatar" id="avatar" x-ref="fileInput" accept=".jpg, .jpeg, .png" class="sr-only"
            x-on:change="handleFileChange($event)" />

        <!-- note for supported formats -->
        <p class="font-medium text-xs text-muted-foreground">فرمت‌های مجاز: jpg, jpeg, png</p>
    </div>
</div>
<!-- end Form group -->

<!-- Form group -->
<div x-data="{
    imageUrl: null,

    handleFileChange(event) {
        const file = event.target.files[0];
        if (!file) return;

        if (this.imageUrl) {
            URL.revokeObjectURL(this.imageUrl);
        }

        this.imageUrl = URL.createObjectURL(file);
    },

    deleteImage() {
        if (this.imageUrl) {
            URL.revokeObjectURL(this.imageUrl);
        }
        this.imageUrl = null;
        this.$refs.fileInput.value = null;
    }
}" class="flex flex-col gap-y-1.5">
    <!-- Input label -->
    <label for="photo" class="font-semibold text-xs">تصویر:</label>

    <div class="flex flex-col items-center justify-center bg-background border-2 border-dotted rounded-lg py-5 px-3.5">
        <!-- placeholder icon -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-16 text-border" x-show="!imageUrl">
            <path
                d="M8.5 13.498l2.5 3.006l3.5-4.506l4.5 6H5m16 1v-14a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2z"
                fill="currentColor" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-16 text-border" x-show="imageUrl">
            <path fill="currentColor"
                d="m22.7 14.3l-1 1l-2-2l1-1c.1-.1.2-.2.4-.2c.1 0 .3.1.4.2l1.3 1.3c.1.2.1.5-.1.7M13 19.9V22h2.1l6.1-6.1l-2-2zM21 5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h6v-1.9l1.1-1.1H5l3.5-4.5l2.5 3l3.5-4.5l1.6 2.1l4.9-5z" />
        </svg>

        <div class="flex flex-col items-center gap-y-2">
            <!-- upload/change button -->
            <button type="button"
                class="inline-flex items-center justify-center h-10 bg-transparent border border-transparent rounded-lg font-semibold text-xs text-primary cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6"
                x-on:click="$refs.fileInput.click()">
                <span x-show="!imageUrl">انتخاب تصویر</span>
                <span x-show="imageUrl">تغییر تصویر</span>
            </button>

            <!-- hidden file input -->
            <input type="file" name="photo" id="photo" x-ref="fileInput" accept=".jpg, .jpeg, .png" class="sr-only"
                x-on:change="handleFileChange($event)" />

            <!-- note for supported formats -->
            <p class="font-medium text-xs text-muted-foreground">
                فرمت تصویر jpeg یا png و حداکثر یک مگابایت
            </p>
        </div>
    </div>

    <div class="flex gap-1 mt-2" x-show="imageUrl">
        <div class="inline-flex relative">
            <!-- image preview -->
            <img x-bind:src="imageUrl" alt="..." class="size-16 object-cover rounded-lg" />

            <!-- remove image button -->
            <button type="button" x-on:click="deleteImage()"
                class="inline-flex items-center justify-center absolute -top-2 -end-2 size-6 bg-background border rounded-full text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-foreground hover:bg-muted active:scale-95">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path
                        d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
                </svg>
            </button>
        </div>
    </div>
</div>
<!-- end Form group -->