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

{% block body %}
    <script async src="{{ base_url }}/newsHits?id={{ playerVideo.getNewsId() }}&v={{ random(999) }}"></script>
    {#{{ shareEmail|raw }}#}
    <div id="minma3eHeader" class="program-{{ program.id }}">
        <img id="cvr-{{ program.id }}-mb" src="{{ asset('build/images/programs/768_120/' ~ program.id ~ '.png') }}">
    </div>
    <div id="programs-container" data-video-id="{{ playerVideo.id }}" data-videoId="{{ playerVideo.videoId }}" data-program_id="{{ program.id }}" data-sequential="{{ playerVideo.videoSequential }}" data-timestamp-news="{{ playerVideo.getTimestamp() }}">
        <div class="social-bar-desktop">
            {#{{ socialBar }}#}
        </div>
        <div class="social-bar-mobile barfixed" style="right: 0;"></div>
        <div class="logo-program" id="logoId-{{ program.id }}">
            <img id="logo-5" src="{{ asset('build/images/logoMoujaz.png') }}">
            <img id="logo-6" src="{{ asset('build/images/logoPodium.png') }}">
            <img id="logo-7" src="{{ asset('build/images/logoTakarir.png') }}">
            <img id="logo-9" src="{{ asset('build/images/tafasil.jpg') }}">
            <img id="logo-10" src="{{ asset('build/images/bikafe.png') }}">
            <img id="logo-11" src="{{ asset('build/images/talabnaElnashra.png') }}">
            <img id="logo-12" src="{{ asset('build/images/sinjin.png') }}">
            <img id="logo-18" src="{{ asset('build/images/bi2alblebnen.png') }}">
            <img id="logo-19" src="{{ asset('build/images/whatsthefake.png') }}">
            <img id="logo-20" src="{{ asset('build/images/khoutabat.png') }}">
        </div>
        <div id="title-header">
            <h1 id="title-program">{{ playerVideo.title }}</h1>
            <span>{{ playerVideo.getStringDate() }}</span>
        </div>
        <div class="content-wrapper">
            <div id="right-container">
                <div id="program-video">
                    {% if playerVideo.videoId == "nX7lTYvoGrE" %}
                        <script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script> <div id="Brid_48855022" class="brid" style="width:16;height:9;" > </div> <script type="text/javascript"> $bp("Brid_48855022", {"id":"16150","width":"16","height":"9","video":"370114"}); </script>
                    {% else %}
                        {% if playerVideo.youtube %}
                            <iframe id="{{ playerVideo.videoId }}" allowfullscreen allow="autoplay" class="youtube-player" frameborder="0" height="100%" src="https://www.youtube.com/embed/{{ playerVideo.videoId }}?rel=0&autoplay=1&enablejsapi=1" title="YouTube video player" type="text/html" width="100%"></iframe>
                        {% elseif playerVideo.dailymotion %}
                            <iframe id="{{ playerVideo.videoId }}" allowfullscreen allow="autoplay" class="youtube-player" frameborder="0" height="100%" src="https://www.dailymotion.com/embed/video/{{ playerVideo.videoId }}?autoplay=1&enablejsapi=1" title="YouTube video player" type="text/html" width="100%"></iframe>
                        {% endif %}
                    {% endif %}
                </div>
                <div class="description-container">
                    <div class="description">
                        {{ playerVideo.body }}
                    </div>
                    <a href="#" role="button" class="show-more">{{ 'More'|trans }}</a>
                </div>
            </div>
            <div id="left-container">
                <div id="left-container-wrapper">
                    <h4>{{ 'Most Viewed'|trans }}</h4>
                    <div id="most-viewed">
                        <div id="videos-container">
                            {{ ads.printAd('desktop', 'most_viewed')|raw }}
                            {% for mostViewedVideo in mostViewedVideos %}
                                <div class="video-most-viewed">
                                    <a href="/programs/{{ mostViewedVideo.programId }}/{{ mostViewedVideo.id }}">
                                        {% if mostViewedVideo.youtube %}
                                            <img src="https://i.ytimg.com/vi/{{ mostViewedVideo.videoId }}/mqdefault.jpg">
                                        {% elseif mostViewedVideo.dailymotion %}
                                            <img src="https://www.dailymotion.com/thumbnail/video/{{ mostViewedVideo.videoId }}">
                                        {% endif %}
                                        <h2>{{ mostViewedVideo.title }}</h2>
                                        <span>PLAY</span>
                                        <span class="play-icon"></span>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ ads.printAd('desktop', 'under_player')|raw }}
    <div class="sliders-wrapper">
    {% set j = 0 %}
    {% set i = 1 %}
    {% for otherProgram in programs %}
        <div class="slider-wrapper">
            <div class="related_videos_latest" data-page="1">
                <div class="latest-video-loader hide">
                    <img src="{{ asset('build/images/rolling.gif') }}">
                </div>
                <div class="programTitle">
                    <a href="/programs/{{ otherProgram.id }}/{{ otherProgram.name|slugifyText }}">
                        <h3>{{ otherProgram.name }}</h3>
                    </a>
                </div>
                <span id="nextlatest" class="latest-arrow"></span>
                <div class="scroll-videos">
                    <ul id="program{{ otherProgram.id }}" class="transitionVideos" data-programId="{{ otherProgram.id }}">
                        {% set videos = otherProgram.videos %}
                        {% include("programs/programVideos.html.twig") %}
                    </ul>
                </div>
                <span class="loadingIcon"><img src="/build/images/loading-red.gif"></span>
                <span id="prevlatest" class="latest-arrow"></span>
            </div>
        </div>
        {% if i % 2 == 0 %}
            {% set j = j+1 %}
            {{ ads.printAd('desktop', 'programs', j)|raw }}
        {% endif %}
        {% set i = i+1 %}
    {% endfor %}
    </div>
{% endblock %}