{% if not isXmlHttpRequest %}
    <script>
        function playInRead(vidSrc, clickTg, impressionTg, videoPosterImg) {
            var videoSources = '';
            if (typeof vidSrc === 'string') {
                vidSrc = [vidSrc];
            }
            for (var i = 0; i < vidSrc.length; i++) {
                videoSources += '<source src="' + vidSrc[i] + '" />';
            }

            var video = document.getElementsByClassName("articleBody")[0].querySelector('.inReadMobileWrapper');
            video.querySelector("video").setAttribute("poster",videoPosterImg)
            video.querySelector("video").innerHTML = videoSources;
            video.querySelector("img").setAttribute("src",impressionTg);
            if (clickTg !== '' && clickTg !== '#') {
                video.querySelector("a").setAttribute("href", clickTg);
            }else{
                video.querySelector(".click-for-more").style.display = 'none';
            }
            video.style.display = 'block';
        }
        googletag.cmd.push(function() {
            googletag
                .defineSlot('/19991396/eliktisad2-inread', [2, 2], 'div-gpt-ad-news-inread')
                .setTargeting('articleID', '{{ news.id }}')
                .setTargeting('page', 'news')
                .setTargeting('section', 'middle_of_article')
                .addService(googletag.pubads());
            googletag.pubads().enableSingleRequest();
            googletag.enableServices();
        });
    </script>
{% endif %}
<script async src="{{ base_url }}/newsHits?id={{ news.id }}&v={{ random(999) }}"></script>
{{ include('news/shareEmail.html.twig') }}
<div class="newscontainer" data-newsId="{{ news.id }}" data-picture="{{ news.picture }}" data-categoryId="{{ news.category }}" data-timestamp="{{ news.timestamp }}" data-filesUrl="{{ files_url }}">
    <div class="news_body" itemscope itemtype="http://schema.org/NewsArticle">
        <span itemprop="datePublished" content="{{ itemProp.datePublished }}" hidden></span>
        <span itemprop="dateModified" content="{{ itemProp.dateModified }}" hidden></span>
        <link itemprop="mainEntityOfPage" href="{{ newsUrl }}" />
        <div itemprop="publisher" style="display:none" itemtype="http://schema.org/Organization" itemscope="">
            <span itemprop="name" hidden>Elnashra</span>
            <div itemprop="logo" itemscope itemtype="http://schema.org/ImageObject">
                <span itemprop="url" hidden>{{ asset('build/images/logo.png') }}</span>
                <span itemprop="width" content="220"></span>
                <span itemprop="height" content="38"></span>
            </div>
        </div>
        <!--<div class="unreadNewsNotification">
            {unreadNotification:h}
        </div>-->
        <div class="body-header">
            {% if news.author is defined and not news.author is empty %}
                <div id="image-author">
                    {{ news.author|raw }}
                </div>
            {% endif %}
            <div id="newsTitle">
                <h1 itemprop="headline" class="topTitle">
                    <a {% if app.request.get('webview') is not defined or (app.request.get('webview') != 1 and app.request.get('webview') != 2) %}href="{{ news.getUrl() }}"{% endif %} title="{{ news.title }}">
                    {{ news.title|raw }}
                    </a>
                    {% if is_protected is defined and is_protected %}
                        <span class="hits">hits:{{ news.hits }}</span>
                    {% endif %}
                </h1>
                <div class="news-info">
                    <strong class="desktop-date">{{ newsDate }} &nbsp;&nbsp;{{ news.timestamp|date('H:i') }}</strong>
                    {% if news.author %}
                        <a class="authorName" href="{{ base_url }}/author/{{ news.authorId }}/{{ news.author|slugifyText }}"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">{{ news.author|raw }}</span></span></a>&nbsp;-&nbsp;
                    {% else %}
                        <span itemprop="author" itemscope itemtype="http://schema.org/Organization" hidden><span itemprop="name">{{ '_ELNASHRA_TILTE_'|trans }}</span></span>
                    {% endif %}
                    <a class="categoryName" title=" {{ news.newsPageCategory }}" {% if app.request.get('webview') is not defined or (app.request.get('webview') != 1 and app.request.get('webview') != 2) %}href="{{ news.categoryUrl(base_url) }}"{% endif %}>
                        {{ news.newsPageCategory }}
                    </a>
                </div>
            </div>
        </div>
        {% if app.request.get('webview') is not defined or (app.request.get('webview') != 1 and app.request.get('webview') != 2) %}
        <div class="social-bar-desktop">
            {{ include('news/socialBar.html.twig') }}
        </div>
        <div class="social-bar-mobile barfixed"></div>
        {% endif %}
        <div class="body_container">
            {% if news.picture %}
                <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject" >
                    <img itemprop="image" itemscope itemtype="http://schema.org/ImageObject" src="{{ news.mainNewsPicture }}" hidden>
                    <span itemprop="url" hidden>{{ news.picture|files('120_96') }}</span>
                    <span itemprop="width" content="120"></span>
                    <span itemprop="height" content="96"></span>
                </div>
                <div class="showpictures lightBoxPicture" href="{{ news.picture|files }}">
                    <img class="newsMainImage" alt="{{ news.title }}" src="{{ news.mainNewsPicture }}">
                </div>
                {% if not hasMoreThanOneParagraph %}
                    {{ ads.printAd('mobile', 'under_image')|raw }}
                {% endif %}
            {% endif %}


            <div class="articleBody">
                {% if news.body %}
                    {% for i,bodyChunk in bodyChunks %}
                        <div class="article-content">
                            {{ bodyChunk|raw }}
                            {% if i == 0 %}
                                <div id='div-gpt-ad-news-inread' style='height:2px; width:2px;'>
                                    <script>googletag.cmd.push(function() {
                                            googletag.display('div-gpt-ad-news-inread');
                                        })</script>
                                </div>
                         {#       <div class="inReadMobileWrapper">
                                    <div id="InReadVideoAdWrapper">
                                        <a style="display: block;">
                                            <video name="caraInReadMobile" width="100%" muted autoplay poster="" playsinline>
                                            </video>
                                        </a>
                                        <div class="overlay"></div>
                                        <span class="video-control inread-close-button icon-player-close"></span>
                                        <span class="video-control inread-mute-toggle icon-volume-mute"></span>
                                        <span class="video-control inread-pause-button icon-player-pause"></span>
                                        <a class="click-for-more">إضغط للمزيد</a>
                                        <img class="video-logo">
                                    </div>
                                </div>#}
                            {% endif %}
                        </div>
                        {% if not i and hasMoreThanOneParagraph %}
                            {{ ads.printAd('mobile', 'under_image')|raw }}
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <div class="body-download">
                        <div class="downloading-body">{{ 'Downloading Body'|trans }}...</div>
                        <img class="loading-bar" src="{{ asset('loading-bar.gif') }}">
                    </div>
                {% endif %}
            </div>
            <!-- elnashra_middle_of_article_mobile -->
            {{ ads.printAd('mobile', 'middle_of_article')|raw }}
        </div>
        <div class="pdf-container">
            {% if pdfFiles is defined %}
                {% for k,pdf in pdfFiles %}
                    <object data="{{ documents_url }}{{ pdf }}" type="application/pdf" width="100%" height="400px">
                        <p>- {{ 'Show PDF'|trans }} {{ k|arabicOrdinalNumber }}&nbsp;<a href="{{ documents_url }}{{ pdf }}" title="{{ 'Download PDF'|trans }}">{{ 'Download PDF'|trans }}</a>.</p>
                    </object>
                {% endfor %}
            {% endif %}
        </div>
        <div class="body_tags">
            {% for tag in tags %}
                <a href="{{ tag.url(base_url) }}" title="{{ tag.tag }}" onclick="ga('send', 'event','News Page','Tags Links');">{{ tag.tag }}</a>
            {% endfor %}
        </div>
        <div>
            <ul class="listnews relateNewsMobile">
            {% for relatedArticle in relatedNews %}
                <li class="side_picture item" data-url="{{ relatedArticle.getUrl(base_url) }}">
                    <a class="imageWrapper" href="{{ relatedArticle.getUrl(base_url) }}" title="{{ relatedArticle.title }}" onclick="ga('send', 'event', 'News Page', 'Related News');">
                        <img class="item-picture" src="{{ relatedArticle.getPicture()|files('61_61') }}" alt="{{ relatedArticle.title }}" title="{{ relatedArticle.formatImageTitle() }}" >
                    </a>
                    <a class="pictureBoxTitle" href="{{ relatedArticle.getUrl(base_url) }}" title="{{ relatedArticle.title }}" onclick="ga('send', 'event', 'News Page', 'Related News');">
                        <span class="title item-title">{{ relatedArticle.formatTitleForRelatedNews()|raw }}</span>
                    </a>
                </li>
            {% endfor %}
            </ul>
        </div>
    </div>
</div>

<input type="hidden" id="csIds" value="{{ csIds }}">

<script id="article-template" type="text/x-handlebars-template">
        <div class="page-container" data-url="{{ app.request.getSchemeAndHttpHost() ~ base_url }}{% verbatim %}/news/show/{{article.id}}/{{article.slug}}">
            <div class="ad-bar">
                <div id="div-gpt-ad-{{article.id}}" class="desktop" style="width: 728px; height: 90px; margin: auto;"></div>
                <div id="div-gpt-ad-{{article.id}}-m" class="mobile" style="width: 300px; height: 250px; margin: auto;"></div>
            </div>
            <div class="boxescontainer">
                <div class="rightbottomcontainer">
                    <div id="centercategoriescontainer" class="center">
                        <div class="newscontainer" data-newsid="{{article.id}}" data-title="{{article.title}}" data-picture="{{article.pictureName}}" data-categoryId="{{article.category}}" >
                            <div class="news_body">
                                <div class="body-header">
                                     <div id="newsTitle">
                                        <h1><a href="/news/show/{{article.id}}/{{article.slug}}" title="{{{article.title}}}">{{{article.title}}}</a></h1>
                                        <div class="news-info">
                                            <strong class="desktop-date">{{article.date}} &nbsp;&nbsp;{{article.time}}</strong>
                                            <a class="categoryName" title="{{article.category}}" href="{{article.categoryUrl}}">
                                                {{article.category}}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                {% endverbatim %}
                                {% include 'news/socialBar.html.twig' with {'noJs': true} %}
                                {% verbatim %}
                                <div class="body_container">
                                    <div class="showpictures lightBoxPicture" href="{{article.picture.original}}">
                                        <img class="newsMainImage" alt="{{{article.title}}}" src="{{article.picture.w728}}">
                                    </div>
                                    <div class="articleBody">
                                        {{{article.body}}}
                                    </div>
                                </div>
                                <div class="body_tags">
                                    {{#each article.tags}}
                                <a href="/news/tag/{{slug}}" title="{{name}}" onclick="ga('send', 'event', 'News Page', 'Tags Links');">{{name}}</a>
                                    {{/each}}
                                </div>
                                <div>
                                    <ul class="listnews relateNewsMobile">
                                    {{#each relateNewsMobile}}
                                        <li class="side_picture item" data-url="/news/show/{{id}}/{{slug}}">
                                            <a class="imageWrapper" href="/news/show/{{id}}/{{slug}}" title="{{{title}}}">
                                                <img class="item-picture" src="{{picture}}" alt="{{{title}}}" title="{{{title}}}" onclick="ga('send', 'event', 'News Page', 'Related News');">
                                            </a>
                                            <a class="pictureBoxTitle" href="/news/show/{{id}}/{{slug}}" title="{{{title}}}" onclick="ga('send', 'event', 'News Page', 'Related News');">
                                                <span class="title item-title">{{{title}}}</span>
                                            </a>
                                        </li>
                                    {{/each}}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-left-outer">
                <div class="col-left-inner">
                    <div class="unique-leftcolumn newsLeftColumn">
                        <div class="module related-news">
                            <div class="portlet box">
                                <h4 class="portlet-header">أخبار مرتبطة</h4>
                                <div class="portlet-content">
                                    <ul class="listnews small_picture relatedNews">
                                        {{#each relatedArticles}}
                                        <li class="side_picture item">
                                            <a class="imageWrapper" href="/news/show/{{id}}/{{slug}}" title="{{{title}}}" onclick="ga('send', 'event', 'News Page', 'Related News');">
                                                <img class="item-picture" src="{{picture}}" title="{{{title}}}">
                                            </a>
                                            <a class="pictureBoxTitle" href="/news/show/{{id}}/{{slug}}" title="{{{title}}}" onclick="ga('send', 'event', 'News Page', 'Related News');">
                                                <span class="title item-title">{{{title}}}</span>
                                            </a>
                                        </li>
                                        {{/each}}
                                    </ul>
                                    <span class="showMoreRelatedNews toggle">
                                        {% endverbatim %}
                                        <a class="showNews" href="{{ app.request.getSchemeAndHttpHost() ~ base_url }}" onclick="ga('send', 'event', 'News Page', 'Related News', 'More button');">{{ 'Show More'|trans }}</a>
                                        <a class="hideNews" href="#">{{ 'Show Less'|trans }}</a>
                                        {% verbatim %}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="ad-container" data-label="إعلان" style="margin-bottom: 0.6rem;">
                            <div id="div-gpt-ad-left-top-{{article.id}}" style="width: 300px; height: 250px; margin: auto;"></div>
                        </div>
                    </div>
                </div>
            </div>
            {% endverbatim %}
            <div class="loading-bar">
                <img src="{{ asset('build/images/loading.gif') }}" alt="loading">
            </div>
            {% verbatim %}
        </div>
        {% endverbatim %}
</script>