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


{% block body %}

    {#    <div class="subscribeOverlay">#}
    {#        <div class="subscribeForm" style="width: 558px;">#}
    {#            <a href="#" class="close-form">x</a>#}
    {#            {{ include('elements/newsletterForm.html.twig') }}#}
    {#            #}{#<div class="subscribeImage">#}
    {#            <img class="newsletterImage newsletterImage1" src="{{ asset('build/images') }}/newsletter/1.png">#}
    {#            <img class="newsletterImage newsletterImage2" src="{{ asset('build/images') }}/newsletter/2.png">#}
    {#            <img class="newsletterImage newsletterImage3" src="{{ asset('build/images') }}/newsletter/3.png">#}
    {#        </div>#}
    {#        </div>#}
    {#    </div>#}
<div class="elfann-tv">
 {#   {{ include('programs/shareVideoByEmail.html.twig') }}#}
    {% if app.request.get('webview') is not defined or (app.request.get('webview') != 1 and app.request.get('webview') != 2) %}
        <!-- Header -->
        <header class="navbar">
            <div class="header-logo logo-wrapper">
                <div class="logo-inner-wrapper">
                    <a class="logo-image-wrapper notarget" href="{{ url('homepage') }}" title="Elfann">
                        <img class="desktop-logo" src="{{ asset('build/images/programs/elfanntv-logo.png') }}" alt="Elfann news">
                        {#<img class="mobile-logo" src="{{ asset('build/images/logo-mobile.png') }}" alt="Elfann news">#}
                    </a>
                </div>
            </div>

            <div class="searchBar_And_BackToHomePage_container header-cont">
                {#<div class="searchBar_And_BackToHomePage_container">#}
                {#<div class="searchBar">#}
                {#<form class="searchBar-form" action="/news/search">#}
                {#<input type="text" placeholder="أبحث عن ..." name="keywords">#}
                {#<button type="submit">ابحث</button>#}
                {#</form>#}
                {#</div>#}
                <div class="menu-cont">
                    {% for program in programs %}
                        <a href="{{ program.getProgramUrl() }}">
                            <div class="menu {% if program.id == programId %} active {% endif %}
{% if loop.first %} noBorderRight {% endif %}">
                                {{ program.name }}
                            </div>
                        </a>
                    {% endfor %}
                </div>
                <div class="left-cont">
                    <div class="BackToHomePage-Mobile">
                        <a href="{{ url('homepage') }}"><img src="{{ asset('build/images/programs/right-arrow.png') }}" alt=""></a>
                    </div>
                    <div class="BackToHomePage">
                        <a href="{{ url('homepage') }}">الصفحة الرئيسية</a>
                    </div>
                </div>
            </div>
        </header>
    {% endif %}
    <div class="slider-programs-cont" {% if app.request.get('webview') is defined and (app.request.get('webview') == 1 or app.request.get('webview') == 2) %}style="margin-top:0"{% endif %}>
        <!-- All programs -->
        <section class="regular slider-programs">
            {% for program in programs %}
                <a href="{{ program.getProgramUrl() }}">
                    <div class="program-name">
                        {{ program.name }}
                    </div>
                </a>
            {% endfor %}
        </section>
    </div>
    <!-- Content -->
    <div class="containers">
        <div class="top-container">
            <div class="top-container-topSection">
                <!-- Most viewed videos of the selected program -->
                <div class="top-container-right">
                    <div class="top-container-right-title">
                        <h2>الأكثر مشاهدة</h2>
                    </div>
                    <div class="title-line-container">
                        <div class="title-line"></div>
                    </div>
                    {% for i,mostViewedVideo in mostViewedVideos %}
                        {% if i < 3 %}
                            <div class="news-container">
                                <a href="{{ mostViewedVideo.videoUrl() }}">
                                    <div class="top-container-right-news">
                                        {% 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 %}
                                    </div>
                                    <div class="top-container-right-newsTitle">
                                            <span>
                                                {{ mostViewedVideo.title }}
                                            </span>
                                    </div>
                                </a>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
                <!-- Latest video of the selected program -->
                <div class=" top-container-left">
                    <div class="top-container-left-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 }}?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 %}
                    </div>
                    <div class="top-container-left-videoDescription">
                        <div class="author">
                            <div class="author-photo">
                                {% if authorPicture %}
                                    <img src="{{ authorPicture }}" />
                                {% endif %}
                            </div>
                            <div class="author-name">
                                {% if authorName %}
                                    <div>{{ authorName }}</div>
                                {% endif %}
                                <div>{{ videoProgram.name }}</div>
                            </div>
                        </div>
                        <div class="video-description">
                            <div class="videoDescription-title-cont">
                                <a class="videoDescription-title">
                                    {{ playerVideo.title }}
                                </a>
                            </div>
                            <div class="author-name-mobile">
                                {% if authorName %}
                                    <span>{{ authorName }}​</span>
                                    <span style="color: red;padding: 0 5px"> | </span>
                                {% endif %}
                                <span>{{ videoProgram.name }}</span>
                            </div>
                            <div class="description-cont {% if playerVideo.body == '' %} displayNone {% endif %}">
                                <p>
                                    {{ playerVideo.body }}
                                </p>
                            </div>
                       {#     <div class="shareCont elfann-tv">
                                <div class="shareBtn-cont">
                                    <button>share</button>
                                </div>
                                <div class="socialMedia-cont">
                                    <div id="socialBar" class="socialButContainer">
                                        <div class="social_top">
                                            <div class="CoddictSocial socialMediaWrapper" data-videoId="{{ playerVideo.id }}" data-url="{{ videoTwitterUrl }}" data-twitterUrl="{{ videoUrlWithUtm }}" data-fburl="{{ videoUrl }}" data-title="" data-email="0" data-wa="0"> <!--data-title="{{ playerVideo.title }}"-->
                                                <ul>
                                                    <li class="email">
                                                        <a href="#" rel="nofollow" class="showEmailSharing button emailBnt" title="Share by Email">
                                                            <i class="icon-email"></i>
                                                            <span class="emailcounter sm-counter">{% if(email_share_count > 0) %} {{ email_share_count }} {% endif %}</span>
                                                        </a>
                                                    </li>
                                                    <li class="wa">
                                                        {% set waText = playerVideo.title ~ ' - ' ~ app.request.getSchemeAndHttpHost() ~ playerVideo.getVideoUrl(base_url)|replace({'&quot;': ''}) %}
                                                        <a href="https://web.whatsapp.com/" rel="nofollow" data-text="{{ waText }}" target="_blank" data-id="{{ playerVideo.id }}" class="button" data-href="{{ 'whatsapp://send?text=' ~ waText|url_encode }}">
                                                            <i class="icon-wa"></i>
                                                            <span class="wacounter sm-counter">{% if(wa_share_count > 0) %} {{ wa_share_count }} {% endif %}</span>
                                                        </a>
                                                    </li>
                                                    <li class="tw">
                                                        <a href="#" rel="nofollow" onclick="" class="button twitterBnt">
                                                            <i class="icon-tw"></i>
                                                            <span class="countertwitter sm-counter">{% if(tw_share_count > 0) %} {{ tw_share_count }} {% endif %}</span>
                                                        </a>
                                                    </li>
                                                    <li class="fb">
                                                        <a href="#" rel="nofollow" onclick="" class="button facebookBnt">
                                                            <i class="icon-fb"></i>
                                                            <span class="counterfacebook sm-counter">{% if(fb_share_count > 0) %} {{ fb_share_count }} {% endif %}</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>#}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear-both"></div>

        <div class="mid-container">
            <!-- All videos of the selected program -->
            {% if programId > 0 %}
                <div class="mid-container-title programCont" data-program-id="{{ programId }}">
                    <h2>{{ videoProgram.name }}</h2>
                </div>
                <div class="title-line-container">
                    <div class="title-line"></div>
                </div>
            {% endif %}
            <div>
            {% if programId > 0 %}
            <div class="row programsList mostViewedVideos">
                {% else %}
                <div class="row programsList">
                    {% endif %}
                    {{ include('programs/view.html.twig') }}
                </div>

                <div class="programs-loader" align="center">
                    <div class="loading">
                        <img src="{{ asset('build/images/rolling.gif') }}" width="24" height="24" alt="loading">
                    </div>
                    <p class="more">
                        <a href="#" rel="nofollow" class="load-more-news" title="المزيد" target="_blank">
                            <span>المزيد</span>
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footercontainer">
            <div class="iconcontainer">
                <img class="desktop-logo" src="{{ asset('build/images/programs/elfanntv-logo.png') }}" alt="Elfann news">
            </div>
            <div class="pagescontainer">
                <div class="programsMainCont">
                    <!-- All programs -->
                    {% for program in programs %}
                        <div class="pagescontent programsCont">
                            <ul>
                                <li>
                                    <a href="{{ program.getProgramUrl() }}">{{ program.name }}</a>
                                </li>
                            </ul>
                        </div>
                    {% endfor %}
                </div>
                <div class="pagescontent">
                    <ul>
                        <li>
                            <a href="/about">من نحن</a>
                        </li>
                        <li>
                            <a href="/contact">إتصل بنا</a> <br> 961 290700<br>بيروت ، لبنان
                        </li>
                    </ul>
                </div>
            </div>
            <div class="social-contactus">
                <ul>
                    <li>
                        <span class="social-title">التواصل الاجتماعي</span>
                    </li>
                    <li>
                        <div class="socialmedia">
                            <ul>
                                <li>
                                    <a class="bravobtn" href="https://www.youtube.com/channel/UCJqqMS9qijjHiHBHgFakdLg" target="_blank">
                                        <span class="footer-icon icon-icons-elfann-04"></span>
                                    </a>
                                </li>
                                <li>
                                    <a class="bravobtn" href="https://www.instagram.com/elfanncom/" target="_blank">
                                        <span class="footer-icon icon-icons-elfann-03"></span>
                                    </a>
                                </li>
                                <li>
                                    <a class="bravobtn" href="https://twitter.com/elfannCom" target="_blank">
                                        <span class="footer-icon icon-icons-elfann-02"></span>
                                    </a>
                                </li>
                                <li>
                                    <a class="bravobtn" href="https://www.facebook.com/ElfannCom" target="_blank">
                                        <span class="footer-icon icon-icons-elfann-01"></span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li style="display: none;">
                        <span class="social-title">اشترك لتصلك اخر أخبار الفن</span>
                    </li>
                    <li style="display: none;">
                        <form action="" class="newsletter-form" method="get">
                            <div class="contact-us">
                                <input type="email" name="email" class="footer_email" required="" placeholder="">
                                <input type="submit" class="footer_button" value="اشترك ">
                            </div>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer-bottom-section">
            <div class="container ">
                <div class="rights-and-regulations">جميع حقوق النشر محفوظة</div>
            </div>
        </div>
    </div>
</div>
    <button onclick="window.scrollTo({ top: 0, behavior: 'smooth' });" class="backToTop" title="Go to top">
        <span class="footer-icon icon-Untitled-1"></span>
    </button>

    {#        {{ include('base/footer.html.twig') }}#}
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js"></script>
    <script src="{{ asset('js') }}/{{ "script.js"|version }}"></script>

{% endblock %}