<!-- Form group -->
<div class="flex flex-col gap-y-1.5">
    <!-- Input label -->
    <label for="subject" class="font-semibold text-xs">موضوع:</label>
    <!-- Select Menu -->
    <div class="relative w-full" x-data="{ isOpen: false, placeholder: '', subject: '' }">
        <!-- Hidden input for form submission -->
        <input type="hidden" name="subject" id="subject" class="peer" x-model="subject" />

        <!-- 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>

        <!-- Options -->
        <ul class="absolute z-10 mt-2 w-full bg-background border rounded-md shadow-lg max-h-40 overflow-auto"
            x-show="isOpen" x-on:click.outside="isOpen = false" x-transition>
            <li class="cursor-pointer px-4 py-2 text-sm"
                x-bind:class="subject !== 'feature-request' ? 'text-foreground hover:bg-muted' : 'bg-primary text-primary-foreground hover:bg-primary'"
                x-on:click="placeholder='افزودن ویژگی';subject='feature-request';isOpen=false">
                افزودن ویژگی
            </li>
            <li class="cursor-pointer px-4 py-2 text-sm"
                x-bind:class="subject !== 'bug-report' ? 'text-foreground hover:bg-muted' : 'bg-primary text-primary-foreground hover:bg-primary'"
                x-on:click="placeholder='گزارش خطا';subject='bug-report';isOpen=false">
                گزارش خطا
            </li>
            <li class="cursor-pointer px-4 py-2 text-sm"
                x-bind:class="subject !== 'finance' ? 'text-foreground hover:bg-muted' : 'bg-primary text-primary-foreground hover:bg-primary'"
                x-on:click="placeholder='حسابداری و امورمالی';subject='finance';isOpen=false">
                حسابداری و امورمالی
            </li>
            <li class="cursor-pointer px-4 py-2 text-sm"
                x-bind:class="subject !== 'other' ? 'text-foreground hover:bg-muted' : 'bg-primary text-primary-foreground hover:bg-primary'"
                x-on:click="placeholder='سایر موضوعات';subject='other';isOpen=false">
                سایر موضوعات
            </li>
        </ul>
    </div>
    <!-- end Select Menu -->
</div>
<!-- end Form group -->