<div x-data="{ open: false, selectedModel: '', models: [] }" class="relative w-72 mx-auto mt-5">
    <!-- Dropdown Trigger -->
    <button 
        @click="open = !open" 
        class="w-full px-4 py-2 text-left bg-white border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-500"
    >
        <span x-text="selectedModel ? selectedModel : 'Select a Model'"></span>
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 inline float-right" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>

    <!-- Dropdown Options -->
    <div 
        x-show="open" 
        @click.outside="open = false" 
        class="absolute z-10 w-full mt-2 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto"
    >
        <!-- Fetch models with HTMX -->
        <div hx-get="/v1/models" hx-trigger="load" hx-target="#model-list" hx-swap="innerHTML">
            <p class="px-4 py-2 text-gray-500">Loading models...</p>
        </div>

        <!-- Render Models -->
        <div id="model-list">
            <template x-for="model in models" :key="model.id">
                <div 
                    @click="selectedModel = model.name; open = false"
                    class="px-4 py-2 cursor-pointer hover:bg-blue-100"
                >
                    <p class="text-sm font-medium" x-text="model.name"></p>
                    <p class="text-xs text-gray-500" x-text="model.description"></p>
                </div>
            </template>
        </div>
    </div>
</div>
