Carousel Component
    A Bootstrap 5 carousel component for displaying a slideshow of content.

    Parameters:
    - id: string - Unique identifier for the carousel (default: random generated)
    - class: string - Additional CSS classes for the carousel
    - fade: boolean - Enable fade transition between slides
    - indicators: boolean - Show slide indicators
    - controls: boolean - Show previous/next controls
    - aspect_ratio: number - Set a fixed aspect ratio for slides (e.g., 56.25 for 16:9)
    - dark_controls: boolean - Use dark-colored controls
    - dark_indicators: boolean - Use dark-colored indicators
    - styles: boolean - Include custom styles
    - items: array - Array of carousel items
        - image: object - Image configuration
            - src: string - Image source URL
            - alt: string - Alt text for the image
        - title: string - Slide title
        - caption: string - Slide caption text
        - caption_class: string - Additional classes for caption
        - buttons: array - Array of buttons
            - text: string - Button text
            - url: string - Button URL
            - style: string - Button style (default: 'light')

    ThemedComponent::make("content/carousel")
	->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)
	->alt('value') //string - Alt text for the image
	->aspect_ratio('value') //number - Set a fixed aspect ratio for slides (e.g., 56.25 for 16:9)
	->buttons('value') //array - Array of buttons
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->caption('value') //string - Slide caption text
	->caption_class('value') //string - Additional classes for caption
	->class('value') //string - Additional CSS classes for the carousel
	->controls('value') //boolean - Show previous/next controls
	->dark_controls('value') //boolean - Use dark-colored controls
	->dark_indicators('value') //boolean - Use dark-colored indicators
	->fade('value') //boolean - Enable fade transition between slides
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->image('value') //object - Image configuration
	->indicators('value') //boolean - Show slide indicators
	->items('value') //array - Array of carousel items
	->src('value') //string - Image source URL
	->style('value') //string - Button style (default: 'light')
	->styles('value') //boolean - Include custom styles
	->text('value') //string - Button text
	->title('value') //string - Slide title
	->url('value') //string - Button URL
	->render();

// Basic carousel example
echo ThemedComponent::make($component)
    ->id('basicCarousel')
    ->items([
        [
            'image' => [
                'src' => 'https://picsum.photos/800/400?random=1',
                'alt' => 'First slide'
            ],
            'title' => 'First Slide',
            'caption' => 'This is the first slide description.'
        ],
        [
            'image' => [
                'src' => 'https://picsum.photos/800/400?random=2',
                'alt' => 'Second slide'
            ],
            'title' => 'Second Slide',
            'caption' => 'This is the second slide description.'
        ],
        [
            'image' => [
                'src' => 'https://picsum.photos/800/400?random=3',
                'alt' => 'Third slide'
            ],
            'title' => 'Third Slide',
            'caption' => 'This is the third slide description.'
        ]
    ])
    ->controls(true)
    ->indicators(true)
    ->render();

First Slide

This is the first slide description.

Second Slide

This is the second slide description.

Third Slide

This is the third slide description.

Previous Next

// Advanced carousel with custom styling and buttons
echo ThemedComponent::make($component)
    ->id('advancedCarousel')
    ->items([
        [
            'image' => [
                'src' => 'https://picsum.photos/800/400?random=4',
                'alt' => 'Feature slide'
            ],
            'title' => 'Feature Slide',
            'caption' => 'This slide includes call-to-action buttons.',
            'caption_class' => 'text-start bg-dark bg-opacity-75 p-4',
            'buttons' => [
                [
                    'text' => 'Learn More',
                    'url' => '#',
                    'style' => 'primary'
                ],
                [
                    'text' => 'Contact Us',
                    'url' => '#',
                    'style' => 'outline-light'
                ]
            ]
        ],
        [
            'image' => [
                'src' => 'https://picsum.photos/800/400?random=5',
                'alt' => 'Feature slide 2'
            ],
            'title' => 'Custom Aspect Ratio',
            'caption' => 'This carousel maintains a 16:9 aspect ratio.'
        ]
    ])
    ->controls(true)
    ->indicators(true)
    ->aspect_ratio(56.25)
    ->fade(true)
    ->dark_controls(true)
    ->dark_indicators(true)
    ->styles(true)
    ->render();

Feature Slide

This slide includes call-to-action buttons.

Learn More Contact Us

Custom Aspect Ratio

This carousel maintains a 16:9 aspect ratio.

Previous Next

{# Carousel Component
    A Bootstrap 5 carousel component for displaying a slideshow of content.

    Parameters:
    - id: string - Unique identifier for the carousel (default: random generated)
    - class: string - Additional CSS classes for the carousel
    - fade: boolean - Enable fade transition between slides
    - indicators: boolean - Show slide indicators
    - controls: boolean - Show previous/next controls
    - aspect_ratio: number - Set a fixed aspect ratio for slides (e.g., 56.25 for 16:9)
    - dark_controls: boolean - Use dark-colored controls
    - dark_indicators: boolean - Use dark-colored indicators
    - styles: boolean - Include custom styles
    - items: array - Array of carousel items
        - image: object - Image configuration
            - src: string - Image source URL
            - alt: string - Alt text for the image
        - title: string - Slide title
        - caption: string - Slide caption text
        - caption_class: string - Additional classes for caption
        - buttons: array - Array of buttons
            - text: string - Button text
            - url: string - Button URL
            - style: string - Button style (default: 'light')
#}

<div id="{{ content.id|default('carousel-' ~ random()) }}" class="carousel slide{% if content.fade %} carousel-fade{% endif %}{% if content.class %} {{ content.class }}{% endif %}" data-bs-ride="carousel">
    {% if content.indicators %}
    <div class="carousel-indicators">
        {% for item in content.items %}
        <button type="button" 
                data-bs-target="#{{ content.id|default('carousel-' ~ random()) }}" 
                data-bs-slide-to="{{ loop.index0 }}"
                {% if loop.first %}class="active" aria-current="true"{% endif %}
                aria-label="Slide {{ loop.index }}">
        </button>
        {% endfor %}
    </div>
    {% endif %}

    <div class="carousel-inner">
        {% for item in content.items %}
        <div class="carousel-item{% if loop.first %} active{% endif %}">
            {% if item.image %}
            {% if content.aspect_ratio %}
            <div style="position: relative; padding-bottom: {{ content.aspect_ratio }}%;">
                <img src="{{ item.image.src }}" 
                     class="d-block w-100 position-absolute top-0 start-0 w-100 h-100 object-fit-cover" 
                     alt="{{ item.image.alt|default('') }}">
            </div>
            {% else %}
            <img src="{{ item.image.src }}" 
                 class="d-block w-100" 
                 alt="{{ item.image.alt|default('') }}">
            {% endif %}
            {% endif %}

            {% if item.caption or item.title %}
            <div class="carousel-caption d-none d-md-block{% if item.caption_class %} {{ item.caption_class }}{% endif %}">
                {% if item.title %}
                <h5>{{ item.title }}</h5>
                {% endif %}
                {% if item.caption %}
                <p>{{ item.caption }}</p>
                {% endif %}
                {% if item.buttons %}
                <div class="carousel-buttons">
                    {% for button in item.buttons %}
                    <a href="{{ button.url }}" class="btn btn-{{ button.style|default('light') }}">{{ button.text }}</a>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    {% if content.controls %}
    <button class="carousel-control-prev" type="button" data-bs-target="#{{ content.id|default('carousel-' ~ random()) }}" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#{{ content.id|default('carousel-' ~ random()) }}" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    {% endif %}
</div>

{% if content.styles %}
<style>
.carousel-item {
    transition: transform .6s ease-in-out;
}
{% if content.dark_controls %}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1) grayscale(100);
}
{% endif %}
{% if content.dark_indicators %}
.carousel-indicators button {
    filter: invert(1) grayscale(100);
}
{% endif %}
</style>
{% endif %}