<div x-data="{ isOpen: false }">
    <button type="button"
        class="inline-flex items-center justify-center h-10 bg-zinc-50 dark:bg-zinc-900 ring-3 ring-zinc-300 dark:ring-zinc-800 rounded-lg text-black dark:text-white cursor-pointer outline-hidden transition-all active:scale-95 px-4"
        x-on:click="isOpen = true">
        <span class="font-semibold text-xs">
            بازکردن پنجره محاوره‌ای
        </span>
    </button>

    <!-- modal -->
    <div x-cloak x-show="isOpen" x-transition.opacity.duration.200ms x-on:keydown.esc.window="isOpen = false"
        x-on:click.self="isOpen = false"
        class="fixed inset-0 flex sm:items-center items-end justify-center bg-white/80 dark:bg-black/80 p-4 pb-8 lg:p-8 z-50">
        <!-- modal dialog -->
        <div x-show="isOpen" x-transition:enter="transition ease-out duration-200 delay-100"
            x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0"
            class="flex flex-col gap-4 w-full max-w-sm relative bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6">
            <!-- dialog close button -->
            <button
                class="inline-flex items-center justify-center absolute top-3 end-3 size-7 rounded-full text-zinc-400 cursor-pointer transition-colors hover:text-black dark:hover:text-white"
                x-on:click="isOpen = false">
                <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>

            <!-- dialog body -->
            <div class="grid gap-y-4">
                <div class="flex flex-col items-center gap-y-3">
                    <div
                        class="inline-flex items-center justify-center size-11 border border-zinc-200 dark:border-zinc-800 rounded-full text-black dark:text-white">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                            <path
                                d="M2.87988 18.049C4.23015 12.0557 7.07526 6.6285 11.003 2.17958C11.1105 2.05778 11.2465 1.90742 11.411 1.72851L11.411 1.72849C11.7101 1.40325 12.2162 1.38203 12.5414 1.68109C12.5579 1.69623 12.5737 1.71205 12.5888 1.72851C12.7553 1.90958 12.8929 2.06164 13.0015 2.1847C16.9268 6.63267 19.7703 12.058 21.12 18.049C18.9786 18.5004 16.7797 18.796 14.5359 18.9235L12.4472 23.101C12.3237 23.348 12.0233 23.4481 11.7763 23.3246C11.6796 23.2762 11.6011 23.1977 11.5527 23.101L9.46401 18.9235C7.22018 18.796 5.02133 18.5004 2.87988 18.049ZM11.9999 14.9954C13.6568 14.9954 14.9999 13.6523 14.9999 11.9954C14.9999 10.3386 13.6568 8.99541 11.9999 8.99541C10.3431 8.99541 8.99994 10.3386 8.99994 11.9954C8.99994 13.6523 10.3431 14.9954 11.9999 14.9954Z">
                            </path>
                        </svg>
                    </div>
                    <div class="flex flex-col gap-y-1.5 text-center">
                        <h2 class="font-bold text-lg text-black dark:text-white">خوش آمدید</h2>
                        <p class="font-semibold text-xs text-zinc-400">
                            برای ورود به حساب کاربری‌تان، اطلاعات ورود را وارد کنید
                        </p>
                    </div>
                </div>

                <button type="button"
                    class="flex items-center justify-center gap-x-2 w-full h-9 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white cursor-pointer transition-all hover:bg-zinc-100 dark:hover:bg-zinc-900 active:scale-95 px-3.5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                        <path
                            d="M3.06364 7.50914C4.70909 4.24092 8.09084 2 12 2C14.6954 2 16.959 2.99095 18.6909 4.60455L15.8227 7.47274C14.7864 6.48185 13.4681 5.97727 12 5.97727C9.39542 5.97727 7.19084 7.73637 6.40455 10.1C6.2045 10.7 6.09086 11.3409 6.09086 12C6.09086 12.6591 6.2045 13.3 6.40455 13.9C7.19084 16.2636 9.39542 18.0227 12 18.0227C13.3454 18.0227 14.4909 17.6682 15.3864 17.0682C16.4454 16.3591 17.15 15.3 17.3818 14.05H12V10.1818H21.4181C21.5364 10.8363 21.6 11.5182 21.6 12.2273C21.6 15.2727 20.5091 17.8363 18.6181 19.5773C16.9636 21.1046 14.7 22 12 22C8.09084 22 4.70909 19.7591 3.06364 16.4909C2.38638 15.1409 2 13.6136 2 12C2 10.3864 2.38638 8.85911 3.06364 7.50914Z">
                        </path>
                    </svg>
                    <span class="font-semibold text-xs">ورود با گوگل</span>
                </button>

                <div class="flex items-center gap-x-2">
                    <span
                        class="grow h-px bg-gradient-to-l rtl:bg-gradient-to-r from-zinc-200 dark:from-zinc-800"></span>
                    <span class="shrink-0 font-semibold text-xs text-zinc-400">یا</span>
                    <span
                        class="grow h-px bg-gradient-to-r rtl:bg-gradient-to-l from-zinc-200 dark:from-zinc-800"></span>
                </div>

                <form action="#" method="post" class="space-y-6">
                    <div class="space-y-4">
                        <!-- email -->
                        <div class="flex flex-col items-start gap-y-2">
                            <label for="email"
                                class="font-semibold text-xs text-black dark:text-white peer-disabled:cursor-not-allowed peer-disabled:opacity-70">ایمیل</label>
                            <input type="email" dir="ltr" name="email"
                                class="block w-full h-9 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 px-3 font-semibold text-xs text-black dark:text-white shadow-xs shadow-black/5 transition-shadow placeholder:text-zinc-400 focus-visible:border-zinc-400 dark:focus-visible:border-zinc-600 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-zinc-200 dark:focus-visible:ring-zinc-800 disabled:cursor-not-allowed disabled:opacity-50" />
                        </div>

                        <!-- password -->
                        <div class="flex flex-col items-start gap-y-2">
                            <label for="password"
                                class="font-semibold text-xs text-black dark:text-white peer-disabled:cursor-not-allowed peer-disabled:opacity-70">رمز
                                عبور</label>
                            <input type="password" dir="ltr" name="password"
                                class="block w-full h-9 rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-950 px-3 font-semibold text-xs text-black dark:text-white shadow-xs shadow-black/5 transition-shadow placeholder:text-zinc-400 focus-visible:border-zinc-400 dark:focus-visible:border-zinc-600 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-zinc-200 dark:focus-visible:ring-zinc-800 disabled:cursor-not-allowed disabled:opacity-50" />
                        </div>
                    </div>

                    <div class="flex items-center justify-between gap-2">
                        <!-- remember -->
                        <label for="remember" class="flex items-center gap-x-2 cursor-pointer">
                            <span class="relative flex items-center justify-center text-white">
                                <input type="checkbox" id="remember" name="remember"
                                    class="peer relative size-5 appearance-none bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-md overflow-hidden before:content[''] before:absolute before:inset-0 before:duration-150 before:transition-colors transition-colors checked:!border-blue-500 checked:!bg-blue-500 checked:before:bg-blue-500 disabled:cursor-not-allowed"
                                    checked />
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                                    class="size-4 absolute opacity-0 transition-all duration-300 peer-checked:opacity-100">
                                    <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>
                            </span>
                            <span class="font-semibold text-xs text-black dark:text-white">مرا
                                بخاطر
                                بسپار</span>
                        </label>

                        <a href="#" class="font-semibold text-xs text-black dark:text-white hover:underline">بازیابی
                            رمز
                            عبور؟</a>
                    </div>

                    <button type="submit"
                        class="flex items-center justify-center gap-x-2 w-full h-9 bg-black dark:bg-white rounded-lg text-white dark:text-black cursor-pointer outline-hidden transition-all active:scale-95 px-3.5">
                        <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 rtl:-rotate-90">
                            <path fill-rule="evenodd"
                                d="M4.22 11.78a.75.75 0 0 1 0-1.06L9.44 5.5H5.75a.75.75 0 0 1 0-1.5h5.5a.75.75 0 0 1 .75.75v5.5a.75.75 0 0 1-1.5 0V6.56l-5.22 5.22a.75.75 0 0 1-1.06 0Z"
                                clip-rule="evenodd" />
                        </svg>
                    </button>
                </form>
            </div>
            <!-- end dialog body -->
        </div>
        <!-- end modal dialog -->
    </div>
    <!-- end modal -->
</div>

<div x-data="{ isOpen: false }">
    <button type="button"
        class="inline-flex items-center justify-center h-10 bg-zinc-50 dark:bg-zinc-900 ring-3 ring-zinc-300 dark:ring-zinc-800 rounded-lg text-black dark:text-white cursor-pointer outline-hidden transition-all active:scale-95 px-4"
        x-on:click="isOpen = true">
        <span class="font-semibold text-xs">
            بازکردن پنجره محاوره‌ای
        </span>
    </button>

    <!-- modal -->
    <div x-cloak x-show="isOpen" x-transition.opacity.duration.200ms x-on:keydown.esc.window="isOpen = false"
        x-on:click.self="isOpen = false"
        class="fixed inset-0 flex sm:items-center items-end justify-center bg-white/80 dark:bg-black/80 p-4 pb-8 lg:p-8 z-50">
        <!-- modal dialog -->
        <div x-show="isOpen" x-transition:enter="transition ease-out duration-200 delay-100"
            x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0"
            class="flex flex-col gap-4 w-full max-w-sm relative bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6">
            <!-- dialog close button -->
            <button
                class="inline-flex items-center justify-center absolute top-3 end-3 size-7 rounded-full text-zinc-400 cursor-pointer transition-colors hover:text-black dark:hover:text-white"
                x-on:click="isOpen = false">
                <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>

            <!-- dialog body -->
            <div class="grid gap-y-4">
                <div class="flex flex-col items-center gap-y-3">
                    <div
                        class="inline-flex items-center justify-center sm:size-16 size-12 border border-red-200 dark:border-red-950 rounded-full text-red-500">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"
                            class="sm:size-8 size-6">
                            <path fill-rule="evenodd"
                                d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
                                clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="flex flex-col gap-y-1.5 text-center">
                        <h2 class="font-bold text-lg text-red-500">حذف شود؟</h2>
                        <p class="font-semibold text-xs text-zinc-400">
                            این عمل غیرقابل بازگشت است.
                        </p>
                    </div>
                </div>
                <div class="grid sm:grid-cols-2 gap-2.5">
                    <button type="button"
                        class="inline-flex items-center justify-center h-10 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white cursor-pointer outline-hidden transition-all active:scale-95 px-4"
                        x-on:click="isOpen = false">
                        <span class="font-semibold text-xs">
                            لغو کردن
                        </span>
                    </button>
                    <button type="button"
                        class="inline-flex items-center justify-center h-10 bg-red-500 border border-red-500 rounded-lg text-white cursor-pointer outline-hidden transition-all active:scale-95 px-4"
                        x-on:click="isOpen = false">
                        <span class="font-semibold text-xs">
                            حذف
                        </span>
                    </button>
                </div>
            </div>
            <!-- end dialog body -->
        </div>
        <!-- end modal dialog -->
    </div>
    <!-- end modal -->
</div>

<div x-data="{ isOpen: false }">
    <button type="button"
        class="inline-flex items-center justify-center h-10 bg-zinc-50 dark:bg-zinc-900 ring-3 ring-zinc-300 dark:ring-zinc-800 rounded-lg text-black dark:text-white cursor-pointer outline-hidden transition-all active:scale-95 px-4"
        x-on:click="isOpen = true">
        <span class="font-semibold text-xs">
            بازکردن پنجره محاوره‌ای
        </span>
    </button>

    <!-- modal -->
    <div x-cloak x-show="isOpen" x-transition.opacity.duration.200ms x-on:keydown.esc.window="isOpen = false"
        x-on:click.self="isOpen = false"
        class="fixed inset-0 flex sm:items-center items-end justify-center bg-white/80 dark:bg-black/80 p-4 pb-8 lg:p-8 z-50">
        <!-- modal dialog -->
        <div x-show="isOpen" x-transition:enter="transition ease-out duration-200 delay-100"
            x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0"
            class="flex flex-col gap-4 w-full max-w-md relative bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-2xl p-6">
            <!-- dialog header -->
            <div class="flex items-center justify-between">
                <h2 class="font-bold text-lg text-black dark:text-white">بارگذاری پرونده</h2>

                <!-- dialog close button -->
                <button
                    class="inline-flex text-zinc-400 cursor-pointer transition-colors hover:text-black dark:hover:text-white"
                    x-on:click="isOpen = false">
                    <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>
            <!-- end dialog header -->

            <!-- dialog body -->
            <div class="grid gap-y-4">
                <form action="#" method="post" class="space-y-6">
                    <label for="file"
                        class="flex flex-col items-center gap-y-3 border border-dashed border-zinc-200 dark:border-zinc-800 rounded-lg text-zinc-400 cursor-pointer outline-hidden transition-colors hover:border-black dark:hover:border-white hover:text-black dark:hover:text-white p-8">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-7">
                            <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4z"></path>
                            <path
                                d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z">
                            </path>
                        </svg>
                        <span class="flex flex-col items-center gap-y-1.5 text-center font-semibold text-xs">
                            <span>یک پرونده را انتخاب کنید</span>
                            <span>حداکثر اندازه فایل <strong>۱۰ مگابایت</strong> است.</span>
                        </span>
                        <input type="file" id="file" name="file" class="hidden" />
                    </label>
                </form>

                <div class="grid gap-2">
                    <div class="flex items-center gap-x-3 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg cursor-default py-1.5 px-3"
                        dir="ltr">
                        <div class="flex items-center gap-x-1.5">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                                class="shrink-0 size-5 text-zinc-400">
                                <path
                                    d="M19.903 8.586a.997.997 0 0 0-.196-.293l-6-6a.997.997 0 0 0-.293-.196c-.03-.014-.062-.022-.094-.033a.991.991 0 0 0-.259-.051C13.04 2.011 13.021 2 13 2H6c-1.103 0-2 .897-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V9c0-.021-.011-.04-.013-.062a.952.952 0 0 0-.051-.259c-.01-.032-.019-.063-.033-.093zM16.586 8H14V5.414L16.586 8zM6 20V4h6v5a1 1 0 0 0 1 1h5l.002 10H6z">
                                </path>
                                <path d="M8 12h8v2H8zm0 4h8v2H8zm0-8h2v2H8z"></path>
                            </svg>
                            <div class="flex flex-col font-sans font-semibold text-xs">
                                <span class="line-clamp-1 text-black dark:text-white">spacedev-ui-kit</span>
                                <span class="line-clamp-1 text-zinc-400">.zip | 2.95 MB</span>
                            </div>
                        </div>

                        <div class="shrink-0 flex items-center gap-x-2 ms-auto">
                            <a href="#"
                                class="inline-flex items-center justify-center size-7 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-zinc-400 cursor-pointer transition-colors hover:text-black dark:hover:text-white">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                                    class="size-4">
                                    <path
                                        d="M3 19H21V21H3V19ZM13 13.1716L19.0711 7.1005L20.4853 8.51472L12 17L3.51472 8.51472L4.92893 7.1005L11 13.1716V2H13V13.1716Z">
                                    </path>
                                </svg>
                            </a>
                            <button type="button"
                                class="inline-flex items-center justify-center size-7 bg-white dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-full text-zinc-400 cursor-pointer transition-colors hover:text-black dark:hover:text-white">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                                    class="size-4">
                                    <path
                                        d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z">
                                    </path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="grid sm:grid-cols-2 gap-2.5">
                    <button type="button"
                        class="inline-flex items-center justify-center h-10 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-lg text-black dark:text-white cursor-pointer outline-hidden transition-all active:scale-95 px-4"
                        x-on:click="isOpen = false">
                        <span class="font-semibold text-xs">
                            لغو کردن
                        </span>
                    </button>
                    <button type="button"
                        class="inline-flex items-center justify-center h-10 bg-blue-500 border border-blue-500 rounded-lg text-white cursor-pointer outline-hidden transition-all active:scale-95 px-4"
                        x-on:click="isOpen = false">
                        <span class="font-semibold text-xs">
                            ذخیره
                        </span>
                    </button>
                </div>
            </div>
            <!-- end dialog body -->
        </div>
        <!-- end modal dialog -->
    </div>
    <!-- end modal -->
</div>