foo.html.twig

{% set naviTabOuterBlock = pimcore_block('navi_tab_outer', {'manual' : true, 'default' : 3}).start() %}
{% if editmode and naviTabOuterBlock.getElements() is empty %}
    <div class="row">
        <div class="col-lg-6 alert alert-warning">
            <svg width="1.0625em" height="1em" viewBox="0 0 17 16" class="bi bi-exclamation-triangle" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
            </svg>
            Please <strong>SAVE</strong> this document and reload the window to see the tabs and modify their content.<br />
            This needs to be done only once when freshly adding the component!
        </div>
    </div>
{% endif %}
<div class="navitab">
    <div class="navitab-base-level">
        {% set counter = 0 %}
        {% for outerBlockElements in naviTabOuterBlock.getElements() %}
            {% if outerBlockElements.getElement('tab_name') is null %}
                {% set tabId = 'outer-new-tab-' ~ counter %}
            {% else %}
                {% set tabId = outerBlockElements.getElement('tab_name').getData() | lower | replace({' ': ''}) ~ '-' ~ counter %}
            {% endif %}

            <input type="radio" class="navitab-tab-selector" name="navitab-base-selection" {% if counter == 0 %}checked{% endif %} id="{{ tabId }}" />

            {% set counter = counter + 1 %}
        {% endfor %}

        <hgroup class="text-center">
            <h5 class="mb-0">{{ pimcore_input('navi_tab_outer_label', {placeholder: 'An awesome label' | trans }) }}</h5>
            <h2>{{ pimcore_input('navi_tab_outer_headline', {placeholder: 'A magnificent headline' | trans }) }}</h2>
        </hgroup>

        <div class="navitab-tab-selectors">
            {% set counter = 0 %}
            {% for outerBlockElements in naviTabOuterBlock.getElements() %}
                {% if outerBlockElements.getElement('tab_name') is null %}
                    {% set tabId = 'outer-new-tab-' ~ counter %}
                    {% set tabValue = 'Tab ' ~ counter %}
                {% else %}
                    {% set tabId = outerBlockElements.getElement('tab_name').getData() | lower | replace({' ': ''}) ~ '-' ~ counter %}
                    {% set tabValue = outerBlockElements.getElement('tab_name').getData() %}
                {% endif %}

                <label for="{{ tabId }}">
                    <img src="car-regular.png">
                    <b>{{ tabValue }}</b>
                </label>

                {% set counter = counter + 1 %}
            {% endfor %}
        </div>

        <div class="navitab-next-level" id="{{ random('navitab-') }}">
            {% set outerNaviContainerCounter = 0 %}
            {% for b in pimcore_iterate_block(naviTabOuterBlock) %}
                {% do naviTabOuterBlock.blockConstruct() %}
                {% do naviTabOuterBlock.blockStart(false) %}

                {% if pimcore_input('tab_name') is null %}
                    {% set tabId = 'outer-new-tab-' ~ outerNaviContainerCounter %}
                {% else %}
                    {% set tabId = pimcore_input('tab_name').getData() | lower | replace({' ': ''}) ~ '-' ~ outerNaviContainerCounter %}
                {% endif %}
                <div class="navitab-element" id="{{ tabId }}">
                    {% if editmode %}
                    <div class="cms-config-container">
                        <div class="cms-config-header">{{ "Tab" | trans }} {{ "Configuration" | trans }}</div>
                        <div class="cms-config-body cms-config-hide">
                            <div class="cms-editmode-bar">
                                <div class="cms-editmode-controls rotate-270">
                                    {{ 'Add/Remove/Move Tab' | trans }}
                                    {% do naviTabOuterBlock.blockControls() %}
                                </div>
                                <div class="cms-editmode-bar-element">
                                    {{ 'Name for this Tab' | trans }}
                                    {{ pimcore_input('tab_name', {
                                        placeholder: 'Tab Name' | trans,
                                        width: 200,
                                        empty_data: 'empty_data',
                                    }) }}
                                    {% if pimcore_input('tab_name').isEmpty() %}
                                        {% do pimcore_input('tab_name').setDataFromResource('DefaultName') %}
                                    {% endif %}
                                </div>
                                <div class="cms-editmode-bar-element">
                                    {{ 'Navigation Image for this Tab' | trans }}
                                    {{ pimcore_image('tab_image', {
                                        width: 300,
                                        height: 150,
                                    }) }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <br /><br />
                    {% else %}
                        {% do naviTabOuterBlock.blockControls() %}
                    {% endif %}

                    FANCY CONTENT; YOOHOOO; YEAH YEA YEAH MAN!!!!
                </div>
                {% do naviTabOuterBlock.blockEnd() %}
                {% do naviTabOuterBlock.blockDestruct() %}
                {% set counter = counter + 1 %}
            {% endfor %}
        </div>
    </div>
</div>
{% do naviTabOuterBlock.end() %}