{% if component.enabled == true %}
	<div class="container form-container">
		<form action="{{ component.configuration.action|default('#') }}" method="{{ component.configuration.method|default('post') }}" class="{{ component.configuration.cssClass|default('') }}">
			<h2>{{ component.configuration.formName|default('') }}</h2>

			{% for field in fields %}
				{% set type = field.type|default('text') %}
				{% set label = field.label|default('Champ ' ~ loop.index) %}
				{% set required = field.required == 'true' ? 'required' : '' %}
				{% set placeholder = field.placeholder|default('') %}
				{% set options = field.options ? field.options|split(', ') : [] %}
				{% set pattern = field.pattern|default('') %}
				{% set min = field.min|default('') %}
				{% set max = field.max|default('') %}

				<div class="form-group mb-3">
					<label class="form-label" for="field{{ loop.index0 }}">{{ label }}</label>

					{% if type in ['text', 'email', 'password'] %}
						<input class="form-control" type="{{ type }}" name="field{{ loop.index0 }}" id="field{{ loop.index0 }}" placeholder="{{ placeholder }}" {{ required }} {% if pattern %} pattern="{{ pattern }}" {% endif %}>

					{% elseif type == 'integer' %}
						<input type="number" name="field{{ loop.index0 }}" id="field{{ loop.index0 }}" placeholder="{{ placeholder }}" {{ required }} {% if min %} min="{{ min }}" {% endif %} {% if max %} max="{{ max }}" {% endif %}>

					{% elseif type == 'radio' %}
						{% for option in options %}
							<div>
								<input type="radio" name="field{{ loop.parent.loop.index0 }}" id="field{{ loop.parent.loop.index0 }}_{{ loop.index }}" value="{{ option }}" {{ required }}>
								<label for="field{{ loop.parent.loop.index0 }}_{{ loop.index }}">{{ option }}</label>
							</div>
						{% endfor %}

					{% elseif type == 'checkbox' %}
						{% for option in options %}
							<div>
								<input type="checkbox" name="field{{ loop.parent.loop.index0 }}[]" id="field{{ loop.parent.loop.index0 }}_{{ loop.index }}" value="{{ option }}" {{ required }}>
								<label for="field{{ loop.parent.loop.index0 }}_{{ loop.index }}">{{ option }}</label>
							</div>
						{% endfor %}
					{% endif %}
				</div>
			{% endfor %}

			<button class="btn btn-primary" type="submit">{{'Envoyer'|trans}}</button>
		</form>
	</div>
{% endif %}