{% if newsBoxesStories is defined and not newsBoxesStories is empty %}
{{ render(controller('App\\Controller\\DefaultController::slider',
    {'boxNews':newsBoxesStories}
)) }}
{% endif %}
{% if newsBoxes is defined and not newsBoxes is empty %}
    {% for key,newsBox in newsBoxes %}
        <div class="newsBoxWrapper">
            {{ newsBox|raw }}
        </div>
        {{ ads.printAd('desktop', 'boxes_ad', key)|raw }}
    {% endfor %}
{% endif %}
{% set evenIndex = 1 %}
{% set adIndex = 0 %}
{% if subCategories is defined and subCategories and not ajax %}
    <div class="competition-container mainPageContainer" data-sport="{{ selectedSport|default('Soccer') }}">
        <div class="competitionTabs">
            <ul>
                {% for subCategoryName,subCategoryUrl in subCategories %}
                    <li>
                        <a href="{{ subCategoryUrl }}">{{  subCategoryName}}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endif %}
{% if not newsArray is empty %}
    {% for key,news in newsArray %}
        <div class="big-pictures-list" data-url="{{ news.url(base_url) }}" data-timestamp="{{ news.timestamp }}">
            <a class="picture-view" href="{{ news.url(base_url) }}" title="{{ news.title }}" onclick="">
                {% if news.video %}
                    <span class="play-button"></span>
                {% endif %}
                <img src="{% if imageSize is defined %}{{ news.getListPictureUrl(imageSize) }}{% else %}{{ news.picture|files }}{% endif %}" alt="{{ news.picture }}" title="{{ news.title }}">
            </a>

            <a class="picture-title" href="{{ news.url(base_url) }}" title="{{ news.title }}" onclick="">
                <span class="item-title">{{ news.title|raw }}</span>
                {% if is_protected is defined and is_protected %}
                    <span class="hits">hits:{{ news.hits }}</span>
                {% endif %}
            </a>
        </div>

        {% if key == 5 and not ajax and allNewsBoxesStories is defined and not allNewsBoxesStories is empty %}
            <div class="storiesWrapper" style="clear: both;">
            {{ render(controller('App\\Controller\\DefaultController::slider',
                {'boxNews':allNewsBoxesStories}
            )) }}
            </div>
        {% endif %}

        {% if ads is defined and ads and ((evenIndex == 1 and (key + 1)%5 == 0 and (key + 1) / 5 > adIndex) or (evenIndex == 0 and key % 5 == 0 and key / 5 > adIndex)) and key > 0 %}
            {% if evenIndex == 1 %}
                {% set adIndex = (key + 1) / 5 %}
                {% set evenIndex = 0 %}
            {% else %}
                {% set adIndex = key / 5 %}
                {% set evenIndex = 1 %}
            {% endif %}
            <div class="ad-container big-pictures-list" data-label="إعلان">
                <div class="desktop-ad">
                {{ ads is not null ? ads.printAd('desktop', 'newsfeed', adIndex)|raw : '' }}
                </div>
                <div class="mobile-ad">
                {{ ads is not null ? ads.printAd('mobile', 'newsfeed', adIndex)|raw : '' }}
                </div>
            </div>
        {% endif %}
    {% endfor %}
    {% if readMore is defined and readMore %}
        <div class="big-pictures-list readMore" data-url="{{ news.url(base_url) }}" data-timestamp="{{ news.timestamp }}">
            <a href="{{ readMore }}">
                <span>{{ '_FOR_MORE_CLICK_HERE_'|trans }}</span>
            </a>
        </div>
    {% endif %}
{% elseif (not ajax is defined) or (ajax is defined and not ajax) %}
    <div class="no-result">
        {{ '_NO_NEWS_RESULTS_'|trans }}
    </div>
{% endif %}