{%- if editmode -%}

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

        <div class="ms-40">
            <div class="row">
                <div class="col-3">
                    <div class="h6">Line color</div>
                    {{ pimcore_select("lineColor", {
                        "store": select_editables_store.theme_colors,
                        "defaultValue": "body"
                    }) }}
                </div>
                <div class="col-3">
                    <div class="h6">Heading semantic</div>
                    {{ pimcore_select("headingSemantic", {
                        "store": select_editables_store.heading_semantic,
                        "defaultValue": "span"
                    }) }}
                </div>
                <div class="col-3">
                    <div class="h6">Heading size</div>
                    {{ pimcore_select("headingSize", {
                        "store": select_editables_store.text_size,
                        "defaultValue": "h5"
                    }) }}
                </div>
                <div class="col-3">
                    <div class="h6">Heading color</div>
                    {{ pimcore_select("headingColor", {
                        "store": select_editables_store.theme_colors,
                        "defaultValue": "body"
                    }) }}
                </div>
                <div class="col-3">
                    <div class="h6">Body size</div>
                    {{ pimcore_select("bodySize", {
                        "store": select_editables_store.text_size,
                        "defaultValue": "b1"
                    }) }}
                </div>
                <div class="col-3">
                    <div class="h6">Body color</div>
                    {{ pimcore_select("bodyColor", {
                        "store": select_editables_store.theme_colors,
                        "defaultValue": "body"
                    }) }}
                </div>
            </div>
            <div class="row">
                <div class="col-auto">
                    {{ pimcore_image('icon', {
                        width: 200,
                        height: 200
                    }) }}
                </div>
                <div class="col">
                    <div class="{{ pimcore_select("headingSize").data }} text-{{ pimcore_select("headingColor").data }}">{{ pimcore_input('heading', {
                        placeholder: 'Lorem ipsum'
                    }) }}</div>
                    <div class="{{ pimcore_select("bodySize").data }} text-{{ pimcore_select("bodyColor").data }}">{{ pimcore_wysiwyg('body', {
                        placeholder: 'Lorem ipsum dolor sit amet'
                    }) }}</div>
                </div>
            </div>
        </div>

    {%- endfor -%}

{%- else -%}

    {%- macro col(width, breakpoint) -%}
        col{{ breakpoint ? '-' ~ breakpoint : '' }}{{ width == '' ? '' : '-' ~ width }}
    {%- endmacro -%}

    {%- if pimcore_block('iconBlockBlock').count > 0 -%}

        <div class="row gy-lg-100">
        
            {%- for i in pimcore_block('iconBlockBlock').iterator() -%}

                {%- set icon = pimcore_image('icon') -%}
                {%- set heading = pimcore_input('heading') -%}
                {%- set body = pimcore_wysiwyg('body') -%}

                <div class="{{ _self.col(col_width_mobile, '') }} {{ _self.col(col_width_tablet, 'lg') }} {{ _self.col(col_width_desktop, 'xl') }}">

                    <hr role="none" class="border-{{ pimcore_select("lineColor").data }} opacity-100 mb-30">

                    <div class="d-flex flex-column align-items-{{ alignment }} text-{{ alignment }}">

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

                        {%- if heading.data -%}
                            <div>
                                <{{ pimcore_select("headingSemantic").data }} class="{{ pimcore_select("headingSize").data }} text-{{ pimcore_select("headingColor").data }}">
                                    {{ heading.data }}
                                </{{ pimcore_select("headingSemantic").data }}>
                            </div>
                        {%- endif -%}

                        {%- if body.data -%}
                            <div class="{{ pimcore_select("bodySize").data }} text-{{ pimcore_select("bodyColor").data }}">
                                {{ body.data | raw }}
                            </div>
                        {%- endif -%}

                    </div>
                    
                </div>

            {%- endfor -%}
        
        </div>

    {%- endif -%}

{%- endif -%}