<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_media_modal_delete %}
<sw-modal
    variant="small"
    class="sw-media-modal-delete"
    :title="snippets.modalTitle"
    @modal-close="closeDeleteModal($event)"
>

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_media_modal_body %}
    <div v-if="mediaQuickInfo">
        <p>{{ $tc('global.sw-media-modal-delete.mediaQuickInfoMessage') }}</p>
        <sw-media-quickinfo-usage
            :item="mediaQuickInfo"
            router-link-target="_blank"
        />
    </div>
    <div v-if="mediaInUsages && mediaInUsages.length > 0">
        <p>{{ $tc('global.sw-media-modal-delete.mediaInUsagesMessage') }}</p>
        <sw-media-media-item
            v-for="mediaInUsage in mediaInUsages"
            :key="`sw-media-modal-delete-${mediaInUsage.id}`"
            class="sw-media-modal-delete__media-list-item"
            :item="mediaInUsage"
            :is-list="true"
            :editable="false"
            :selected="false"
            :show-selection-indicator="false"
            :show-context-menu-button="false"
        />
    </div>
    <p v-html="$sanitize(snippets.deleteMessage)"></p>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_media_modal_footer %}
    <template #modal-footer>

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_media_modal_delete_cancel_button %}
        <sw-button
            size="small"
            @click="closeDeleteModal($event)"
        >
            {{ $tc('global.default.cancel') }}
        </sw-button>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_media_modal_delete_confirm_button %}
        <sw-button
            class="sw-media-modal-delete__confirm"
            size="small"
            variant="danger"
            @click="deleteSelection($event)"
        >
            {{ $tc('global.default.delete') }}
        </sw-button>
        {% endblock %}

    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
