Accordion Component
    A Bootstrap 5 accordion component for collapsible content sections.

    Parameters:
    - id: string - Unique identifier for the accordion
    - items: array - Array of accordion items
        - title: string - Title of the accordion item
        - content: string - Content of the accordion item
        - show: boolean - Whether the item is expanded by default
        - header_variant: string - Color variant for the header (primary, secondary, etc.)
        - header_icon: string - Icon class for the header (e.g., bi bi-star)
    - flush: boolean - Whether to remove borders and background
    - always_open: boolean - Whether multiple items can be open at once
    - class: string - Additional CSS classes

    ThemedComponent::make("content/accordion")
	->content('value') //string - Content of the accordion item (always set this first)
	->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)
	->always_open('value') //boolean - Whether multiple items can be open at once
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes
	->flush('value') //boolean - Whether to remove borders and background
	->header_icon('value') //string - Icon class for the header (e.g., bi bi-star)
	->header_variant('value') //string - Color variant for the header (primary, secondary, etc.)
	->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 accordion items
	->show('value') //boolean - Whether the item is expanded by default
	->title('value') //string - Title of the accordion item
	->render();

// Basic accordion example
echo ThemedComponent::make($component)
    ->id('basicAccordion')
    ->items([
        [
            'title' => 'Accordion Item #1',
            'content' => 'This is the first item\'s accordion body.',
            'show' => true
        ],
        [
            'title' => 'Accordion Item #2',
            'content' => 'This is the second item\'s accordion body.'
        ],
        [
            'title' => 'Accordion Item #3',
            'content' => 'This is the third item\'s accordion body.'
        ]
    ])
    ->render();

// Advanced accordion with styling and icons
echo ThemedComponent::make($component)
    ->id('advancedAccordion')
    ->flush(true)
    ->always_open(true)
    ->items([
        [
            'title' => 'Primary Header',
            'content' => 'Content with primary colored header.',
            'header_variant' => 'primary',
            'header_icon' => 'bi bi-star'
        ],
        [
            'title' => 'Secondary Header',
            'content' => 'Content with secondary colored header.',
            'header_variant' => 'secondary',
            'header_icon' => 'bi bi-heart'
        ],
        [
            'title' => 'Success Header',
            'content' => 'Content with success colored header.',
            'header_variant' => 'success',
            'header_icon' => 'bi bi-check-circle'
        ]
    ])
    ->render();

{# Accordion Component
    A Bootstrap 5 accordion component for collapsible content sections.

    Parameters:
    - id: string - Unique identifier for the accordion
    - items: array - Array of accordion items
        - title: string - Title of the accordion item
        - content: string - Content of the accordion item
        - show: boolean - Whether the item is expanded by default
        - header_variant: string - Color variant for the header (primary, secondary, etc.)
        - header_icon: string - Icon class for the header (e.g., bi bi-star)
    - flush: boolean - Whether to remove borders and background
    - always_open: boolean - Whether multiple items can be open at once
    - class: string - Additional CSS classes

#}

<div class="accordion{% if content.flush %} accordion-flush{% endif %}{% if content.class %} {{ content.class }}{% endif %}" id="{{ content.id }}">
    {% for item in content.items %}
        {% set item_id = content.id ~ '-' ~ loop.index %}
        <div class="accordion-item">
            <h2 class="accordion-header" id="{{ item_id }}-header">
                <button class="accordion-button{% if not item.show %} collapsed{% endif %}{% if item.header_variant %} text-{{ item.header_variant }}{% endif %}" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#{{ item_id }}"
                        aria-expanded="{% if item.show %}true{% else %}false{% endif %}"
                        aria-controls="{{ item_id }}"
                        aria-label="{{ item.title|default('Accordion Item') }}">
                    {% if item.header_icon %}
                        <i class="{{ item.header_icon }} me-2" aria-hidden="true"></i>
                    {% endif %}
                    {{ item.title|default('Accordion Item') }}
                </button>
            </h2>
            <div id="{{ item_id }}" 
                 class="accordion-collapse collapse{% if item.show %} show{% endif %}"
                 aria-labelledby="{{ item_id }}-header"
                 {% if not content.always_open %}data-bs-parent="#{{ content.id }}"{% endif %}>
                <div class="accordion-body">
                    {{ item.content|raw }}
                </div>
            </div>
        </div>
    {% endfor %}
</div>