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

{% block body %}
    {% if skip is defined %}
        {{ include('header/header.html.twig') }}
    {% endif %}
    <div class="programs-landingPage">
        {% if videoProgram is defined %}
            <div class="img" style="position: relative">
                <img src="{{ metaTags.pagePic }}" alt="" id="imagehidden">
                <div class="information" style="padding-right: 10px">
                    {# <div class="prog-name">{{ programs[0].name }}</div> #}
                    <div class="prog-desc">{{ playerVideo.title }}</div>
                    {# In newPrograms.js #}

                </div>
                <div class="play">
                    <button id="yt"><img src="{{ asset('build/images/playbut.png') }}" alt=""></button>
                </div>
            </div>
        {% endif %}
        {% if programs[0] is defined %}
            {% if videoSelected is defined %}
                {% if playerVideo is defined %}
                    {% if playerVideo.youtube %}
                        <iframe id="{{ playerVideo.videoId }}" allowfullscreen class="youtube-player" frameborder="0" height="948px" src="https://www.youtube.com/embed/{{ playerVideo.videoId }}" title="YouTube video player" type="text/html"  allow="autoplay;" width="100%"></iframe>
                    {% elseif playerVideo.dailymotion %}
                        <iframe id="{{ playerVideo.videoId }}" allowfullscreen class="youtube-player" frameborder="0" height="948px" src="https://www.dailymotion.com/embed/video/{{ playerVideo.videoId }}" title="YouTube video player" type="text/html"  allow="autoplay;" width="100%"></iframe>
                    {% endif %}
                {% endif %}

            {% else %}
                <div class="top-programs">
                    <div class="co1 container-xl">
                        <div class="row section-title" ><div class="title"> البرامج</div></div>
                        <div class="row">
                            <div class="col-lg-8 col-md-8 col-sm-12" style="padding: 0px !important;">
                                {% if programs[0] is defined %}
                                    <div class="imgTextContainer main-program">
                                        <div class="scale">
                                            <a class="imageWrapper" href="{{ programs[0].getURL() }}">
                                                <img alt="{{ programs[0].name }}" class="item-picture" src="https://i.ytimg.com/vi/{{ programs[0].videos[0].videoId }}/maxresdefault.jpg">
                                            </a>
                                        </div>
                                            <div class="text">
                                                {{ programs[0].name }}
                                            </div>
                                        
                                    </div>
                                {% endif %}
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-12" >
                                <div class="row">
                                    <div class="col-md-12 col-6 " style="padding: 0px !important;">
                                        {% if programs[1] is defined %}
                                            <div class="imgTextContainer else-program ">
                                                <div class="scale">
                                                    <a class="imageWrapper" href="{{ programs[1].getURL() }}">
                                                        <img alt="{{ programs[1].name }}" class="item-picture" src="https://i.ytimg.com/vi/{{ programs[1].videos[0].videoId }}/maxresdefault.jpg">
                                                        
                                                    </a>
                                                </div>
                                                    <div class="text">
                                                        {{ programs[1].name }}
                                                    </div>
                                               
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="col-md-12 col-6 " style="padding: 0px !important;">
                                        {% if programs[2] is defined %}
                                            <div class="imgTextContainer else-program">
                                                <div class="scale">
                                                    <a class="imageWrapper" href="{{ programs[2].getURL() }}">
                                                        <img alt="{{ programs[2].name }}" class="item-picture" src="https://i.ytimg.com/vi/{{ programs[2].videos[0].videoId }}/maxresdefault.jpg">
                                                        
                                                    </a>
                                                </div>
                                                    <div class="text">
                                                        {{ programs[2].name }}
                                                    </div>
                                                
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="programs ltr">
                    <div class="co1 container-xl">
                        <div class="row">
                            {% for videos in programs %}
                                <div class="imgTextContainer col-lg-3  col-6">
                                    <div class="overflow">
                                    <div class="scale">
                                        <a class="imageWrapper" href="{{ videos.getURL() }}">
                                            <img alt="{{ videos.name }}" class="item-picture" {% for oki in videos.videos %}{% if loop.index == 1 %} src="https://i.ytimg.com/vi/{{ oki.videoId }}/mqdefault.jpg"{% endif %}{% endfor %}>
                                        </a>
                                    </div>
                                </div>
                                        <div class="text" align="center">{{ videos.name }}</div>
                                    
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endif %}
        <div class="container-xl most_viewed_prog " >
            <div class="title">
                {% if videoProgram is defined  %}
                <b>{{ videoProgram.name }}</b>
                {% else %}
                <b>الأكثر مشاهدة</b>
                {% endif %}
            </div>
            {% include "elements/moreprograms.html.twig" %}
            <center style="margin-top: 50px">
                <a href rel="nofollow" class="newsfeed-loader load-more-news" id="loadmorenews" title="{{ 'More'|trans }}" >{{ 'More'|trans }}</a>
            </center>
        </div>
    </div>

{% endblock %}