<!-- Form container -->
<div class="flex max-sm:flex-col items-start gap-4">
    <!-- Avatar -->
    <span class="shrink-0 inline-block size-10 rounded-full overflow-hidden">
        <img src="https://components.spacedev.ir/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
    </span><!-- end Avatar -->
    <div class="grow w-full">
        <!-- Form -->
        <form action="#" class="relative">
            <div
                class="border border-input rounded-md shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50">
                <!-- Input field -->
                <input type="text" name="title" id="title"
                    class="block w-full h-12 bg-transparent border-0 font-medium text-base outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 transition-[color,box-shadow] placeholder:text-muted-foreground/70 px-3 py-1"
                    placeholder="عنوان.." />

                <!-- Textarea field -->
                <textarea rows="5" name="message" id="message"
                    class="block w-full bg-transparent border-0 font-medium text-sm outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-muted-foreground/70 p-3"
                    placeholder="پیام خود را بنویسید .."></textarea>

                <div class="flex flex-wrap items-center gap-1.5 border-t p-1.5 mt-1">
                    <!-- Attach a file -->
                    <div x-data="{ fileName: '', pickFile() { $refs.inputFile.click() }, clear() { this.$refs.inputFile.value = ''; this.fileName = ''; } }"
                        class="inline-flex items-center justify-center h-9 cursor-pointer text-muted-foreground px-3">
                        <input type="file" name="document" class="hidden" x-ref="inputFile"
                            x-on:change="fileName = $refs.inputFile.files[0]?.name || ''" />

                        <span class="flex items-center gap-x-1.5 hover:text-foreground" x-show="fileName === ''"
                            x-on:click="pickFile">
                            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" class="size-5">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15.172 7l-6.586 6.586a2 2 0 002.828 2.828L18 9.828a4 4 0 00-5.656-5.656L7 9l-.293.293" />
                            </svg>
                            <span class="line-clamp-1 font-semibold text-xs">پیوست
                                فایل</span>
                        </span>

                        <span class="flex items-center gap-x-1.5" x-show="fileName">
                            <button type="button" class="cursor-pointer hover:text-destructive" x-on:click="clear()">
                                <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>
                            <span class="truncate max-w-28 font-sans font-semibold text-xs" x-text="fileName"></span>
                        </span>
                    </div><!-- end Attach a file -->

                    <!-- Submit button -->
                    <button type="submit"
                        class="flex items-center justify-center gap-x-2 h-10 bg-primary rounded-md text-primary-foreground cursor-pointer outline-hidden group/button transition-transform active:scale-95 px-3.5 ms-auto">
                        <span class="font-semibold text-xs">فرستادن</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            class="size-4 group-hover/button:animate-pulse">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2"
                                d="M10 14L21 3m0 0l-6.5 18a.55.55 0 0 1-1 0L10 14l-7-3.5a.55.55 0 0 1 0-1z" />
                        </svg>
                    </button>
                </div>
            </div>
        </form><!-- end Form -->
    </div>
</div><!-- end Form container -->