{# @var cmsPage \Shopware\Core\Content\Cms\CmsPageEntity #}

{# @var landingPage \Shopware\Core\Content\LandingPage\LandingPageEntity #}
{% block page_content_sections_inner %}
    <div class="cms-sections">
        {% for section in cmsPage.sections %}
            {% set sectionBgColor = section.backgroundColor %}
            {% set sectionBgImg = section.backgroundMedia|sw_encode_media_url %}
            {% set sectionBgImgMode = section.backgroundMediaMode %}

            {% set sectionClasses = [section.cssClass, 'pos-' ~ section.position, 'cms-section-' ~ section.type] %}

            {% if sectionBgImg %}
                {% set sectionClasses = ['bg-image']|merge(sectionClasses) %}
            {% endif %}

            {% if sectionBgColor %}
                {% set sectionClasses = ['bg-color']|merge(sectionClasses) %}
            {% endif %}

            {% if section.visibility is null %}
                {% set visibility = {
                    mobile: true,
                    tablet: true,
                    desktop: true
                } %}
            {% else %}
                {% set visibility = section.visibility %}
            {% endif %}

            {% if not visibility.mobile %}
                {% set sectionClasses = ['hidden-mobile']|merge(sectionClasses) %}
            {% endif %}
            {% if not visibility.tablet %}
                {% set sectionClasses = ['hidden-tablet']|merge(sectionClasses) %}
            {% endif %}
            {% if not visibility.desktop %}
                {% set sectionClasses = ['hidden-desktop']|merge(sectionClasses) %}
            {% endif %}

            {% block page_content_section %}
                <div class="cms-section {{ sectionClasses|join(' ') }}"
                     style="{% if sectionBgColor %}background-color: {{ sectionBgColor }};{% endif %}{% if sectionBgImg %}background-image: url({{ sectionBgImg }});background-size: {{ section.backgroundMediaMode }};{% endif %}">

                    {% sw_include '@Storefront/storefront/section/cms-section-' ~ section.type ~ '.html.twig' %}
                </div>
            {% endblock %}
        {% endfor %}
    </div>
{% endblock %}