{%- if editmode -%}

    {%- for i in pimcore_block('textBlock').iterator() -%}

        <div class="ms-40">

            <div class="h6">Color</div>
            {{ pimcore_select("color", {
                "store": select_editables_store.theme_colors,
                "defaultValue": "body"
            }) }}

            <div class="text-{{ pimcore_select("color").data }} text-{{ alignment }} {{ heading_size }}">{{ pimcore_input('text') }}</div>

        </div>

    {%- endfor -%}

{%- else -%}

    <div class="d-flex justify-content-{{ alignment }}">

        <{{ heading_semantic }} class="text-{{ alignment }} {{ heading_size }}"  {% if max_width and not max_width.empty %}style="max-width:{{ max_width }}rem"{% endif %}>

            {%- if icon and not icon.empty -%}

                <div class="position-relative p-30"> {# to change the height of the icon, play with the padding here in this div #}
                    <div class="position-absolute top-0  {% if alignment == 'center' %}start-50  translate-middle-x{% else %}{{ alignment }}-0{% endif %} d-flex justify-content-{{ alignment }} w-100 h-100">
                        <img src="{{ icon.getSrc() }}" alt="" role="presentation" class="object-fit-contain">
                    </div>
                </div>
            
            {%- endif -%}

            <div>

                {%- for i in pimcore_block('textBlock').iterator() -%}

                    <span class="text-{{ pimcore_select("color").data }}">{{ pimcore_input('text').data }}</span>

                {%- endfor -%}


            </div>

        </{{ heading_semantic }}>

    </div>

{%- endif -%}