{% comment %}
Bloomerp dropdown item component.
Parameters:
- href : URL for the link (optional)
- hx_get : HTMX get URL (optional)
- hx_post : HTMX post URL (optional)
- hx_target : HTMX target selector (optional)
- hx_swap : HTMX swap method (optional)
- hx_push_url : whether to push URL to history (optional)
- hx_vals : HTMX values JSON payload (optional)
- onclick : JavaScript onclick handler (optional)
- icon : icon class (optional)
- text : text content fallback when no slot content is provided
- slot : optional custom item content rendered inside the item
- class : additional CSS classes
- type : "link", "button", "divider" (default: "link")
- danger : whether this is a destructive action (default: False)
- disabled : whether the item is disabled (default: False)
- close_menu : whether clicking the item should close parent dropdown menus (default: False)
{% endcomment %}

{% if type == "divider" %}
    <div class="border-t border-gray-200 my-1" role="separator"></div>
{% elif slot %}
    <div
        id="{{ id }}"
        {% if onclick %}onclick="{{ onclick }}"{% endif %}
        {% if close_menu and not disabled %}@click="$dispatch('dropdown-close')"{% endif %}
        class="
            flex items-center px-4 py-2 text-sm w-full text-left transition-colors duration-150
            {% if danger %}
                text-red-700 hover:bg-red-50 hover:text-red-900
            {% else %}
                text-gray-700 hover:bg-gray-100 hover:text-primary-800
            {% endif %}
            {% if disabled %}
                opacity-50 cursor-not-allowed
            {% else %}
                cursor-hover:cursor-pointer
            {% endif %}
            {{ class }}
        "
        role="none"
        {% if disabled %}aria-disabled="true"{% endif %}
    >
        {% if icon %}
            <i class="{{ icon }} mr-3 w-4 h-4 flex-shrink-0"></i>
        {% endif %}
        {{ slot }}
    </div>
{% else %}
    {% if href or hx_get %}
        <a 
            id="{{ id }}"
            {% if href %}href="{{ href }}"{% else %}href="#"{% endif %}
            {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
            {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
            {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
            {% if hx_push_url %}hx-push-url="{{ hx_push_url }}"{% endif %}
            {% if onclick %}onclick="{{ onclick }}"{% endif %}
            {% if close_menu and not disabled %}@click="$dispatch('dropdown-close')"{% endif %}
            
            {% if extra_attrs %}
            {% for a,v in extra_attrs.items %} 
            {{ a }}="{{ v }}" 
            {% endfor %}
            {% endif %}
            class="
                flex items-center px-4 py-2 text-sm w-full text-left transition-colors duration-150
                {% if danger %}
                    text-red-700 hover:bg-red-50 hover:text-red-900
                {% else %}
                    text-gray-700 hover:bg-gray-100 hover:text-primary-800
                {% endif %}
                {% if disabled %}
                    opacity-50 cursor-not-allowed
                {% else %}
                    cursor-hover:cursor-pointer
                {% endif %}
                {{ class }}
            " 
            role="menuitem"
            {% if disabled %}tabindex="-1" aria-disabled="true"{% endif %}
        >
            {% if icon %}
                <i class="{{ icon }} mr-3 w-4 h-4 flex-shrink-0"></i>
            {% endif %}
            {{ text }}
        </a>
    {% else %}
        <button
            id="{{ id }}" 
            type="button"
            {% if onclick %}onclick="{{ onclick }}"{% endif %}
            {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
            {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
            {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
            {% if hx_vals %}hx-vals='{{ hx_vals|safe }}'{% endif %}
            {% if close_menu and not disabled %}@click="$dispatch('dropdown-close')"{% endif %}
            class="
                flex items-center px-4 py-2 text-sm w-full text-left transition-colors duration-150
                {% if danger %}
                    text-red-700 hover:bg-red-50 hover:text-red-900
                {% else %}
                    text-gray-700 hover:bg-gray-100 hover:text-primary-800
                {% endif %}
                {% if disabled %}
                    opacity-50 cursor-not-allowed
                {% else %}
                    cursor-hover:cursor-pointer
                {% endif %}
                {{ class }}
            " 
            role="menuitem"
            {% if disabled %}disabled tabindex="-1" aria-disabled="true"{% endif %}
        >
            {% if icon %}
                <i class="{{ icon }} mr-3 w-4 h-4 flex-shrink-0"></i>
            {% endif %}
            {{ text }}
        </button>
    {% endif %}
{% endif %}