<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_notifications %}
<transition name="sw-notifications-slide-fade">

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_notifications_element %}
    <div
        v-if="notifications.length"
        class="sw-notifications"
        :style="notificationsStyle"
    >

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_notifications_transition_group %}
        <transition-group name="sw-notifications-slide-fade">

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_notifications_item %}
            <sw-alert
                v-for="(notification, index) in notifications"
                :key="notification.uuid"
                :class="['sw-notifications__notification--' + index, 'sw-notification__alert']"
                :title="notification.title"
                :variant="notification.variant"
                :appearance="notification.system ? 'system' : 'notification'"
                :notification-index="notification.uuid"
                :closable="true"
                @close="onClose(notification)"
            >

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_notifications_item_content %}
                <div v-html="$sanitize(notification.message, { ALLOWED_TAGS: ['a', 'b', 'i', 'u', 'br'], ALLOWED_ATTR: ['href', 'target'] })"></div>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_notifications_item_actions_slot %}
                <template #actions>
                    <!-- eslint-disable sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_notifications_item_actions %}
                    <template
                        v-for="action in notification.actions"
                        :key="action.label"
                    >
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_notifications_item_action_item %}
                        <sw-button
                            :disabled="action.disabled"
                            @click="handleAction(action, notification)"
                        >
                            {{ action.label }}
                        </sw-button>
                        {% endblock %}
                    </template>
                    {% endblock %}
                </template>
                {% endblock %}
            </sw-alert>
            {% endblock %}
        </transition-group>
        {% endblock %}
    </div>
    {% endblock %}
</transition>
{% endblock %}
