{# todo {{ script({ add: "$( document ).ready( function() { c4s.initDetailsEvents(); });", dynamic: __oxid_include_dynamic }) }} #}

{# wird ausgeführt, wenn es sich um einen AJAX-Request handelt #}
{% if blWorkaroundInclude %}
{# todo {{ script({ add: "$( document ).ready( function() { c4s.initEvents();});", dynamic: __oxid_include_dynamic }) }} #}
{% endif %}

{% if oView.showZoomPics() %}
    {% include "page/details/inc/photoswipe.html.twig" %} {# todo #}

    {# ToDo: This logical part should be ported into a core function. #}
    {% set oPictureGallery = oPictureProduct.getPictureGallery() %}
    {% set iActPicId = oPictureGallery.ActPicID|default(1) %}
    {% if oViewConf.isAltImageServerConfigured() %}
        {% set aPictureInfo = oPictureProduct.getMasterZoomPictureUrl(iActPicId)|getimagesize %}
    {% else %}
        {% set sPictureName = oPictureProduct.getPictureFieldValue("oxpic", iActPicId) %}
        {% set aPictureInfo = oPictureProduct.getMasterPicturePath("product/" ~ iActPicId ~ "/" ~ sPictureName)|getimagesize %}
    {% endif %}

    <div class="mb-3 text-center c4s-details-picture">
        <a href="{{ oPictureProduct.getMasterZoomPictureUrl(iActPicId) }}" id="zoom1"{% if aPictureInfo %} data-pswp-width="{{ aPictureInfo.0 }}" data-pswp-height="{{ aPictureInfo.1 }}"{% endif %}>
            <img src="{{ oView.getActPicture() }}"
                 alt="{{ oPictureProduct.oxarticles__oxtitle.value|striptags }} {{ oPictureProduct.oxarticles__oxvarselect.value|striptags }}"
                 class="img-fluid mx-auto c4s-details-zoom-picture"
            >
        </a>
    </div>
{% else %}
    <div class="mb-3 text-center c4s-details-picture">
        <img src="{{ oView.getActPicture() }}" alt="{{ oPictureProduct.oxarticles__oxtitle.value|striptags }} {{ oPictureProduct.oxarticles__oxvarselect.value|striptags }}" class="img-fluid mx-auto">
    </div>
{% endif %}