Dropdown Button Component
   - text: string - Button text (required)
   - type: string - Button type (primary, secondary, success, etc.) (optional)
   - items: array - Array of dropdown items (required)
   - menuEnd: bool - Whether to align menu to the end (optional)
   - class: string - Additional CSS classes (optional)
   - segmented: bool - Whether to use segmented style (optional)
   - splitButtonClass: string - Additional CSS classes for split button (optional)

    ThemedComponent::make("buttons/dropdown")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->items('value') //array - Array of dropdown items (required)
	->menuEnd('value') //bool - Whether to align menu to the end (optional)
	->segmented('value') //bool - Whether to use segmented style (optional)
	->splitButtonClass('value') //string - Additional CSS classes for split button (optional)
	->text('value') //string - Button text (required)
	->type('value') //string - Button type (primary, secondary, success, etc.) (optional)
	->render();

// Primary dropdown button
echo ThemedComponent::make('buttons/dropdown')
    ->text('Primary')
    ->items([
        ['text' => 'Action', 'href' => '#'],
        ['text' => 'Another action', 'href' => '#'],
        ['text' => 'Something else here', 'href' => '#']
    ])
    ->render();

// Secondary dropdown button
echo ThemedComponent::make('buttons/dropdown')
    ->text('Secondary')
    ->type('secondary')
    ->items([
        ['text' => 'Action', 'href' => '#'],
        ['text' => 'Another action', 'href' => '#'],
        ['text' => 'Something else here', 'href' => '#']
    ])
    ->class('ms-2')
    ->render();

// Different button variants
$variants = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
foreach ($variants as $variant) {
    echo ThemedComponent::make('buttons/dropdown')
        ->text(ucfirst($variant))
        ->type($variant)
        ->items([
            ['text' => 'Action', 'href' => '#'],
            ['text' => 'Another action', 'href' => '#'],
            ['text' => 'Something else here', 'href' => '#']
        ])
        ->class('me-2')
        ->render();
}

// Dropdown with dividers and header
echo ThemedComponent::make('buttons/dropdown')
    ->text('Dropdown')
    ->type('primary')
    ->items([
        ['text' => 'Action', 'href' => '#'],
        ['text' => 'Another action', 'href' => '#'],
        ['text' => 'Something else here', 'href' => '#'],
        ['divider' => true],
        ['text' => 'Separated link', 'href' => '#']
    ])
    ->render();

// Outline style with dividers
echo ThemedComponent::make('buttons/dropdown')
    ->text('Dropdown')
    ->type('outline-secondary')
    ->items([
        ['text' => 'Action', 'href' => '#'],
        ['text' => 'Another action', 'href' => '#'],
        ['text' => 'Something else here', 'href' => '#'],
        ['divider' => true],
        ['text' => 'Separated link', 'href' => '#']
    ])
    ->class('ms-2')
    ->render();

// Default left-aligned menu
echo ThemedComponent::make('buttons/dropdown')
    ->text('Left-aligned menu')
    ->type('secondary')
    ->items([
        ['text' => 'Action', 'href' => '#'],
        ['text' => 'Another action', 'href' => '#'],
        ['text' => 'Something else here', 'href' => '#']
    ])
    ->render();

// Right-aligned menu
echo ThemedComponent::make('buttons/dropdown')
    ->text('Right-aligned menu')
    ->type('secondary')
    ->menuEnd(true)
    ->items([
        ['text' => 'Action', 'href' => '#'],
        ['text' => 'Another action', 'href' => '#'],
        ['text' => 'Something else here', 'href' => '#']
    ])
    ->class('ms-2')
    ->render();

{# Dropdown Button Component
   - text: string - Button text (required)
   - type: string - Button type (primary, secondary, success, etc.) (optional)
   - items: array - Array of dropdown items (required)
   - menuEnd: bool - Whether to align menu to the end (optional)
   - class: string - Additional CSS classes (optional)
   - segmented: bool - Whether to use segmented style (optional)
   - splitButtonClass: string - Additional CSS classes for split button (optional)
#}
<div class="btn-group">
    {% if content.segmented %}
        <button type="button" class="btn btn-{{ content.type|default('primary') }} {{ content.class|default('') }}">
            {{ content.text }}
        </button>
        <button type="button" class="btn btn-{{ content.type|default('primary') }} dropdown-toggle dropdown-toggle-split {{ content.splitButtonClass|default('') }}" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="visually-hidden">Toggle Dropdown</span>
        </button>
    {% else %}
        <button type="button" class="btn btn-{{ content.type|default('primary') }} dropdown-toggle {{ content.class|default('') }}" data-bs-toggle="dropdown" aria-expanded="false">
            {{ content.text }}
        </button>
    {% endif %}
    <ul class="dropdown-menu{% if content.menuEnd %} dropdown-menu-end{% endif %}">
        {% for item in content.items %}
            {% if item.divider is defined and item.divider %}
                <li><hr class="dropdown-divider"></li>
            {% else %}
                <li><a class="dropdown-item" href="{{ item.href|default('#') }}">{{ item.text }}</a></li>
            {% endif %}
        {% endfor %}
    </ul>
</div>