Form Group Component
   - label: string - Label text (required)
   - for: string - ID of the form control this label is for (required)
   - help: string - Help text to display below the form control (optional)
   - error: string - Error message to display (optional)
   - required: boolean - Whether to show required indicator (default: false)
   - class: string - Additional CSS classes (optional)

    ThemedComponent::make("form/form-group")
	->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)
	->error('value') //string - Error message to display (optional)
	->for('value') //string - ID of the form control this label is for (required)
	->help('value') //string - Help text to display below the form control (optional)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->label('value') //string - Label text (required)
	->required('value') //boolean - Whether to show required indicator (default: false)
	->render();

// Form group with text input
echo ThemedComponent::make('form/form-group')
    ->label('Username')
    ->for('username')
    ->required(true)
    ->control(
        ThemedComponent::make('form/input')
            ->name('username')
            ->id('username')
            ->required(true)
            ->render()
    )
    ->help('Choose a unique username')
    ->render();

// Form group with textarea
echo ThemedComponent::make('form/form-group')
    ->label('Bio')
    ->for('bio')
    ->control(
        ThemedComponent::make('form/textarea')
            ->name('bio')
            ->id('bio')
            ->rows(3)
            ->render()
    )
    ->render();

// Form group with select
echo ThemedComponent::make('form/form-group')
    ->label('Country')
    ->for('country')
    ->control(
        ThemedComponent::make('form/select')
            ->name('country')
            ->id('country')
            ->options([
                ['value' => 'us', 'label' => 'United States'],
                ['value' => 'uk', 'label' => 'United Kingdom'],
                ['value' => 'ca', 'label' => 'Canada']
            ])
            ->render()
    )
    ->render();

echo ThemedComponent::make('form/form-group')
    ->label('Email')
    ->for('email')
    ->required(true)
    ->control(
        ThemedComponent::make('form/input')
            ->name('email')
            ->id('email')
            ->type('email')
            ->required(true)
            ->render()
    )
    ->error('Please enter a valid email address')
    ->render();

{# Form Group Component
   - label: string - Label text (required)
   - for: string - ID of the form control this label is for (required)
   - help: string - Help text to display below the form control (optional)
   - error: string - Error message to display (optional)
   - required: boolean - Whether to show required indicator (default: false)
   - class: string - Additional CSS classes (optional)
#}

<div class="mb-3 {{ content.class|default('') }}">
    <label class="form-label" for="{{ content.for }}">
        {{ content.label }}
        {% if content.required %}
            <span class="text-danger">*</span>
        {% endif %}
    </label>
    {{ content.control|raw }}
    {% if content.help %}
        <div class="form-text">{{ content.help }}</div>
    {% endif %}
    {% if content.error %}
        <div class="invalid-feedback d-block">{{ content.error }}</div>
    {% endif %}
</div>