Card Component
    A Bootstrap 5 component for creating versatile content containers with various styling options.

    Parameters:
    Core Options:
        - id: string - Unique identifier for the card (optional)
        - class: string - Additional CSS classes (optional)
        - style: string - Inline styles (optional)
        - horizontal: boolean - Display card horizontally (default: false)
        - group: boolean - Card is part of a card group (default: false)

    Style Options:
        - variant: string - Card color variant
            Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'
        - border: string - Border color variant (same values as variant)
        - text_color: string - Text color variant (same values as variant)

    Header Options:
        - header: string|array - Header content or configuration
            Simple: string - Direct header content
            Advanced:
                - content: string - Header content (required)
                - class: string - Additional header classes
                - variant: string - Header background variant (same values as card variant)

    Image Options:
        - image: array - Image configuration
            - src: string - Image source URL (required)
            - alt: string - Alternative text (default: 'Card image')
            - position: string - Image position ('top', 'bottom', 'overlay')
            - class: string - Additional image classes

    Body Options:
        - body: array - Body configuration
            - title: string - Card title
            - subtitle: string - Card subtitle
            - content: string - Main content
            - class: string - Additional body classes

    Footer Options:
        - footer: string|array - Footer content or configuration
            Simple: string - Direct footer content
            Advanced:
                - content: string - Footer content (required)
                - class: string - Additional footer classes
                - variant: string - Footer background variant (same values as card variant)

    Example Usage:
    {{ component('content/card', {
        id: 'featured-card',
        variant: 'primary',
        header: {
            content: 'Featured Article',
            variant: 'dark'
        },
        image: {
            src: 'path/to/image.jpg',
            alt: 'Article thumbnail',
            position: 'top'
        },
        body: {
            title: 'Card Title',
            subtitle: 'Supporting text',
            content: '<p>Some quick example text to build on the card title.</p>'
        },
        footer: 'Last updated 3 mins ago'
    }) }}

    ThemedComponent::make("content/card")
	->content('value') //string - Footer content (required) (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)
	->alt('value') //string - Alternative text (default: 'Card image')
	->body('value') //array - Body configuration
	->border('value') //string - Border color variant (same values as variant)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional footer classes
	->footer('value') //string|array - Footer content or configuration
	->group('value') //boolean - Card is part of a card group (default: false)
	->header('value') //string|array - Header content or configuration
	->horizontal('value') //boolean - Display card horizontally (default: false)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->image('value') //array - Image configuration
	->position('value') //string - Image position ('top', 'bottom', 'overlay')
	->src('value') //string - Image source URL (required)
	->style('value') //string - Inline styles (optional)
	->subtitle('value') //string - Card subtitle
	->text_color('value') //string - Text color variant (same values as variant)
	->title('value') //string - Card title
	->variant('value') //string - Footer background variant (same values as card variant)
	->render();

// Basic card with title and content
echo ThemedComponent::make(content/card)
    ->id('basic-card')
    ->body([
        'title' => 'Card Title',
        'content' => '<p>Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>'
    ])
    ->render();

// Advanced card with image, header, and footer
echo ThemedComponent::make('content/card')
    ->id('featured-article')
    ->variant('light')
    ->border('primary')
    ->header([
        'content' => 'Featured Article',
        'variant' => 'primary'
    ])
    ->image([
        'src' => 'https://picsum.photos/800/400',
        'alt' => 'Article thumbnail',
        'position' => 'top'
    ])
    ->body([
        'title' => 'Special Feature',
        'subtitle' => 'Discover what\'s new',
        'content' => '<p>This card demonstrates various features including a header with variant, 
                     full-width image at the top, and a footer with additional information.</p>
                     <a href="#" class="btn btn-primary">Read more</a>'
    ])
    ->footer([
        'content' => '<small class="text-muted">Last updated 3 mins ago</small>',
        'class' => 'text-end'
    ])
    ->render();

Featured Article

Special Feature

Discover what's new

This card demonstrates various features including a header with variant, full-width image at the top, and a footer with additional information.

Read more

Last updated 3 mins ago

// Horizontal card with image
echo ThemedComponent::make('content/card')
    ->id('horizontal-card')
    ->horizontal(true)
    ->image([
        'src' => 'https://picsum.photos/200/200',
        'alt' => 'Card image',
        'class' => 'img-fluid rounded-start'
    ])
    ->body([
        'title' => 'Horizontal Layout',
        'content' => '<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>'
    ])
    ->render();

// Grid container for card variations
echo '<div class="row g-4">';

// Horizontal card with image
echo '<div class="col-md-6">';
echo ThemedComponent::make('content/card')
    ->id('horizontal-card')
    ->horizontal(true)
    ->image([
        'src' => 'https://picsum.photos/200/200',
        'alt' => 'Card image',
        'class' => 'img-fluid rounded-start'
    ])
    ->body([
        'title' => 'Horizontal Layout',
        'content' => '<p>This is a wider card with supporting text below as a natural lead-in to additional content.</p>'
    ])
    ->render();
echo '</div>';

// Card with image overlay
echo '<div class="col-md-6">';
echo ThemedComponent::make('content/card')
    ->id('overlay-card')
    ->class('text-white')
    ->image([
        'src' => 'https://picsum.photos/800/400',
        'alt' => 'Card background',
        'position' => 'overlay'
    ])
    ->body([
        'title' => 'Image Overlay',
        'content' => '<p>This is a card with an image overlay effect. The text appears on top of the image.</p>'
    ])
    ->render();
echo '</div>';

echo '</div>';

Horizontal Layout

This is a wider card with supporting text below as a natural lead-in to additional content.

Image Overlay

This is a card with an image overlay effect. The text appears on top of the image.

{# Card Component
    A Bootstrap 5 component for creating versatile content containers with various styling options.

    Parameters:
    Core Options:
        - id: string - Unique identifier for the card (optional)
        - class: string - Additional CSS classes (optional)
        - style: string - Inline styles (optional)
        - horizontal: boolean - Display card horizontally (default: false)
        - group: boolean - Card is part of a card group (default: false)

    Style Options:
        - variant: string - Card color variant
            Values: 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'
        - border: string - Border color variant (same values as variant)
        - text_color: string - Text color variant (same values as variant)

    Header Options:
        - header: string|array - Header content or configuration
            Simple: string - Direct header content
            Advanced:
                - content: string - Header content (required)
                - class: string - Additional header classes
                - variant: string - Header background variant (same values as card variant)

    Image Options:
        - image: array - Image configuration
            - src: string - Image source URL (required)
            - alt: string - Alternative text (default: 'Card image')
            - position: string - Image position ('top', 'bottom', 'overlay')
            - class: string - Additional image classes

    Body Options:
        - body: array - Body configuration
            - title: string - Card title
            - subtitle: string - Card subtitle
            - content: string - Main content
            - class: string - Additional body classes

    Footer Options:
        - footer: string|array - Footer content or configuration
            Simple: string - Direct footer content
            Advanced:
                - content: string - Footer content (required)
                - class: string - Additional footer classes
                - variant: string - Footer background variant (same values as card variant)

    Example Usage:
    {{ component('content/card', {
        id: 'featured-card',
        variant: 'primary',
        header: {
            content: 'Featured Article',
            variant: 'dark'
        },
        image: {
            src: 'path/to/image.jpg',
            alt: 'Article thumbnail',
            position: 'top'
        },
        body: {
            title: 'Card Title',
            subtitle: 'Supporting text',
            content: '<p>Some quick example text to build on the card title.</p>'
        },
        footer: 'Last updated 3 mins ago'
    }) }}
#}

<div id="{{ content.id }}" 
     class="card{% if content.variant %} bg-{{ content.variant }}{% endif %}{% if content.border %} border-{{ content.border }}{% endif %}{% if content.text_color %} text-{{ content.text_color }}{% endif %}{% if content.horizontal %} flex-row{% endif %}{% if content.class %} {{ content.class }}{% endif %}"
     {% if content.style %}style="{{ content.style }}"{% endif %}>
    
    {# Header #}
    {% if content.header %}
        {% if content.header is iterable %}
            <div class="card-header{% if content.header.variant %} bg-{{ content.header.variant }}{% endif %}{% if content.header.class %} {{ content.header.class }}{% endif %}">
                {{ content.header.content|raw }}
            </div>
        {% else %}
            <div class="card-header">{{ content.header|raw }}</div>
        {% endif %}
    {% endif %}

    {# Image #}
    {% if content.image %}
        {% set image_class = 'card-img' ~ 
            (content.image.position == 'top' ? '-top' : 
             content.image.position == 'bottom' ? '-bottom' : '') %}
        
        {% if content.image.position == 'overlay' %}
            <div class="card-img-overlay">
                {% if content.body %}
                    {% if content.body.title %}
                        <h5 class="card-title">{{ content.body.title }}</h5>
                    {% endif %}
                    {% if content.body.subtitle %}
                        <h6 class="card-subtitle mb-2 text-muted">{{ content.body.subtitle }}</h6>
                    {% endif %}
                    {% if content.body.content %}
                        <div class="card-text">{{ content.body.content|raw }}</div>
                    {% endif %}
                {% endif %}
            </div>
        {% endif %}
        
        <img src="{{ content.image.src }}" 
             class="{{ image_class }}{% if content.image.class %} {{ content.image.class }}{% endif %}" 
             alt="{{ content.image.alt|default('Card image') }}">
    {% endif %}

    {# Body #}
    {% if content.body and content.image.position != 'overlay' %}
        <div class="card-body{% if content.body.class %} {{ content.body.class }}{% endif %}">
            {% if content.body.title %}
                <h5 class="card-title">{{ content.body.title }}</h5>
            {% endif %}
            {% if content.body.subtitle %}
                <h6 class="card-subtitle mb-2 text-muted">{{ content.body.subtitle }}</h6>
            {% endif %}
            {% if content.body.content %}
                <div class="card-text">{{ content.body.content|raw }}</div>
            {% endif %}
        </div>
    {% endif %}

    {# Footer #}
    {% if content.footer %}
        {% if content.footer is iterable %}
            <div class="card-footer{% if content.footer.variant %} bg-{{ content.footer.variant }}{% endif %}{% if content.footer.class %} {{ content.footer.class }}{% endif %}">
                {{ content.footer.content|raw }}
            </div>
        {% else %}
            <div class="card-footer">{{ content.footer|raw }}</div>
        {% endif %}
    {% endif %}
</div>