{% extends 'base.html.twig' %}
    {% block body %}
        <script>
    function removeSlidingAd(){
        if(document.getElementById('sliding-ad')){
        var element = document.getElementById('sliding-ad');
        element.parentNode.removeChild(element);
        }
    }

    googletag.cmd.push(function() {
        googletag
            .defineSlot('/19991396/elnashra2-inread', [2, 2], 'div-gpt-ad-news-inread')
            .setTargeting('articleID', '{{ news.id }}')
            .setTargeting('page', 'news')
            .setTargeting('section', 'middle_of_article')
            .setTargeting('shortNews', {{ news.isShortNews() }})
            .addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });

</script>
<script async src="{{ base_url }}/newsHits?id={{ news.id }}&v={{ random(999) }}"></script>
        <div id="generalcontainer">
        <div class="boxescontainer">
        <div class="newscontainer" data-newsId="{{ news.id }}" data-timestamp="{{ news.timestamp }}" data-filesUrl="{{ files_url }}" data-video="{{ news.video }}" data-category="{{ news.category }}" data-url="{% if newsUrl is defined %}{{ newsUrl }}{% endif %}">
            <div class="news_body" itemscope itemtype="http://schema.org/NewsArticle">
        
                {{ include('news/newsItemProp.html.twig') }}
        
                {{ include('news/newsTitle.html.twig') }}
        
                <div class="body_container">
                    <div class="noticeMessage" style="color: #a9a6a6;font-size: 15px;">
                        {{ news.getNoticeMessage() }}
                    </div>
                    {{ include('news/newsPicture.html.twig') }}
                    {% if news.notificationText %}
                        <div class="notifications">
                            <ul>
                                {% for notification in news.getNotificationText() %}
                                <li>
                                    {{ notification }}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    {% if ads is defined %}
                        <div class="news-image-ad-static mobile">
                            {{ ads.printAd('mobile', 'under_image_static')|raw }}
                        </div>
                    {% endif %}
                    {{ include('news/newsBody.html.twig') }}
                    {{ include('news/newsAlbum.html.twig') }}
                </div>
                {{ include('news/newsPdf.html.twig') }}
                {{ include('news/newsTags.html.twig') }}
            </div>
        </div>
        <!---->
        <div id="recommendationApp">
            
        </div>
        </div>
        </div>
<script>
    window.addEventListener('load',function(){
        setTimeout(function(){
            var recommendation=document.getElementById('recommendationApp');
            var url = window.location.href;
            var delimiter = (url.indexOf("?") !== -1)?"&":"?";
            url += delimiter+"ajax=1"+"&"+"page=2";
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    var data = xhr.responseText;
                    recommendation.insertAdjacentHTML('beforeend', data)
                    var currentScriptsIndex=0;
                    //load ads after last ad before load more
                    for (
                        var i = currentScriptsIndex;
                        i < recommendation.querySelectorAll('script').length;
                        i++
                    ) {
                        Function(recommendation.querySelectorAll('script')[i].innerHTML)()
                        }
                                }
                            };
            xhr.send();
        },2000)  
    });


</script>
{% endblock %}