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

{% block body %}
    {#{{ shareEmail|raw }}#}
    <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 id="title-header">
            <h1 id="title-program">{{ playerVideo.title }}</h1>
            <span>{{ playerVideo.publishDate|localizeddate('long', 'none', 'ar_LB', 'Asia/Beirut', 'E d MMMM yyyy') }}</span>
        </div>
        <div id="right-container">
            <div id="program-video">
                {% 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 }}?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 %}
            </div>
            <div class="description-container">
                {{ ads.printAd('desktop', 'under_player')|raw }}
                <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>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% for i,otherProgram in programs %}
        <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">
                    {% for video in otherProgram.videos %}
                        <li id="video{{ video.id }}">
                            <a class="videoPicturelatest" href="/programs/{{ otherProgram.id }}/{{ video.id }}">
                                {% if video.id == playerVideo.id %}
                                    <span class="playVideo playing">Playing Now</span>
                                {% else %}
                                    <span class="playVideo play">PLAY</span>
                                {% endif %}
                                {% if video.youtube %}
                                    <img src="https://i.ytimg.com/vi/{{ video.videoId }}/mqdefault.jpg">
                                {% elseif video.dailymotion %}
                                    <img src="https://www.dailymotion.com/thumbnail/video/{{ video.videoId }}">
                                {% endif %}
                                <span class="video_tile" >{{ video.title }}</span>
                                <span class="video_date" >{{ video.publishDate|localizeddate('long', 'none', 'ar_LB', 'Asia/Beirut', 'E d MMMM yyyy') }}</span>
                            </a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
            <span id="prevlatest" class="latest-arrow"></span>
        </div>
        {{ ads.printAd('desktop', 'program', i, 0, limit, initial_limit)|raw }}
    {% endfor %}
{% endblock %}