<div {{ attributes }}>

    <div class="relative z-0 inline-flex shadow-sm rounded-md">
        {% block button %}
            <a href="{{ href }}"
                    {% if modal %}
                        data-turbo-frame="modal"
                    {% endif %}
               class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
                {% block buttonText %}
                    {{ buttonText }}
                {% endblock %}
            </a>
        {% endblock %}

        {% set dropdown = block('dropdown') %}

        <twig:Admin:Dropdown class="-ml-px relative block">
            <twig:block name="toggle">
                <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150">
                    <twig:ux:icon name="ph:caret-down" class="h-5 w-5" />
                </button>
            </twig:block>
            <twig:block name="dropdown">
                {{ dropdown|raw }}
            </twig:block>
        </twig:Admin:Dropdown>

    </div>

</div>
