{% if not pictures is empty %}
    {#  <img src="{{ part.masterPictureAttachment | entityURL('file_view') }}" class="img-fluid img-thumbnail bg-light" alt="Part main image" height="300" width="300"> #}

    <div id="pictureCarousel" class="carousel slide mb-2" data-bs-interval="false" data-bs-ride="false">
        <div class="carousel-indicators">
            {% for pic in pictures %}
                <button type="button" data-bs-target="#pictureCarousel" data-bs-slide-to="{{ loop.index0 }}" {% if loop.first %}class="active" aria-current="true"{% endif %} aria-label="{{ pic.name }}"></button>
            {% endfor %}
        </div>
        <div class="carousel-inner">
            {% for pic in pictures %}
                {# @var pic App\Entity\Attachments\Attachment #}
                <div class="carousel-item  {% if loop.first %}active{% endif %}">
                    <a href="{{ entity_url(pic, 'file_view') }}" data-turbo="false" target="_blank" rel="noopener">
                        <img class="d-block w-100 img-fluid img-thumbnail bg-light part-info-image" src="{{ entity_url(pic, 'file_view') }}" alt="">
                        <div class="mask"></div>
                        <div class="carousel-caption-hover">
                            <div class="carousel-caption text-white">
                                <div><b>{{ pic.name }}</b></div>
                                <div>{% if pic.filename %}({{ pic.filename }}) {% endif %}</div>
                                <div>{{ entity_type_label(pic.element) }}</div>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
        {% if pictures | length > 1 %}
            <button type="button" class="carousel-control-prev" data-bs-target="#pictureCarousel" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{% trans %}part.info.prev_picture{% endtrans %}</span>
            </button>
            <button type="button" class="carousel-control-next" data-bs-target="#pictureCarousel" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">{% trans %}part.info.next_picture{% endtrans %}</span>
            </button>
        {% endif %}
    </div>

{% else %}
    <img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-light mb-2" alt="Part main image" height="300" width="300">
{% endif %}