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

{% block box %}
{% if not programsVideo is empty %}
    {% for k,program in programsVideo %}
        <h4 class="box-header" style="clear: both;">
            <a href="{{ program.getUrl() }}" onclick="gtag('event', 'Programs', {'event_category': '{{ box.pageType }}', 'event_label': '{{ program.name }}'});" target="_blank">
            {#<a href="{{ program.getUrl() }}" onclick="ga('send', 'event', '{{ box.pageType }}', 'Programs', '{{ program.name }}');" target="_blank">#}
                {{ program.name }}
            </a>
        </h4>
        <div class="picturebox_wrapper youtube-video-wrapper full-size" >
            <div class="ic_container picbox_gallery">
                <a class="youtube-arrow" href="{{ program.videos[0].getURL() }}" title="{{ program.videos[0].title }}" onclick="gtag('event', 'Programs', {'event_category': '{{ box.pageType }}', 'event_label': '{{ program.name }}'});" target="_blank">
                {#<a class="youtube-arrow" href="{{ program.videos[0].getURL() }}" title="{{ program.videos[0].title }}" onclick="ga('send', 'event', '{{ box.pageType }}', 'Programs', '{{ program.name }}');" target="_blank">#}
                    <span class="youtubeplay icon-play"></span>
                </a>
                <a href="{{ program.videos[0].getURL() }}" title="{{ program.videos[0].title }}" onclick="gtag('event', 'Programs', {'event_category': '{{ box.pageType }}', 'event_label': '{{ program.name }}'});" target="_blank">
                {#<a href="{{ program.videos[0].getURL() }}" title="{{ program.videos[0].title }}" onclick="ga('send', 'event', '{{ box.pageType }}', 'Programs', '{{ program.name }}');" target="_blank">#}
                    <img alt="{{ program.videos[0].title }}" style="width:100%;" src="https://i.ytimg.com/vi/{{ program.videos[0].videoId }}/mqdefault.jpg" alt="{{ program.videos[0].title }}">
                </a>
            </div>
            <div class="ic_caption">
                <a href="{{ program.videos[0].getURL() }}" title="{{ program.videos[0].title }}" onclick="gtag('event', 'Programs', {'event_category': '{{ box.pageType }}', 'event_label': '{{ program.name }}'});" target="_blank">
                {#<a href="{{ program.videos[0].getURL() }}" title="{{ program.videos[0].title }}" onclick="ga('send', 'event', '{{ box.pageType }}', 'Programs', '{{ program.name }}');" target="_blank">#}
                    <span class="item-title">{{ program.videos[0].title }}</span>
                </a>
            </div>
        </div>
    {% endfor %}
{% endif %}
{% endblock %}