{% if component.enabled == true %}
	{% set config = component.configuration.config|default({}) %}
	{% set blocTitle       = config.blocTitle|default('') %}
	{% set htmlContent     = config.htmlContent|default('') %}
	{% set cssClass        = config.cssClass|default('') %}
	{% set displayWidth    = config.displayWidth|default('') %}
	{% set padding         = config.padding|default('') %}
	{% set backgroundColor = config.backgroundColor|default('transparent') %}
	{% set backgroundImage = config.backgroundImage|default('') %}
	{% set border          = config.border|default('none') %}
	{% set textAlign       = config.textAlign|default('left') %}
	{% set imageUrl        = config.imageUrl|default('') %}
	{% set imagePosition   = config.imagePosition|default('top') %}
	{% set textPosition    = config.textPosition|default(textAlign) %}
	{% set inlineStyle = '' %}
	{% if displayWidth %}
		{% set inlineStyle = inlineStyle ~ 'width:' ~ displayWidth ~ '; ' %}
	{% endif %}
	{% if padding %}
		{% set inlineStyle = inlineStyle ~ 'padding:' ~ padding ~ '; ' %}
	{% endif %}
	{% if backgroundColor %}
		{% set inlineStyle = inlineStyle ~ 'background-color:' ~ backgroundColor ~ '; ' %}
	{% endif %}
	{% if backgroundImage %}
		{% set inlineStyle = inlineStyle ~ 'background-image:url(' ~ backgroundImage ~ '); ' %}
	{% endif %}
	{% if border and border != 'none' %}
		{% set inlineStyle = inlineStyle ~ 'border:' ~ border ~ '; ' %}
	{% endif %}
	{% if textAlign %}
		{% set inlineStyle = inlineStyle ~ 'text-align:' ~ textAlign ~ '; ' %}
	{% endif %}

	{% if imagePosition in ['top', 'bottom'] %}
		{% set flexDirection = 'column' %}
	{% else %}
		{% set flexDirection = 'row' %}
	{% endif %}

	{% set imageFirst = (imagePosition == 'top' or imagePosition == 'left') %}

	<div class="component-bloc {{ cssClass }}" style="{{ inlineStyle }}">
		{% if blocTitle|trim != '' %}
			<h2 class="bloc-title">{{ blocTitle }}</h2>
		{% endif %}

		<div class="bloc-inner" style="display: flex; flex-direction: {{ flexDirection }}; align-items: center;">
			{% if imageUrl and imageFirst %}
				<div class="bloc-image" style="margin: 10px;">
					<img src="{{ imageUrl }}" alt="Image du composant" style="max-width: 100%;">
				</div>
			{% endif %}

			<div class="bloc-text" style="margin: 10px; text-align: {{ textPosition }};">
				{{ htmlContent|raw }}
			</div>

			{% if imageUrl and not imageFirst %}
				<div class="bloc-image" style="margin: 10px;">
					<img src="{{ imageUrl }}" alt="Image du composant" style="max-width: 100%;">
				</div>
			{% endif %}
		</div>
	</div>
{% endif %}