{# Custom Select Dropdown Component #}
{# Parameters:
   - id: field ID
   - name: field name (for form submission)
   - value: current selected value
   - label: field label (optional)
   - options: array of {value, label} objects
   - placeholder: placeholder text (optional, default: 'Select...')
   - required: whether field is required (optional)
   - searchable: whether to show search input (optional, default: false)
   - searchPlaceholder: placeholder for search input (optional)
   - extra_attrs: additional attributes for hidden input (optional)
   - dropup: whether dropdown opens upward (optional, default: false)
#}

{% if label|default(false) %}
<label for="{{ id }}" class="block text-sm font-medium text-gray-700 mb-1">
    {{ label }}{% if required|default(false) %} <span class="text-red-500">*</span>{% endif %}
</label>
{% endif %}
<div class="relative"
     data-controller="select-dropdown"
     data-select-dropdown-selected-value="{{ value|default('') }}"
     data-select-dropdown-placeholder-value="{{ placeholder|default('Select...') }}"
     data-select-dropdown-searchable-value="{{ searchable|default(false) ? 'true' : 'false' }}">

    {# Hidden input for form submission #}
    <input type="hidden"
           id="{{ id }}"
           name="{{ name }}"
           value="{{ value|default('') }}"
           {% if required|default(false) %}required{% endif %}
           data-select-dropdown-target="input"
           {% for attr_name, attr_value in extra_attrs|default({}) %}{{ attr_name }}="{{ attr_value }}" {% endfor %}>

    {# Dropdown button - styled to match other inputs #}
    <button type="button"
            data-select-dropdown-target="button"
            data-action="click->select-dropdown#toggle"
            class="relative w-full cursor-pointer rounded-lg border border-gray-300 bg-white py-2 pl-3 pr-10 text-left text-sm text-gray-700 transition-all hover:border-gray-400 focus:border-kitsco-accent focus:outline-none focus:ring-2 focus:ring-kitsco-accent/20">
        <span class="block truncate" data-select-dropdown-target="label">
            {{ placeholder|default('Select...') }}
        </span>
        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
            <i class="bi bi-chevron-down text-gray-400 text-xs transition-transform"></i>
        </span>
    </button>

    {# Dropdown menu #}
    <div data-select-dropdown-target="menu"
         data-action="keydown->select-dropdown#handleKeydown"
         class="hidden absolute z-50 w-full rounded-lg bg-white text-sm shadow-lg border border-gray-200 focus:outline-none overflow-hidden {{ dropup|default(false) ? 'bottom-full mb-1' : 'mt-1' }}">
        {% if searchable|default(false) %}
        <div class="sticky top-0 bg-white border-b border-gray-100 p-2">
            <div class="relative flex items-center">
                <i class="bi bi-search text-gray-400 text-xs absolute left-3 z-10"></i>
                <input type="text"
                       data-select-dropdown-target="search"
                       data-action="input->select-dropdown#search keydown->select-dropdown#handleKeydown"
                       placeholder="{{ searchPlaceholder|default('Search...') }}"
                       style="padding-left: 2rem !important; background: transparent !important;"
                       class="block w-full rounded-md border-0 py-1.5 pr-3 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-kitsco-accent text-sm bg-transparent">
            </div>
        </div>
        {% endif %}
        <div class="overflow-auto max-h-48 py-1">
            {% for option in options %}
            <div data-value="{{ option.value }}"
                 data-label="{{ option.label }}"
                 data-action="click->select-dropdown#select mouseenter->select-dropdown#highlightOption"
                 data-select-dropdown-target="option"
                 class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-50 transition-colors">
                <span class="block truncate">{{ option.label }}</span>
                <span class="checkmark invisible absolute inset-y-0 right-0 flex items-center pr-3 text-kitsco-accent">
                    <i class="bi bi-check-lg"></i>
                </span>
            </div>
            {% endfor %}
            <div data-no-results class="hidden px-3 py-2 text-sm text-gray-400 text-center">
                No results found
            </div>
        </div>
    </div>
</div>