Input Field Component
   - name: string - Input field name attribute (required)
   - type: string - Input type (text, email, password, etc.) (default: text)
   - value: string - Input value (optional)
   - placeholder: string - Placeholder text (optional)
   - required: boolean - Whether the field is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - readonly: boolean - Whether the field is readonly (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Input ID attribute (optional, defaults to name)

    ThemedComponent::make("form/input")
	->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)
	->disabled('value') //boolean - Whether the field is disabled (default: false)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->name('value') //string - Input field name attribute (required)
	->placeholder('value') //string - Placeholder text (optional)
	->readonly('value') //boolean - Whether the field is readonly (default: false)
	->required('value') //boolean - Whether the field is required (default: false)
	->type('value') //string - Input type (text, email, password, etc.) (default: text)
	->value('value') //string - Input value (optional)
	->render();

echo ThemedComponent::make('form/input')
    ->name('username')
    ->placeholder('Enter username')
    ->required(true)
    ->render();

// Email input
echo ThemedComponent::make('form/input')
    ->name('email')
    ->type('email')
    ->placeholder('Enter email')
    ->render();

// Password input
echo ThemedComponent::make('form/input')
    ->name('password')
    ->type('password')
    ->placeholder('Enter password')
    ->render();

// Number input
echo ThemedComponent::make('form/input')
    ->name('age')
    ->type('number')
    ->min(18)
    ->max(100)
    ->render();

// Range input
echo ThemedComponent::make('form/form-group')
    ->label('Example range')
    ->for('customRange2')
    ->control(
        ThemedComponent::make('form/input')
            ->name('customRange2')
            ->id('customRange2')
            ->type('range')
            ->class('form-range')
            ->min(0)
            ->max(5)
            ->render()
    )
    ->render();

// Color picker
echo ThemedComponent::make('form/form-group')
    ->label('Color picker')
    ->for('exampleColorInput')
    ->control(
        ThemedComponent::make('form/input')
            ->name('exampleColorInput')
            ->id('exampleColorInput')
            ->type('color')
            ->class('form-control form-control-color')
            ->value('#563d7c')
            ->title('Choose your color')
            ->render()
    )
    ->render();

// Disabled input
echo ThemedComponent::make('form/input')
    ->name('disabled-input')
    ->value('Disabled input')
    ->disabled(true)
    ->render();

// Readonly input
echo ThemedComponent::make('form/input')
    ->name('readonly-input')
    ->value('Readonly input')
    ->readonly(true)
    ->render();

{# Input Field Component
   - name: string - Input field name attribute (required)
   - type: string - Input type (text, email, password, etc.) (default: text)
   - value: string - Input value (optional)
   - placeholder: string - Placeholder text (optional)
   - required: boolean - Whether the field is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - readonly: boolean - Whether the field is readonly (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Input ID attribute (optional, defaults to name)
#}

<input 
    type="{{ content.type|default('text') }}"
    name="{{ content.name }}"
    id="{{ content.id|default(content.name) }}"
    value="{{ content.value|default('') }}"
    {% if content.placeholder %}placeholder="{{ content.placeholder }}"{% endif %}
    {% if content.required %}required{% endif %}
    {% if content.disabled %}disabled{% endif %}
    {% if content.readonly %}readonly{% endif %}
    class="form-control {{ content.class|default('') }}"
>