<div class="space-y-8">
    <div class="space-y-1.5">
        <h3 class="font-bold text-lg">
            پروفایل
        </h3>
        <p class="font-medium text-xs text-muted-foreground">
            این اطلاعات به طور عمومی نمایش داده خواهد شد، پس در به اشتراک گذاشتن آن دقت کنید.
        </p>
    </div>

    <form action="#" method="post" class="grid sm:grid-cols-6 grid-cols-1 sm:gap-x-5 gap-y-8">
        <!-- Form group -->
        <div class="sm:col-span-4 flex flex-col gap-y-1.5">
            <!-- Input label -->
            <label for="username" class="font-semibold text-xs">نام کاربری:</label>
            <div class="flex items-center  w-full h-12 bg-background border border-input rounded-md shadow-xs font-sans overflow-hidden transition-[color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50 ps-3 py-1"
                dir="ltr">
                <span class="font-normal text-sm text-muted-foreground">spacedev.ir</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 text-muted-foreground">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="M17 5L7 19" />
                </svg>
                <!-- Text input field -->
                <input type="text" name="username" id="username"
                    class="block w-full h-12 bg-transparent border-0 font-normal text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-muted-foreground/70 pe-3"
                    placeholder="bahramirad" />
            </div>
        </div>
        <!-- end Form group -->

        <!-- Form group -->
        <div class="col-span-full flex flex-col gap-y-1.5">
            <!-- Textarea label -->
            <label for="about" class="font-semibold text-xs">درباره من:</label>
            <!-- Textarea field -->
            <textarea rows="5" name="about" id="about"
                class="block w-full bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 p-3"></textarea>
            <p class="font-medium text-xs text-muted-foreground">
                چند جمله درباره‌ی خودت بنویس.
            </p>
        </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="col-span-full 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" id="avatar" name="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="col-span-full flex flex-col gap-y-1.5">
            <!-- Input label -->
            <label for="cover" 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" id="cover" name="cover" 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 -->

        <div class="col-span-full flex gap-x-1.5 justify-end">
            <button type="button"
                class="inline-flex items-center justify-center h-10 bg-transparent border rounded-lg text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-foreground hover:bg-muted active:scale-95 px-6">
                <span class="font-semibold text-xs">لغو</span>
            </button>
            <button type="submit"
                class="inline-flex items-center justify-center gap-x-2 h-10 bg-primary border border-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
                <span class="font-semibold text-xs">ذخیره</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd"
                        d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                        clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    </form>
</div>

<div class="block w-full h-px bg-border my-12"></div>

<div class="space-y-8">
    <div class="space-y-1.5">
        <h3 class="font-bold text-lg">
            اطلاعات شخصی
        </h3>
        <p class="font-medium text-xs text-muted-foreground">
            از یک آدرس ثابت استفاده کنید که ارسال‌ها به آنجا انجام شود.
        </p>
    </div>

    <form action="#" method="post" class="grid sm:grid-cols-6 grid-cols-1 gap-x-5 gap-y-8">
        <!-- Form group -->
        <div class="sm:col-span-3 flex flex-col gap-y-1.5">
            <!-- Input label -->
            <label for="name" class="font-semibold text-xs">نام:</label>
            <!-- Text input field -->
            <input type="text" name="name" id="name"
                class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
        </div>
        <!-- end Form group -->

        <!-- Form group -->
        <div class="sm:col-span-3 flex flex-col gap-y-1.5">
            <!-- Input label -->
            <label for="lastname" class="font-semibold text-xs">نام خانوادگی:</label>
            <!-- Text input field -->
            <input type="text" name="lastname" id="lastname"
                class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
        </div>
        <!-- end Form group -->

        <!-- Form group -->
        <div class="sm:col-span-4 flex flex-col gap-y-1.5">
            <!-- Input label -->
            <label for="email" class="font-semibold text-xs">ایمیل:</label>
            <!-- Text input field -->
            <input type="email" dir="ltr" name="email" id="email"
                class="block w-full h-12 bg-background border border-input rounded-md shadow-xs font-sans font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 px-3 py-1" />
        </div>
        <!-- end Form group -->

        <!-- Form group -->
        <div class="sm:col-span-3 flex flex-col gap-y-1.5">
            <!-- Input label -->
            <label for="province" class="font-semibold text-xs">استان:</label>
            <!-- Select Menu -->
            <div class="relative w-full" x-data="{ isOpen: false, placeholder: '', province: '', filterText: '' }">
                <!-- Hidden input for form submission -->
                <input type="hidden" name="province" id="province" class="peer" x-model="province" />

                <!-- Trigger -->
                <button type="button"
                    class="flex items-center w-full h-12 bg-background border border-input rounded-md shadow-xs cursor-pointer outline-hidden peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-[color,box-shadow] focus:border-ring focus:ring-2 focus:ring-ring/50 px-3 py-1"
                    x-on:click="isOpen = !isOpen">
                    <span class="font-medium text-sm" x-text="placeholder || 'انتخاب کنید'"></span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 ms-auto">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="m7 15l5 5l5-5M7 9l5-5l5 5" />
                    </svg>
                </button>

                <div class="absolute z-10 mt-2 w-full bg-background border rounded-md shadow-lg" x-cloak x-show="isOpen"
                    x-on:click.outside="isOpen = false" x-transition>
                    <!-- Search -->
                    <div class="border-b p-2.5">
                        <input type="text" x-model="filterText"
                            class="block w-full h-10 bg-muted border border-input rounded-lg outline-hidden font-medium text-xs px-3.5"
                            placeholder="جستجو..." />
                    </div>

                    <!-- Options -->
                    <ul class="max-h-40 overflow-auto">
                        <!-- form:select option -->
                        <template x-for="option in [
                            {id: 1, name: 'خراسان شمالی'},
                            {id: 2, name: 'خراسان رضوی'},
                            {id: 3, name: 'خراسان جنوبی'},
                            {id: 4, name: 'تهران'},
                            {id: 5, name: 'اصفهان'},
                            {id: 6, name: 'فارس'},
                            {id: 7, name: 'آذربایجان شرقی'},
                            {id: 8, name: 'آذربایجان غربی'},
                            // می‌توانید بقیه استان‌ها را اینجا اضافه کنید
                        ]">
                            <li class="cursor-pointer px-4 py-2 text-sm"
                                x-bind:class="province !== option.id.toString() ? 'text-muted-foreground hover:bg-muted hover:text-foreground' : 'bg-primary text-primary-foreground hover:bg-primary'"
                                x-show="option.name.includes(filterText)"
                                x-on:click="placeholder=option.name;province=option.id.toString();filterText = '';isOpen=false;"
                                x-text="option.name">
                            </li>
                        </template>
                    </ul>
                </div>

            </div>
            <!-- end Select Menu -->
        </div>
        <!-- end Form group -->

        <!-- Form group -->
        <div class="sm:col-span-3 flex flex-col gap-y-1.5">
            <!-- Input label -->
            <label for="city" class="font-semibold text-xs">شهر:</label>
            <!-- Select Menu -->
            <div class="relative w-full" x-data="{ isOpen: false, placeholder: '', city: '', filterText: '' }">
                <!-- Hidden input for form submission -->
                <input type="hidden" name="city" id="city" class="peer" x-model="city" />

                <!-- Trigger -->
                <button type="button"
                    class="flex items-center w-full h-12 bg-background border border-input rounded-md shadow-xs cursor-pointer outline-hidden peer-disabled:pointer-events-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 transition-[color,box-shadow] focus:border-ring focus:ring-2 focus:ring-ring/50 px-3 py-1"
                    x-on:click="isOpen = !isOpen">
                    <span class="font-medium text-sm" x-text="placeholder || 'انتخاب کنید'"></span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4 ms-auto">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            stroke-width="2" d="m7 15l5 5l5-5M7 9l5-5l5 5" />
                    </svg>
                </button>

                <div class="absolute z-10 mt-2 w-full bg-background border rounded-md shadow-lg" x-cloak x-show="isOpen"
                    x-on:click.outside="isOpen = false" x-transition>
                    <!-- Search -->
                    <div class="border-b p-2.5">
                        <input type="text" x-model="filterText"
                            class="block w-full h-10 bg-muted border border-input rounded-lg outline-hidden font-medium text-xs px-3.5"
                            placeholder="جستجو..." />
                    </div>

                    <!-- Options -->
                    <ul class="max-h-40 overflow-auto">
                        <!-- form:select option -->
                        <template x-for="option in [
                            {id: 1, name: 'بجنورد'},
                            {id: 2, name: 'شیروان'},
                            {id: 3, name: 'اسفراین'},
                            {id: 4, name: 'آشخانه'},
                            {id: 5, name: 'درق'},
                            {id: 6, name: 'گرمه'},
                            {id: 7, name: 'فاروج'},
                            {id: 8, name: 'راز'},
                            // می‌توانید بقیه شهرها را اینجا اضافه کنید
                        ]">
                            <li class="cursor-pointer px-4 py-2 text-sm"
                                x-bind:class="city !== option.id.toString() ? 'text-muted-foreground hover:bg-muted hover:text-foreground' : 'bg-primary text-primary-foreground hover:bg-primary'"
                                x-show="option.name.includes(filterText)"
                                x-on:click="placeholder=option.name;city=option.id.toString();filterText = '';isOpen=false;"
                                x-text="option.name">
                            </li>
                        </template>
                    </ul>
                </div>

            </div>
            <!-- end Select Menu -->
        </div>
        <!-- end Form group -->

        <!-- Form group -->
        <div class="col-span-full flex flex-col gap-y-1.5">
            <!-- Textarea label -->
            <label for="address" class="font-semibold text-xs">آدرس:</label>
            <!-- Textarea field -->
            <textarea rows="5" name="address" id="address"
                class="block w-full bg-background border border-input rounded-md shadow-xs font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 placeholder:text-muted-foreground/70 p-3"></textarea>
        </div>
        <!-- end Form group -->

        <div class="col-span-full flex gap-x-1.5 justify-end">
            <button type="button"
                class="inline-flex items-center justify-center h-10 bg-transparent border rounded-lg text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-foreground hover:bg-muted active:scale-95 px-6">
                <span class="font-semibold text-xs">لغو</span>
            </button>
            <button type="submit"
                class="inline-flex items-center justify-center gap-x-2 h-10 bg-primary border border-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
                <span class="font-semibold text-xs">ذخیره</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd"
                        d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                        clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    </form>
</div>

<div class="block w-full h-px bg-border my-12"></div>

<div class="space-y-8">
    <div class="space-y-1.5">
        <h3 class="font-bold text-lg">
            اعلان‌ها
        </h3>
        <p class="font-medium text-xs text-muted-foreground">
            ما همیشه شما را از تغییرات مهم مطلع خواهیم کرد، اما شما انتخاب می‌کنید که مایلید از
            چه چیزهای دیگری خبردار شوید.
        </p>
    </div>

    <form action="#" method="post" class="grid sm:grid-cols-6 grid-cols-1 gap-x-5 gap-y-8">
        <!-- Form group -->
        <div class="col-span-full grid gap-y-5">
            <!-- Title -->
            <h3 class="font-semibold text-sm select-none">
                نوع اعلان‌های دریافتی:
            </h3>
            <!-- Checkbox options container -->
            <div class="space-y-5">
                <!-- Checkbox option -->
                <div class="flex items-start gap-x-2 group/input">
                    <div class="shrink-0 grid grid-cols-1 size-4">
                        <input type="checkbox" name="type" id="type_comments"
                            class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                            value="email" />
                        <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                            viewBox="0 0 14 14" fill="none">
                            <path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <label for="type_comments"
                        class="grow flex flex-col gap-y-1 cursor-pointer select-none group-has-disabled/input:cursor-default">
                        <span class="font-semibold text-sm">نظرات</span>
                        <span class="font-medium text-xs text-muted-foreground">
                            هنگامی که شخصی نظری را در مورد یک پست ارسال می کند مطلع شوید
                        </span>
                    </label>
                </div>
                <!-- end Checkbox option -->

                <!-- Checkbox option -->
                <div class="flex items-start gap-x-2 group/input">
                    <div class="shrink-0 grid grid-cols-1 size-4">
                        <input type="checkbox" name="type" id="type_offers"
                            class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                            value="sms" />
                        <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                            viewBox="0 0 14 14" fill="none">
                            <path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <label for="type_offers"
                        class="grow flex flex-col gap-y-1 cursor-pointer select-none group-has-disabled/input:cursor-default">
                        <span class="font-semibold text-sm">پیشنهادهای ویژه</span>
                        <span class="font-medium text-xs text-muted-foreground">
                            اطلاع رسانی درباره تخفیف ها و کمپین های فروش ویژه
                        </span>
                    </label>
                </div>
                <!-- end Checkbox option -->

                <!-- Checkbox option -->
                <div class="flex items-start gap-x-2 group/input">
                    <div class="shrink-0 grid grid-cols-1 size-4">
                        <input type="checkbox" name="type" id="type_order_status"
                            class="col-start-1 row-start-1 appearance-none size-4 bg-background border rounded-sm checked:border-accent checked:bg-accent disabled:bg-muted disabled:checked:bg-muted"
                            value="in-app" />
                        <svg class="col-start-1 row-start-1 size-4 stroke-background cursor-pointer group-has-checked/input:stroke-accent-foreground group-has-disabled/input:cursor-default group-has-disabled/input:stroke-border"
                            viewBox="0 0 14 14" fill="none">
                            <path class="opacity-0 group-has-checked/input:opacity-100" d="M3 8L6 11L11 3.5"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path class="opacity-0 group-has-checked/input:opacity-100" stroke-width="2"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <label for="type_order_status"
                        class="grow flex flex-col gap-y-1 cursor-pointer select-none group-has-disabled/input:cursor-default">
                        <span class="font-semibold text-sm">وضعیت سفارش</span>
                        <span class="font-medium text-xs text-muted-foreground">
                            از مراحل مختلف سفارش مثل پردازش، ارسال و یا تحویل مطلع شوید
                        </span>
                    </label>
                </div>
                <!-- end Checkbox option -->
            </div>
            <!-- end Checkbox options container -->
        </div>
        <!-- end Form group -->

        <!-- Form group -->
        <div class="col-span-full grid gap-y-3.5">
            <div class="space-y-1.5">
                <!-- Title -->
                <h3 class="font-semibold text-sm select-none">
                    اعلان فوری:
                </h3>
                <p class="font-medium text-xs text-muted-foreground">
                    از طریق پیامک به تلفن همراه شما ارسال می‌شوند.
                </p>
            </div>
            <!-- ًRadio group options container -->
            <div class="flex flex-col items-start space-y-3">
                <!-- ًRadio option -->
                <div class="flex items-center gap-x-2 group/input">
                    <input type="radio" id="priority_order_status" name="priority_alerts"
                        class="relative size-4 appearance-none bg-background border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-background before:rounded-full not-checked:before:hidden checked:border-accent checked:bg-accent disabled:bg-muted disabled:before:bg-border disabled:cursor-default forced-colors:appearance-auto forced-colors:before:hidden" />
                    <label for="priority_order_status"
                        class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground  group-has-disabled/input:cursor-default">وضعیت
                        سفارش</label>
                </div>
                <!-- end ًRadio option -->

                <!-- ًRadio option -->
                <div class="flex items-center gap-x-2 group/input">
                    <input type="radio" id="priority_offers" name="priority_alerts"
                        class="relative size-4 appearance-none bg-background border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-background before:rounded-full not-checked:before:hidden checked:border-accent checked:bg-accent disabled:bg-muted disabled:before:bg-border disabled:cursor-default forced-colors:appearance-auto forced-colors:before:hidden" />
                    <label for="priority_offers"
                        class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground  group-has-disabled/input:cursor-default">کمپین
                        های فروش</label>
                </div>
                <!-- end ًRadio option -->

                <!-- ًRadio option -->
                <div class="flex items-center gap-x-2 group/input">
                    <input type="radio" id="priority_all" name="priority_alerts"
                        class="relative size-4 appearance-none bg-background border rounded-full cursor-pointer before:absolute before:inset-1 before:bg-background before:rounded-full not-checked:before:hidden checked:border-accent checked:bg-accent disabled:bg-muted disabled:before:bg-border disabled:cursor-default forced-colors:appearance-auto forced-colors:before:hidden" />
                    <label for="priority_all"
                        class="grow font-medium text-xs text-muted-foreground cursor-pointer select-none transition-colors group-has-checked/input:text-foreground  group-has-disabled/input:cursor-default">همه</label>
                </div>
                <!-- end ًRadio option -->
            </div>
            <!-- ًRadio group options container -->
        </div>
        <!-- end Form group -->

        <div class="col-span-full flex gap-x-1.5 justify-end">
            <button type="button"
                class="inline-flex items-center justify-center h-10 bg-transparent border rounded-lg text-muted-foreground cursor-pointer outline-hidden group/button transition-transform hover:text-foreground hover:bg-muted active:scale-95 px-6">
                <span class="font-semibold text-xs">لغو</span>
            </button>
            <button type="submit"
                class="inline-flex items-center justify-center gap-x-2 h-10 bg-primary border border-primary rounded-lg text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-6">
                <span class="font-semibold text-xs">ذخیره</span>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd"
                        d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                        clip-rule="evenodd" />
                </svg>
            </button>
        </div>
    </form>
</div>