{% load unfold %}

<li class="{% action_item_classes action %}" {% if not link and action.items|length > 0 %}x-data="{actionDropdownOpen: false}" x-ref="actionDropdown{{ action.method_name }}"{% endif %}>
    <a {% if link %}href="{{ link }}"{% endif %}class="cursor-pointer flex grow items-center gap-2 px-3 py-2 text-left whitespace-nowrap" {% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=action.attrs %}
       {% if not link %}
           x-on:click="actionDropdownOpen = !actionDropdownOpen"
           x-bind:class="{'{% if action.variant.value == "default" %}text-primary-600 dark:text-primary-500{% endif %}': actionDropdownOpen }"
       {% endif %}>

        {% if action.icon %}
            <span class="material-symbols-outlined">
                {{ action.icon }}
            </span>
        {% elif icon %}
            <span class="material-symbols-outlined">
                {{ icon }}
            </span>
        {% endif %}

        {{ title }}

        {% if not link and action.items|length > 0 %}
            <span class="border-l border-base-200 flex items-center select-none self-stretch ml-auto -mr-1 !ml-1 pl-2
                         {% if action.variant.value == "primary" %}
                             border-primary-700 dark:border-primary-500
                         {% elif action.variant.value == "danger" %}
                             border-red-700 dark:border-red-500
                         {% elif action.variant.value == "success" %}
                             border-green-700 dark:border-green-500
                         {% elif action.variant.value == "info" %}
                             border-blue-700 dark:border-blue-500
                         {% elif action.variant.value == "warning" %}
                             border-orange-700 dark:border-orange-500
                         {% else %}
                             border-base-200 dark:border-base-700
                         {% endif %}">
                <span class="material-symbols-outlined ml-auto rotate-90 transition-transform" x-bind:class="{'-rotate-90!': actionDropdownOpen }">
                    chevron_right
                </span>
            </span>
        {% endif %}
    </a>

    {% if not link and action.items|length > 0 %}
        <template x-teleport="body">
            <nav x-anchor.bottom-end.offset.4="$refs.actionDropdown{{ action.method_name }}" class="absolute bg-white border border-base-200 flex flex-col -mr-px py-1 right-0 rounded-default shadow-lg top-10 w-52 z-50 dark:bg-base-800 dark:border-base-700" x-transition x-show="actionDropdownOpen" x-on:click.outside="actionDropdownOpen = false">
                {% for item in action.items %}
                    <a href="{{ item.path }}" class="flex items-center font-normal gap-2 max-h-[30px] mx-1 px-3 py-2 rounded-default text-left hover:bg-base-100 hover:text-base-700 dark:hover:bg-base-700 dark:hover:text-base-200
                                                     {% if item.variant.value == "danger" %}
                                                         text-red-700 dark:text-red-400 hover:text-red-700 dark:hover:text-red-400 hover:bg-red-100 dark:hover:bg-red-500/20
                                                     {% elif item.variant.value == "warning" %}
                                                         text-orange-700 dark:text-orange-400 hover:text-orange-700 dark:hover:text-orange-400 hover:bg-orange-100 dark:hover:bg-orange-500/20
                                                     {% elif item.variant.value == "success" %}
                                                         text-green-700 dark:text-green-400 hover:text-green-700 dark:hover:text-green-400 hover:bg-green-100 dark:hover:bg-green-500/20
                                                     {% elif item.variant.value == "info" %}
                                                         text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-500/20
                                                     {% elif item.variant.value == "primary" %}
                                                         text-primary-700 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-400 hover:bg-primary-100 dark:hover:bg-primary-500/20
                                                     {% else %}
                                                         hover:bg-base-100 dark:hover:bg-base-700/20
                                                     {% endif %}
                                                    " {% if blank %} target="_blank"{% endif %} {% include "unfold/helpers/attrs.html" with attrs=item.attrs %}>
                        {% if item.icon %}
                            <span class="material-symbols-outlined">
                                {{ item.icon }}
                            </span>
                        {% endif %}

                        <span class="grow truncate" title="{{ item.title }}">
                            {{ item.title }}
                        </span>
                    </a>
                {% endfor %}
            </nav>
        </template>
    {% endif %}
</li>
