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

{% block topcontainer %}
    <script async src="{{ base_url }}/newsHits?id={{ news.id }}&v={{ random(999) }}"></script>
<script>
    {% if not app.request.get('fb') is defined or not app.request.get('fb') %}
    googletag.cmd.push(function() {
        googletag
            .defineSlot('/19991396/elsport2-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();
    });
    {% endif %}
</script>
<div class="social-bar-desktop">
    {{ include('news/socialBar.html.twig') }}
</div>
{{ include('news/shareEmail.html.twig') }}
<div class="newscontainer" data-newsId="{{ news.id }}" data-timestamp="{{ news.timestamp }}" data-filesUrl="{{ files_url }}">

    <div class="news_body" itemscope itemtype="http://schema.org/NewsArticle">
        <span itemprop="datePublished" content="{{ news.formattedDate(true) }}" hidden></span>
        <span itemprop="dateModified" content="{{ news.formattedDate }}" hidden></span>
        <link itemprop="mainEntityOfPage" href="{{ news.url(base_url) }}" />
        <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>{{ app.request.getSchemeAndHttpHost() ~ 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 authorInfo is defined and authorInfo.picture %}
                <div id="image-author" class="desktop">
                    <a href="{{ base_url }}/author/{{ news.authorId }}/{{ news.author|slugifyText }}">
                        <img src="{{ news.getAuthorPicture(authorInfo.picture) }}" alt="{{ authorInfo.displayName }}">
                    </a>
                </div>
            {% endif %}
            <div class="newsMainInfo">
                <div id="newsTitle" class="{% if authorInfo is defined and authorInfo.picture %} title_with_author {% endif %}">
                    <h1 itemprop="headline" class="topTitle">
                        {{ news.title|raw }}
                        {% if is_protected is defined and is_protected %}
                            <span class="hits">hits:{{ news.hits }}</span>
                        {% endif %}
                    </h1>
                </div>
                <div class="news-info">
                    {% if authorInfo is defined and authorInfo.picture %}
                        <div id="image-author" class="mobile">
                            <a href="{{ base_url }}/author/{{ news.authorId }}/{{ news.author|slugifyText }}">
                                <img src="{{ news.getAuthorPicture(authorInfo.picture) }}" alt="{{ authorInfo.displayName }}">
                            </a>
                        </div>
                    {% endif %}
                    {% 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">Elsport</span></span>
                    {% endif %}
                    <strong class="desktop-date">{{ news.getStringDate() }} </strong>
                    <strong class="desktop-time">{{ news.getCreateDate()|date('H:i') }}</strong>

                    {% if news.isRenewed %}
                        <strong class="desktop-date">{{ '_RENEWED_'|trans }} {{ news.timestamp }} &nbsp;&nbsp;{{ news.timestamp|date('H:i') }}</strong>
                    {% endif %}

                    {% if news.source %}
                    <span class="source">المصدر: {{ news.source }}</span>
                    {% endif %}

                </div>
            </div>
        </div>

        <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 }}">
                        <span class="pswp-item d-inline-block" data-href="{{ news.picture|files }}">
                            <img class="newsMainImage" alt="{{ news.title }}" src="{{ news.getNewsDetailsPicture() }}">
                        </span>
                    {% if mainPictureCredit %}
                    <span class="image-credit">{{ mainPictureCredit }}</span>
                    {% endif %}
                </div>
                {{ ads.printAd('desktop', 'under_image')|raw }}
                <div class="stickyAd">
                    {{ ads.printAd('mobile', 'under_image')|raw }}
                </div>
            {% endif %}

            <div class="articleBody">
                {% if news.body %}
                    {{ bodyChunks|raw }}
                {% 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>
            <div class="social-bar-mobile"></div>
            <!-- elnashra_middle_of_article_mobile -->
            {{ ads.printAd('mobile', 'middle_of_article')|raw }}

            {% if album is defined %}
                <div class="newsAlbum" style="max-width: 730px;">
                    <ul class="albumPicture">
                        {% for albumPicture in album %}
                            <li>
                                <a data-href="https://files.elsport.com/pictures/{{ albumPicture.path }}" class="pswp-item cursor-pointer">
                                    <img src="{{ albumPicture.path|files('250_165') }}">
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        </div>
        {% if pdfFiles is defined %}
        <div class="pdf-container">
            {% 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 }}">{{ 'Download PDF'|trans }}</a>.</p>
                </object>
            {% endfor %}
        </div>
        {% endif %}

        {% if news.author %}
        <div class="bottom-author">
            {% if authorInfo is defined and authorInfo.picture %}
            <div id="image-author">
                <a href="{{ base_url }}/author/{{ news.authorId }}/{{ news.author|slugifyText }}">
                    <img src="{{ news.getAuthorPicture(authorInfo.picture) }}" alt="{{ authorInfo.displayName }}">
                </a>
            </div>
            {% endif %}
            <a class="authorName" href="{{ base_url ~ '/author/' ~ news.authorId ~ '/' ~ news.author|slugifyText }}">
                <span>{{ news.author|raw }}</span>
                {% if authorInfo is defined and authorInfo.email %}
                    <span class="email">{{ authorInfo.email }}</span>
                {% endif %}
            </a>

        </div>
        {% endif %}

        <div class="body_tags">
            <a class="body_tags_hashtag">#</a>
            {% for tag in tags %}
                <a href="{{ tag.url(base_url) }}" onclick="gtag('event', 'Tags Links', {'event_category': 'News Page'});">{{ tag.tag }}</a>
            {% endfor %}
        </div>

        <!-- Mobile container for ads -->
        <div id="nativeMobile"></div>
        <!-- Desktop container for ads -->
        <div id="nativeDesktop"></div>
    </div>
    <div class="unreadNewsBox newsPageUnread mobile hide">
        {#{{ unreadNewsMobile|raw }}#}
    </div>
    {#<div class="jubnaWrapper" style="margin: 8px 0;width:100%;max-width:730px">#}
        {#<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>#}
        {#<ins class="adsbygoogle"#}
             {#style="display:block"#}
             {#data-ad-format="autorelaxed"#}
             {#data-ad-client="ca-pub-3395365990031287"#}
             {#data-ad-slot="3190042455"></ins>#}
        {#<script>#}
            {#(adsbygoogle = window.adsbygoogle || []).push({});#}
        {#</script>#}
        {#<div id="jubna4788"></div>#}
    {#</div>#}

</div>
<div class="unreadNotificationDesktop">
    {{ unreadNotificationDesktop|raw }}
</div>
{% endblock %}