{# templates/components/Toolbar.html.twig #}
<div class="bg-gray-800 p-3 min-h-14" {{ stimulus_controller('toolbar') }}>
    <div class="flex flex-row items-center justify-between">
        <div class="flex mr-2 items-center">
            {% for element in toolbar.leftGroup %}
                {% if element.type == 'button' %}
                    {% set actionParts = element.action|split('#') %}
                    <twig:ToolBarButton
                        icon="{{ element.icon }}"
                        text="{{ element.text }}"
                        action="{{ element.action }}"
                        controller="{{ actionParts[0] }}"
                        data="{{ element.additionalProperties.data }}"
                    />
                {% elseif element.type == 'divider' %}
                    <twig:Divider/>
                {% elseif element.type == 'dropdown' %}
                    <twig:DropdownMenu
                        icon="{{ element.icon }}"
                        text="{{ element.text }}"
                        action="{{ element.action }}"
                        items="{{ element.additionalProperties.items }}"
                    />
                {% endif %}
            {% endfor %}
        </div>
        <div class="flex mr-2 items-center">
            {% for element in toolbar.rightGroup %}
                {% if element.type == 'button' %}
                    {% set actionParts = element.action|split('#') %}
                    <twig:ToolBarButton
                        icon="{{ element.icon }}"
                        text="{{ element.text }}"
                        action="{{ element.action }}"
                        controller="{{ actionParts[0] }}"
                        data="{{ element.additionalProperties.data }}"
                    />
                {% elseif element.type == 'divider' %}
                    <twig:Divider/>
                {% elseif element.type == 'dropdown' %}
                    <twig:DropdownMenu
                        icon="{{ element.icon }}"
                        text="{{ element.text }}"
                        action="{{ element.action }}"
                        items="{{ element.additionalProperties.items }}"
                    />
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>