{% extends "page/details/inc/tabs.html.twig" %}

{% block details_tabs %}
    {% if oDetailsProduct.getVideoIds() %}
        {% capture append = "aTabHeaders" %}
            <li class="d-none d-lg-block nav-item c4s-details-tab-header"
                data-text="{{ translate({ ident: "C4S_ARTICLE_EXTENSION_TAB_VIDEO" }) }}"
                role="presentation"
            >
                <button id="c4s-details-tab-videos"
                        class="nav-link{% if blFirstTab %} active{% endif %}"
                        data-bs-toggle="tab"
                        data-bs-target="#c4s-details-tab-pane-videos"
                >
                    {{ translate({ ident: "C4S_ARTICLE_EXTENSION_TAB_VIDEO" }) }}
                </button>
            </li>
        {% endcapture %}
        {% capture append = "aTabDropdowns" %}
            <li data-text="{{ translate({ ident: "C4S_TAB_DOCUMENTS" }) }}">
                <button id="c4s-details-tab-dropdown-videos" class="dropdown-item nav-link{% if blFirstTab %} active{% endif %}" data-bs-toggle="tab" data-bs-target="#c4s-details-tab-pane-videos">
                    {{ translate({ ident: "C4S_ARTICLE_EXTENSION_TAB_VIDEO" }) }}
                </button>
            </li>
        {% endcapture %}
        {% capture append = "aTabContents" %}
            {% set sVideoType = oViewConf.getExternalVideoType() %}
            <div id="c4s-details-tab-pane-videos" class="tab-pane fade p-3{% if blFirstTab %} show active{% endif %}" role="tabpanel" aria-labelledby="c4s-details-tab-videos">
                {% for iKey, sVideoId in oDetailsProduct.getVideoIds() %}
                    {% if (iKey == 1 and oDetailsProduct.getVideo1Title()) or (iKey == 2 and oDetailsProduct.getVideo2Title()) %}
                        <h3>
                            {{ oDetailsProduct.getVideoTitle(iKey) }}
                        </h3>
                    {% endif %}

                    {# youtube #}
                    {% if sVideoType == "YOUTUBE" %}
                        <div class="iframe-container-youtube embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/{{ sVideoId }}" allowfullscreen=""></iframe>
                        </div>

                    {# vimeo #}
                    {% elseif sVideoType == "VIMEO" %}
                        <div class="iframe-container-vimeo embed-responsive embed-responsive-16by9">
                            <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/{{ sVideoId }}" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
                        </div>
                    {% endif %}

                    {% if not loop.last %}
                        <br>
                    {% endif %}
                {% endfor %}
            </div>
        {% endcapture %}
    {% endif %}
    {{ parent() }}
{% endblock %}
{# source of embedded responsive video code: https://www.t3premium.de/video-generator/ .. includes c4s optimizations #}