{% extends 'boxes/box.html.twig' %}

{% block box %}
{% if not shuffledProgramsVideo is empty %}
<div class="channel-portlet">
    <div class="channel-title">
        <div class="scroll-programTitles">
            <ul>
                {% for k,programVideoArray in shuffledProgramsVideo %}
                <li>
                    {% if newsPage %}
                    <a class="program{{ programVideoArray.programId }}program-title" title="{{ programVideoArray.name }}" href="#" onclick="ga('send', 'event', 'News Page', 'Programs', '{{ programVideoArray.name }}');">
                      {% else %}
                        <a class="program{{ programVideoArray.programId }}program-title" title="{{ programVideoArray.name }}" href="#" onclick="ga('send', 'event', 'Homepage', 'Programs', '{{ programVideoArray.name }}');">
                     {% endif %}
                            <span class="sequentialNb ">{{ programVideoArray.video_sequential }}</span>
                            <div class="program-name">{{ programVideoArray.name }}</div>
                        </a>
                </li>
               {% endfor %}
            </ul>
        </div>
    </div>
    <div class="ProgramVideo-container">
        <span class="prevProgramVideo"></span>
        <div class="scroll-programvideos">
            <ul>
                {% for programVideoArray in shuffledProgramsVideo %}
                <li data-programid="progra{{ programVideoArray.programId }}">
                    {% if newsPage %}
                    <a class="lastProgramVideo" href="{{ programVideoArray.url }}" title="{{ programVideoArray.name }}" onclick="ga('send', 'event', 'News Page', 'Programs', '{{ programVideoArray.name }}');">
                       {% else %}
                        <a class="lastProgramVideo" href="{{ programVideoArray.url }}" title="{{ programVideoArray.name }}" onclick="ga('send', 'event', 'Homepage', 'Programs', '{{ programVideoArray.name }}');">
                          {% endif %}
                            <div class="ProgramVideo_play">
                                <span class="icon-play"></span>
                            </div>
                            <img src="https://i.ytimg.com/vi/{{ programVideoArray.videoId }}/mqdefault.jpg">
                            <div class="ProgramVideo_tile" >{{ programVideoArray.title }}</div>
                        </a>
                </li>
                {% endfor %}
            </ul>
        </div>
        <span class="nextProgramVideo"></span>
    </div>
</div>
{% endif %}
{% endblock %}