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

{% block box %}
{% if not programsVideo is empty %}
    <div class="programsvideo-box">
        <div class="programsvideo-title">
            <div class="scroll-programTitles">
                <ul>
                    {% for k,program in programsVideo %}
                    <li>
                        <a class="program{{ program.videos[0].programId }} program-title" href="#" onclick="gtag('event', '{{ app.request.get('_route') }}', {'event_category': 'Programs', 'event_label': '{{ program.name }}'});">
                            <span class="sequentialNb ">{{ program.videos[0].videoSequential }}</span>
                            <div class="program-name">{{ program.name }}</div>
                        </a>
                    </li>
                   {% endfor %}
                </ul>
            </div>
        </div>
        <div class="ProgramVideo-container">
            <span class="prevProgramVideo"></span>
            <div class="scroll-programvideos">
                <ul>
                    {% for k,program in programsVideo %}
                    <li data-programid="program{{ program.videos[0].programId }}">
                            <a class="lastProgramVideo" href="{{ program.videos[0].getURL() }}" onclick="gtag('event', '{{ app.request.get('_route') }}', {'event_category': 'Programs', 'event_label': '{{ program.name }}'});">
                                <div class="ProgramVideo_play">
                                    <span class="icon-play"></span>
                                </div>
                                <img src="https://i.ytimg.com/vi/{{ program.videos[0].videoId }}/mqdefault.jpg">
                                <div class="ProgramVideo_tile" >{{ program.videos[0].title }}</div>
                            </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <span class="nextProgramVideo"></span>
        </div>
    </div>
{% endif %}
{% endblock %}