{% extends 'eshop/base.html.twig' %}

{% block body %}
    {% set page = layout.page %}
    {% set header = layout.header %}
    {% set footer = layout.footer %}
    {% set content = layout.content %}
    {% set contentLeft = layout.contentLeft %}
    {% set contentRight = layout.contentRight %}
    {% set contentMain = layout.contentMain %}

    {% if header %}
        <header>
            {% if header.containerEnabled %}
            <div class="container">
                {% endif %}
                <div class="{{ header|sectionWidth }}">
                    {{ _self.renderSectionContent(templateContent, 'header') }}
                </div>
                {% if header.containerEnabled %}
            </div>
            {% endif %}
        </header>
    {% endif %}

    {% if content %}
        <section class="content">
            {% if content.containerEnabled %}
            <div class="container">
                {% endif %}

                <div class="row">
                    <div class="{{ content|sectionWidth }}">
                        <div class="row">
                            {% if contentLeft %}
                                <div class="{{ contentLeft|sectionWidth }}">
                                    <aside>
                                        <div class="section section-content-left">
                                            {% if templateContent['content_left'] is defined %}
                                                {% for component in templateContent['content_left'] %}
                                                    {% if 'system_left_' in component.content %}
                                                        {% block system_left %}{% endblock %}
                                                    {% else %}
                                                        {{ component.content|raw }}
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                    </aside>
                                </div>
                            {% endif %}
                            {% if contentMain %}
                                <div class="{{ contentMain|sectionWidth }}">
                                    <main>
                                        <div class="section section-content-main">
                                            {% if templateContent['content_main'] is defined %}
                                                {% for component in templateContent['content_main'] %}
                                                    {% if 'system_main_' in component.content %}
                                                        {% block system_main %}{% endblock %}
                                                    {% else %}
                                                        {{ component.content|raw }}
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                    </main>
                                </div>
                            {% endif %}
                            {% if contentRight %}
                                <div class="{{ contentRight|sectionWidth }}">
                                    <aside>
                                        <div class="section section-content-right">
                                            {% if templateContent['content_right'] is defined %}
                                                {% for component in templateContent['content_right'] %}
                                                    {% if 'system_right_' in component.content %}
                                                        {% block system_right %}{% endblock %}
                                                    {% else %}
                                                        {{ component.content|raw }}
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                    </aside>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                {% if content.containerEnabled %}
            </div>
            {% endif %}
        </section>
    {% endif %}

    {% if footer %}
        <footer>
            {% if footer.containerEnabled %}
            <div class="container">
                {% endif %}
                <div class="{{ footer|sectionWidth }}">
                    {{ _self.renderSectionContent(templateContent, 'footer') }}
                </div>
                {% if footer.containerEnabled %}
            </div>
            {% endif %}
        </footer>
    {% endif %}

{% endblock %}

{% macro renderSectionContent(section, name) %}
    <div class="section section-{{ name }}">
        {% if templateContent[name] is defined %}
            {% for component in templateContent[name] %}
                {{ component.content|raw }}
            {% endfor %}
        {% endif %}
    </div>
{% endmacro %}