<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_media_sidebar %}
<div
    class="sw-media-sidebar"
    :class="mediaSidebarClasses"
>
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_media_sidebar_headline %}
    <h3
        v-if="headLine"
        class="sw-media-sidebar__headline"
    >
        {{ headLine }}
    </h3>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_media_sidebar_item_quickinfo_content %}
    <div class="sw-media-sidebar__quickinfo-scroll-container">
        <sw-media-quickinfo
            v-if="isSingleFile && firstEntity.getEntityName() === 'media'"
            :item="firstEntity"
            :editable="editable"
            v-bind="filteredAttributes"
            v-on="listeners"
            @update:item="onFirstItemUpdated"
        />

        <sw-media-folder-info
            v-else-if="isSingleFile && firstEntity.getEntityName() === 'media_folder'"
            :media-folder="firstEntity"
            :editable="editable"
            v-bind="filteredAttributes"
            v-on="listeners"
        />

        <sw-media-quickinfo-multiple
            v-else-if="isMultipleFile"
            :editable="editable"
            :items="items"
            v-bind="filteredAttributes"
            v-on="listeners"
        />

        <sw-media-folder-info
            v-else-if="currentFolder"
            :media-folder="currentFolder"
            :editable="editable"
            v-bind="filteredAttributes"
            @media-folder-renamed="onMediaFolderRenamed"
            v-on="listeners"
        />

        <sw-empty-state
            v-else
            :title="$tc('sw-media.sidebar.labelNoMediaSelected')"
        >
            <template #icon>
                <img
                    :src="assetFilter('/administration/static/img/empty-states/media-empty-state.svg')"
                    :alt="$tc('sw-media.sidebar.labelNoMediaSelected')"
                >
            </template>
        </sw-empty-state>
    </div>
    {% endblock %}
</div>
{% endblock %}
