From 0855b1ef38c39df06ea2c135dece9c8fb3c4aa49 Mon Sep 17 00:00:00 2001
From: Jakub Brzegowski <symfiz@gmail.com>
Date: Wed, 23 Feb 2022 17:03:05 +0100
Subject: [PATCH] Refactor modals with new twig component

---
 src/bundle/Resources/public/scss/_modals.scss |   7 --
 .../account/notifications/modal.html.twig     |  64 ++++-------
 .../content/modal/add_translation.html.twig   |  62 ++++++-----
 .../content/modal/draft_conflict.html.twig    |  86 +++++++--------
 .../location_bulk_action_failed.html.twig     |  73 ++++++-------
 .../content/modal/location_trash.html.twig    | 100 +++++++++--------
 .../admin/content/modal/user_delete.html.twig |  41 +++----
 .../content/modal/version_conflict.html.twig  |  74 ++++++-------
 .../tab/url/modal_add_custom_url.html.twig    | 101 +++++++++---------
 .../modal/delete_confirmation.html.twig       |  20 ----
 .../modal/delete_confirmation.html.twig       |  33 +++---
 .../modal/delete_confirmation.html.twig       |  49 ++++-----
 .../modal/empty_trash_confirmation.html.twig  |  56 +++++-----
 .../admin/ui/component/modal/modal.html.twig  |  13 ++-
 .../modal/bulk_delete_confirmation.html.twig  |  40 ++++---
 .../admin/url_wildcard/modal_create.html.twig |  69 ++++++------
 16 files changed, 397 insertions(+), 491 deletions(-)
 delete mode 100644 src/bundle/Resources/views/themes/admin/content_type/modal/delete_confirmation.html.twig

diff --git a/src/bundle/Resources/public/scss/_modals.scss b/src/bundle/Resources/public/scss/_modals.scss
index b201cf009c..51393a9819 100644
--- a/src/bundle/Resources/public/scss/_modals.scss
+++ b/src/bundle/Resources/public/scss/_modals.scss
@@ -41,13 +41,6 @@
         }
     }
 
-    &--wide {
-        .modal-dialog {
-            max-width: calculateRem(800px);
-            width: calculateRem(800px);
-        }
-    }
-
     &--has-subtitle {
         .modal-header {
             border-bottom: 0;
diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/modal.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/modal.html.twig
index 4ce59dba21..c18772b5e1 100644
--- a/src/bundle/Resources/views/themes/admin/account/notifications/modal.html.twig
+++ b/src/bundle/Resources/views/themes/admin/account/notifications/modal.html.twig
@@ -1,45 +1,25 @@
 {% trans_default_domain 'notifications' %}
 
-<div
-    class="modal fade ibexa-notifications-modal ibexa-modal ibexa-modal--table-content"
-    id="view-notifications"
-    tabindex="-1"
-    role="dialog">
-    <div
-        class="modal-dialog"
-        role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 
-                    class="modal-title" 
-                    data-notifications-total="">
-                    {{ 'notifications'|trans|desc('Notifications') }} 
-                </h5>
-                <button
-                    type="button"
-                    class="close"
-                    title="{{ 'notification.close'|trans|desc('Close') }} "
-                    data-bs-dismiss="modal"
-                    aria-label="Close">
-                    <svg
-                        class="ibexa-icon ibexa-icon--small-medium"
-                        aria-hidden="true">
-                        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div class="ibexa-notifications-modal__spinner">
-                    <svg class="ibexa-icon ibexa-spin">
-                        <use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
-                    </svg>
-                </div>
-                <div class="ibexa-notifications-modal__results">
-                    {{ render(controller('Ibexa\\Bundle\\AdminUi\\Controller\\NotificationController::renderNotificationsPageAction', {
-                        'page': 1,
-                    })) }}
-                </div>
-            </div>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'notifications'|trans|desc('Notifications'),
+    subtitle: 'Some subtitle',
+    class: 'ibexa-notifications-modal',
+    no_header_border: true,
+    id: 'view-notifications',
+    attr_close_btn: {
+        'data-notifications-total': '',
+    },
+} %}
+    {% block body_content %}
+        <div class="ibexa-notifications-modal__spinner">
+            <svg class="ibexa-icon ibexa-spin">
+                <use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
+            </svg>
         </div>
-    </div>
-</div>
+        <div class="ibexa-notifications-modal__results">
+            {{ render(controller('Ibexa\\Bundle\\AdminUi\\Controller\\NotificationController::renderNotificationsPageAction', {
+                'page': 1,
+            })) }}
+        </div>
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig
index f47a46bdf5..09d9e2b522 100644
--- a/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig
@@ -2,35 +2,39 @@
 
 {% form_theme form '@ibexadesign/content/translation_add_form_fields.html.twig' %}
 
-<div class="modal fade ibexa-modal ibexa-translation" id="add-translation-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'tab.translations.add.title'|trans|desc('Create a new translation'),
+    class: 'ibexa-translation',
+    id: 'add-translation-modal',
+} %}
+    {% block content_before %}
         {% set action = action is defined ? action : path('ibexa.translation.add') %}
         {{ form_start(form, {'action': action}) }}
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">{{ 'tab.translations.add.title'|trans|desc('Create a new translation') }}</h5>
-                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="{{ 'translation.modal_close'|trans|desc('Close') }}">
-                        <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                            <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                        </svg>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    {{ form_row(form.base_language, {'attr': {'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--base-language'}}) }}
-                    <div class="ibexa-translation__arrow">
-                        <svg class="ibexa-icon ibexa-icon--medium">
-                            <use xlink:href="{{ ibexa_icon_path('back') }}"></use>
-                        </svg>
-                    </div>
-                    {{ form_row(form.language, {'attr': {'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--language'}}) }}
-                </div>
-                <div class="modal-footer">
-                    {{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-btn--create-translation'}}) }}
-                    <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                        {{ 'tab.translations.add.cancel'|trans|desc('Cancel') }}
-                    </button>
-                </div>
-            </div>
+    {% endblock %}
+    {% block body_content %}
+        {{ form_row(form.base_language, {
+            'attr': {
+                'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--base-language'
+            },
+        }) }}
+        <div class="ibexa-translation__arrow">
+            <svg class="ibexa-icon ibexa-icon--medium">
+                <use xlink:href="{{ ibexa_icon_path('back') }}"></use>
+            </svg>
+        </div>
+        {{ form_row(form.language, {
+            'attr': {
+                'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--language'
+            },
+        }) }}
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-btn--create-translation'}}) }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'tab.translations.add.cancel'|trans|desc('Cancel') }}
+        </button>
+    {% endblock %}
+    {% block content_after %}
         {{ form_end(form) }}
-    </div>
-</div>
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig
index 2a5dbf7c99..28094d0689 100644
--- a/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig
@@ -1,56 +1,44 @@
 {% trans_default_domain 'draft_conflict' %}
 
-{% import _self as version_modal_draft_conflict %}
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'draft.conflict.header'|trans|desc('Draft conflict'),
+    class: 'ibexa-modal--version-draft-conflict',
+    size: 'large',
+    id: 'version-draft-conflict-modal',
+    version_modal_draft_conflict: _self,
+} %}
+    {% import version_modal_draft_conflict as version_modal_draft_conflict_embed %}
 
-<div class="modal fade ibexa-modal ibexa-modal--version-draft-conflict" id="version-draft-conflict-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">{{ 'draft.conflict.header'|trans|desc('Draft conflict') }}</h5>
-                <button
-                    type="button"
-                    class="close"
-                    data-bs-dismiss="modal"
-                    aria-label={{ 'draft.conflict.close'|trans|desc('Close') }}
-                    title={{ 'draft.conflict.close'|trans|desc('Close') }}
-                >
-                    <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div class="ibexa-modal-body__main">
-                    {% set number = conflicted_drafts|length %}
-                    {% if number == 1 %}
-                        {{ 'draft.conflict.number.one'|trans|desc('There is already one draft for this Content item.') }}
-                    {% else %}
-                        {{ 'draft.conflict.number.multiple'|trans({ '%number%': number })|desc('There are already %number% drafts for this Content item.') }}
-                    {% endif %}
-                    <br/>
-                    {% if content_is_user %}
-                        {{ 'draft.conflict.choice_content_is_user'|trans({})|desc('You can edit any of your existing draft(s)') }}
-                    {% else %}
-                        {{ 'draft.conflict.choice'|trans({})|desc('You can either edit any of your existing draft(s) or add a new one.') }}
-                    {% endif %}
-                </div>
-                {% set show_add_draft_button = (not content_is_user) %}
-                {% include '@ibexadesign/ui/component/table/table_header.html.twig' with {
-                    headline: '',
-                    actions: version_modal_draft_conflict.table_header_tools(show_add_draft_button),
-                } only %}
-                {{ include('@ibexadesign/content/tab/versions/table.html.twig', {
-                    'versions': conflicted_drafts,
-                    'location': location,
-                    'is_draft': true,
-                    'have_to_paginate': false,
-                    'is_draft_conflict': true,
-                    'content_is_user': content_is_user
-                }) }}
-            </div>
+    {% block body_content %}
+        <div class="ibexa-modal-body__main">
+            {% set number = conflicted_drafts|length %}
+            {% if number == 1 %}
+                {{ 'draft.conflict.number.one'|trans|desc('There is already one draft for this Content item.') }}
+            {% else %}
+                {{ 'draft.conflict.number.multiple'|trans({ '%number%': number })|desc('There are already %number% drafts for this Content item.') }}
+            {% endif %}
+            <br/>
+            {% if content_is_user %}
+                {{ 'draft.conflict.choice_content_is_user'|trans({})|desc('You can edit any of your existing draft(s)') }}
+            {% else %}
+                {{ 'draft.conflict.choice'|trans({})|desc('You can either edit any of your existing draft(s) or add a new one.') }}
+            {% endif %}
         </div>
-    </div>
-</div>
+        {% set show_add_draft_button = (not content_is_user) %}
+        {% include '@ibexadesign/ui/component/table/table_header.html.twig' with {
+            headline: '',
+            actions: version_modal_draft_conflict_embed.table_header_tools(show_add_draft_button),
+        } only %}
+        {{ include('@ibexadesign/content/tab/versions/table.html.twig', {
+            'versions': conflicted_drafts,
+            'location': location,
+            'is_draft': true,
+            'have_to_paginate': false,
+            'is_draft_conflict': true,
+            'content_is_user': content_is_user
+        }) }}
+    {% endblock %}
+{% endembed %}
 
 {% macro table_header_tools(show_add_button) %}
     {% if show_add_button %}
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/location_bulk_action_failed.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/location_bulk_action_failed.html.twig
index e73b214f3e..47ce707f5c 100644
--- a/src/bundle/Resources/views/themes/admin/content/modal/location_bulk_action_failed.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/modal/location_bulk_action_failed.html.twig
@@ -1,45 +1,34 @@
 {% trans_default_domain 'locationview' %}
 
-<div
-    class="modal fade ibexa-modal ibexa-modal--table-content ibexa-modal--bulk-action-failed ibexa-bulk-action-failed-modal"
-    id="bulk-action-failed-modal"
-    tabindex="-1"
-    role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">{{ 'content.view.subitems.bulk_action.limited_permissions'|trans|desc('Limited user permissions') }}</h5>
-                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                    <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="modal-body">
-                {% set table_row_template %}
-                    {{ include('@ibexadesign/ui/component/table/table_body_row.html.twig', {
-                        body_row_cols: [
-                            { content: '{{ content_name }}' },
-                            { content: '{{ content_type_name }}' },
-                        ],
-                    }) }}
-                {% endset %}
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'content.view.subitems.bulk_action.limited_permissions'|trans|desc('Limited user permissions'),
+    class: 'ibexa-modal--bulk-action-failed ibexa-bulk-action-failed-modal',
+    no_header_border: true,
+    id: 'bulk-action-failed-modal',
+} %}
+    {% block body_content %}
+        {% set table_row_template %}
+            {{ include('@ibexadesign/ui/component/table/table_body_row.html.twig', {
+                body_row_cols: [
+                    { content: '{{ content_name }}' },
+                    { content: '{{ content_type_name }}' },
+                ],
+            }) }}
+        {% endset %}
 
-                {% embed '@ibexadesign/ui/component/table/table.html.twig' with {
-                    headline: ' ',
-                    head_cols: [
-                        { content: 'bulk_action.failed.modal.content_name'|trans|desc('Name') },
-                        { content: 'bulk_action.failed.modal.content_type_name'|trans|desc('Content Type') },
-                    ],
-                    class: 'ibexa-bulk-action-failed-modal__table',
-                    table_body_class: 'ibexa-bulk-action-failed-modal__table-body',
-                    attr: {
-                        'data-row-template': table_row_template,
-                    },
-                } %}
-                    {% block tbody %}{% endblock %}
-                {% endembed %}
-            </div>
-        </div>
-    </div>
-</div>
+        {% embed '@ibexadesign/ui/component/table/table.html.twig' with {
+            headline: ' ',
+            head_cols: [
+                { content: 'bulk_action.failed.modal.content_name'|trans|desc('Name') },
+                { content: 'bulk_action.failed.modal.content_type_name'|trans|desc('Content Type') },
+            ],
+            class: 'ibexa-bulk-action-failed-modal__table',
+            table_body_class: 'ibexa-bulk-action-failed-modal__table-body',
+            attr: {
+                'data-row-template': table_row_template,
+            },
+        } %}
+            {% block tbody %}{% endblock %}
+        {% endembed %}
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig
index 4859faf2b9..f6fdecd24c 100644
--- a/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig
@@ -1,61 +1,57 @@
 {% form_theme form '@ibexadesign/ui/form_fields.html.twig' %}
 
-<div
-    class="modal fade ibexa-modal ibexa-modal--no-header ibexa-modal--send-to-trash ibexa-modal--trash-location"
-    id="trash-location-modal"
-    tabindex="-1"
-    role="dialog"
-    data-content-name="{{ content_name|default('') }}"
->
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <button type="button" class="close" data-bs-dismiss="modal" title="{{ 'trash.modal.close'|trans|desc('Close') }}">
-                <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'content.view.subitems.bulk_action.limited_permissions'|trans|desc('Limited user permissions'),
+    class: 'ibexa-modal--send-to-trash ibexa-modal--trash-location',
+    attr: {
+        'data-content-name': content_name|default(''),
+    },
+    no_header: true,
+    id: 'trash-location-modal',
+} %}
+    {% block content_before %}
+        {{ form_start(form, {'action': path('ibexa.location.trash')}) }}
+    {% endblock %}
+    {% block body_content %}
+        {{ 'trash.modal.send_to_trash.message'|trans|desc('Are you sure you want to send this Content item to Trash?') }}
 
-            {{ form_start(form, {'action': path('ibexa.location.trash')}) }}
-            <div class="modal-body">
-                {{ 'trash.modal.send_to_trash.message'|trans|desc('Are you sure you want to send this Content item to Trash?') }}
-
-                {% for option in form.trash_options %}
-                    <div class="ibexa-modal__trash-option">
-                        <p class="ibexa-modal__option-label">
-                            {{ form_label(option) }}
+        {% for option in form.trash_options %}
+            <div class="ibexa-modal__trash-option">
+                <p class="ibexa-modal__option-label">
+                    {{ form_label(option) }}
+                </p>
+                {% if option.vars.help_multiline ?? false %}
+                    {% for help in option.vars.help_multiline %}
+                        <p class="ibexa-modal__option-description">
+                            {{ help }}
                         </p>
-                        {% if option.vars.help_multiline ?? false %}
-                            {% for help in option.vars.help_multiline %}
-                                <p class="ibexa-modal__option-description">
-                                    {{ help }}
-                                </p>
-                            {% endfor %}
-                        {% endif %}
-                        {% for input in option %}
-                            {{ form_widget(input) }}
-                        {% endfor %}
-                    {# Do not render label if no options input #}
-                        {% do option.setRendered() %}
-                    </div>
-                {% endfor %}
-                {% if form.trash_options is not empty %}
-                    <p>
-                        {{ form_widget(form.confirm) }}
-                    </p>
+                    {% endfor %}
                 {% endif %}
+                {% for input in option %}
+                    {{ form_widget(input) }}
+                {% endfor %}
+            {# Do not render label if no options input #}
+                {% do option.setRendered() %}
             </div>
-            <div class="modal-footer">
-                {{ form_widget(form.trash,
-                    {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary disabled ibexa-btn--confirm-send-to-trash', 'disabled': true}})
-                }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'trash.form.cancel'|trans|desc('Cancel') }}
-                </button>
-            </div>
-            {{ form_end(form) }}
-        </div>
-    </div>
-</div>
+        {% endfor %}
+        {% if form.trash_options is not empty %}
+            <p>
+                {{ form_widget(form.confirm) }}
+            </p>
+        {% endif %}
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_widget(form.trash,
+            {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary disabled ibexa-btn--confirm-send-to-trash', 'disabled': true}})
+        }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'trash.form.cancel'|trans|desc('Cancel') }}
+        </button>
+    {% endblock %}
+    {% block content_after %}
+        {{ form_end(form) }}
+    {% endblock %}
+{% endembed %}
 
 {% block javascripts %}
     {{ encore_entry_script_tags('ibexa-admin-ui-modal-location-trash-js', null, 'ibexa') }}
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig
index 5f931297cc..32892a0b85 100644
--- a/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig
@@ -2,27 +2,20 @@
 
 {% form_theme form '@ibexadesign/ui/form_fields.html.twig' %}
 
-<div class="modal fade ibexa-modal ibexa-modal--no-header ibexa-modal--send-to-trash" id="delete-user-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
-            <div class="modal-body">
-                <p class="ibexa-modal-body__main">
-                    {{ 'delete.modal.message'|trans|desc('Are you sure you want to delete this User?') }}
-                </p>
-            </div>
-            <div class="modal-footer">
-                {{ form_start(form, {'action': path('ibexa.user.delete')}) }}
-                {{ form_widget(form.delete, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'}}) }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'delete.form.cancel'|trans|desc('Cancel') }}
-                </button>
-                {{ form_end(form) }}
-            </div>
-        </div>
-    </div>
-</div>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    class: 'ibexa-modal--send-to-trash',
+    no_header: true,
+    id: 'delete-user-modal',
+} %}
+    {% block body_content %}
+        {{ 'delete.modal.message'|trans|desc('Are you sure you want to delete this User?') }}
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_start(form, {'action': path('ibexa.user.delete')}) }}
+        {{ form_widget(form.delete, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'}}) }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'delete.form.cancel'|trans|desc('Cancel') }}
+        </button>
+        {{ form_end(form) }}
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig
index 374c318fcc..927bd4d5a0 100644
--- a/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig
@@ -1,43 +1,35 @@
 {% trans_default_domain 'version_conflict' %}
 
-<div class="modal fade ibexa-modal ibexa-modal--version-conflict" id="version-conflict-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">{{ 'version.conflict.header'|trans|desc('Version conflict') }}</h5>
-                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                    <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="modal-body">
-                <p class="ibexa-modal-body__explanation">
-                    <strong>
-                        {{ 'version.conflict.are_you_sure'|trans|desc(
-                        'Are you sure you want to continue and overwrite the published version?'
-                        ) }}
-                    </strong>
-                </p>
-                <p class="ibexa-modal-body__explanation">
-                    {{ 'version.conflict.consequences'|trans|desc(
-                    'If you continue, the published version will be overwritten.'
-                    ) }}
-                </p>
-                <p class="ibexa-modal-body__explanation">
-                    {{ 'version.conflict.choices'|trans|desc(
-                    'To resolve the conflict, click Cancel and delete the draft. Then edit the published version.'
-                    ) }}
-                </p>
-            </div>
-            <div class="modal-footer">
-                <a id="edit-conflicted-draft" class="btn ibexa-btn ibexa-btn--primary" href="#">
-                    {{ 'version.conflict.form.continue'|trans|desc('Continue') }}
-                </a>
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'version.conflict.form.cancel'|trans|desc('Cancel') }}
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'version.conflict.header'|trans|desc('Version conflict'),
+    class: 'ibexa-modal--version-conflict',
+    id: 'version-conflict-modal',
+} %}
+    {% block body_content %}
+        <p class="ibexa-modal-body__explanation">
+            <strong>
+                {{ 'version.conflict.are_you_sure'|trans|desc(
+                'Are you sure you want to continue and overwrite the published version?'
+                ) }}
+            </strong>
+        </p>
+        <p class="ibexa-modal-body__explanation">
+            {{ 'version.conflict.consequences'|trans|desc(
+            'If you continue, the published version will be overwritten.'
+            ) }}
+        </p>
+        <p class="ibexa-modal-body__explanation">
+            {{ 'version.conflict.choices'|trans|desc(
+            'To resolve the conflict, click Cancel and delete the draft. Then edit the published version.'
+            ) }}
+        </p>
+    {% endblock %}
+    {% block footer_content %}
+        <a id="edit-conflicted-draft" class="btn ibexa-btn ibexa-btn--primary" href="#">
+            {{ 'version.conflict.form.continue'|trans|desc('Continue') }}
+        </a>
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'version.conflict.form.cancel'|trans|desc('Cancel') }}
+        </button>
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/content/tab/url/modal_add_custom_url.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/url/modal_add_custom_url.html.twig
index 0fbdd1ec85..26f7b7a841 100644
--- a/src/bundle/Resources/views/themes/admin/content/tab/url/modal_add_custom_url.html.twig
+++ b/src/bundle/Resources/views/themes/admin/content/tab/url/modal_add_custom_url.html.twig
@@ -1,62 +1,59 @@
 {% trans_default_domain 'content_url' %}
 {% form_theme form '@ibexadesign/content/form_fields.html.twig' '@ibexadesign/content/tab/url/checkbox.html.twig' %}
 
-<div class="modal fade ibexa-modal ibexa-modal--wide ibexa-modal--custom-url-alias" id="ibexa-modal--custom-url-alias" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'tab.urls.add.title'|trans|desc('Create a new URL alias'),
+    class: 'ibexa-modal--custom-url-alias',
+    size: 'large',
+    id: 'ibexa-modal--custom-url-alias',
+} %}
+    {% block content_before %}
         {{ form_start(form, {'action': path('ibexa.custom_url.add')}) }}
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3 class="modal-title">{{ 'tab.urls.add.title'|trans|desc('Create a new URL alias') }}</h3>
-                <button type="button" class="close" data-bs-dismiss="modal" aria-label="{{ 'tab.urls.modal_close'|trans|desc('Close') }}">
-                    <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                    </svg>
-                </button>
+    {% endblock %}
+    {% block body_content %}
+        <div class="ibexa-custom-url-from">
+            <div class="ibexa-custom-url-from__item">
+                <span class="ibexa-label required">{{ 'tab.urls.add.path'|trans|desc('URL') }}</span>
+                {{ form_widget(form.path) }}
             </div>
-            <div class="modal-body">
-                <div class="ibexa-custom-url-from">
-                    <div class="ibexa-custom-url-from__item">
-                        <span class="ibexa-label required">{{ 'tab.urls.add.path'|trans|desc('URL') }}</span>
-                        {{ form_widget(form.path) }}
-                    </div>
-                    <div class="ibexa-custom-url-from__item">
-                        <span class="ibexa-label">{{ 'tab.urls.add.language'|trans|desc('Language') }}</span>
-                        {{ form_widget(form.language) }}
-                    </div>
-                    <div class="ibexa-custom-url-from__item">
-                        <span class="ibexa-label">{{ 'tab.urls.add.redirect'|trans|desc('Redirect to alias destination') }}</span>
-                        {{ form_widget(form.redirect) }}
-                        <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--checked">{{ 'tab.urls.add.redirect.helper.checked'|trans|desc('The alias will redirect to the destination using an HTTP 301 response.') }}</div>
-                        <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--unchecked">{{ 'tab.urls.add.redirect.helper.unchecked'|trans|desc('The alias will not redirect to the destination and the URL will stay the same.') }}</div>
-                    </div>
-                    <div class="ibexa-custom-url-from__item">
-                        <span class="ibexa-label">{{ 'tab.urls.add.site_root'|trans|desc('Place at the site root') }}</span>
-                        {{ form_widget(form.site_root) }}
-                        <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--checked">{{ 'tab.urls.add.site_root.helper.checked'|trans|desc('The alias will be placed at the site root.') }}</div>
-                        <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--unchecked">
-                            {% if parent_name is not null %}
-                                {{ 'tab.urls.add.site_root.helper.unchecked'|trans({'%parent_name%': parent_name})|desc('The alias will be placed under %parent_name%') }}
-                            {% else %}
-                                {{ 'tab.urls.add.site_root.helper.no_parent_name'|trans|desc('The alias will be placed under the parent of this Location') }}
-                            {% endif %}
-                        </div>
-                    </div>
-                    <div class="ibexa-custom-url-from__item ibexa-custom-url-from__item--siteacces">
-                        <span class="ibexa-label">{{ 'tab.urls.add.site_access'|trans|desc('SiteAccess') }}</span>
-                        {{ form_widget(form.site_access) }}
-                        <div class="ibexa-custom-url-from__info-text">
-                            {{ 'tab.urls.add.root_location_id.helper_secondary'|trans|desc("If you leave this empty, the alias will be placed at main root Location.") }}
-                        </div>
-                    </div>
+            <div class="ibexa-custom-url-from__item">
+                <span class="ibexa-label">{{ 'tab.urls.add.language'|trans|desc('Language') }}</span>
+                {{ form_widget(form.language) }}
+            </div>
+            <div class="ibexa-custom-url-from__item">
+                <span class="ibexa-label">{{ 'tab.urls.add.redirect'|trans|desc('Redirect to alias destination') }}</span>
+                {{ form_widget(form.redirect) }}
+                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--checked">{{ 'tab.urls.add.redirect.helper.checked'|trans|desc('The alias will redirect to the destination using an HTTP 301 response.') }}</div>
+                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--unchecked">{{ 'tab.urls.add.redirect.helper.unchecked'|trans|desc('The alias will not redirect to the destination and the URL will stay the same.') }}</div>
+            </div>
+            <div class="ibexa-custom-url-from__item">
+                <span class="ibexa-label">{{ 'tab.urls.add.site_root'|trans|desc('Place at the site root') }}</span>
+                {{ form_widget(form.site_root) }}
+                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--checked">{{ 'tab.urls.add.site_root.helper.checked'|trans|desc('The alias will be placed at the site root.') }}</div>
+                <div class="ibexa-custom-url-from__info-text ibexa-custom-url-from__info-text--unchecked">
+                    {% if parent_name is not null %}
+                        {{ 'tab.urls.add.site_root.helper.unchecked'|trans({'%parent_name%': parent_name})|desc('The alias will be placed under %parent_name%') }}
+                    {% else %}
+                        {{ 'tab.urls.add.site_root.helper.no_parent_name'|trans|desc('The alias will be placed under the parent of this Location') }}
+                    {% endif %}
                 </div>
             </div>
-            <div class="modal-footer">
-                {{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': 'disabled'}}) }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'tab.urls.add.cancel'|trans|desc('Cancel') }}
-                </button>
+            <div class="ibexa-custom-url-from__item ibexa-custom-url-from__item--siteacces">
+                <span class="ibexa-label">{{ 'tab.urls.add.site_access'|trans|desc('SiteAccess') }}</span>
+                {{ form_widget(form.site_access) }}
+                <div class="ibexa-custom-url-from__info-text">
+                    {{ 'tab.urls.add.root_location_id.helper_secondary'|trans|desc("If you leave this empty, the alias will be placed at main root Location.") }}
+                </div>
             </div>
         </div>
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': 'disabled'}}) }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'tab.urls.add.cancel'|trans|desc('Cancel') }}
+        </button>
+    {% endblock %}
+    {% block content_after %}
         {{ form_end(form) }}
-    </div>
-</div>
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/content_type/modal/delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/content_type/modal/delete_confirmation.html.twig
deleted file mode 100644
index 22022cfd0f..0000000000
--- a/src/bundle/Resources/views/themes/admin/content_type/modal/delete_confirmation.html.twig
+++ /dev/null
@@ -1,20 +0,0 @@
-{% trans_default_domain 'content_type' %}
-
-<div class="modal fade ibexa-modal ibexa-modal--no-header ibexa-modal--send-to-trash" id="delete-content-type-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
-            <div class="modal-body">
-                <p class="ibexa-modal-body__main">{{ 'content_type.field_definitions.modal.message'|trans|desc('Do you want to delete the selected Field definition(s)?') }}</p>
-            </div>
-            <div class="modal-footer">
-                {{ form_widget(form.removeFieldDefinition, { attr: { class: 'btn ibexa-btn ibexa-btn--primary'}, label: 'modal.delete'|trans|desc('Delete')}) }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">{{ 'modal.cancel'|trans|desc('Cancel') }}</button>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig
index 5d6c2ade93..a737d26a72 100644
--- a/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig
+++ b/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig
@@ -1,20 +1,17 @@
 {% trans_default_domain 'language' %}
 
-<div class="modal fade ibexa-modal ibexa-modal--no-header ibexa-modal--send-to-trash" id="delete-language-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
-            <div class="modal-body">
-                <p>{{ 'language.modal.message'|trans|desc('Do you want to delete the language(s)?') }}</p>
-            </div>
-            <div class="modal-footer">
-                {{ form_widget(deleteForm.delete, { 'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'} }) }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">{{ 'language.form.cancel'|trans|desc('Cancel') }}</button>
-            </div>
-        </div>
-    </div>
-</div>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    class: 'ibexa-modal--send-to-trash',
+    no_header: true,
+    id: 'delete-language-modal',
+} %}
+    {% block body_content %}
+        <p>{{ 'language.modal.message'|trans|desc('Do you want to delete the language(s)?') }}</p>
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_widget(deleteForm.delete, { 'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'} }) }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'language.form.cancel'|trans|desc('Cancel') }}
+        </button>
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig
index 1ff0dc1e48..3e21c51ff9 100644
--- a/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig
+++ b/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig
@@ -1,29 +1,24 @@
 {% form_theme form '@ibexadesign/ui/form_fields.html.twig'  %}
 
-<div class="modal fade ibexa-modal ibexa-modal--no-header ibexa-modal--send-to-trash" id="delete-section-modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
-            <div class="modal-body">
-                <p class="ibexa-modal-body__main">
-                    {{ 'section.modal.message'|trans|desc('Do you want to delete the Section(s)?') }}
-                </p>
-            </div>
-            <div class="modal-footer">
-                {{ form_start(form, {
-                    "action": path('ibexa.section.delete', {'sectionId': section.id}),
-                    'attr': {'class': 'd-inline-block'}
-                }) }}
-                {{ form_widget(form.delete, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': not deletable}}) }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'form.cancel'|trans|desc('Cancel') }}
-                </button>
-                {{ form_end(form) }}
-            </div>
-        </div>
-    </div>
-</div>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    class: 'ibexa-modal--send-to-trash',
+    no_header: true,
+    id: 'delete-section-modal',
+} %}
+    {% block body_content %}
+        <p class="ibexa-modal-body__main">
+            {{ 'section.modal.message'|trans|desc('Do you want to delete the Section(s)?') }}
+        </p>
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_start(form, {
+            "action": path('ibexa.section.delete', {'sectionId': section.id}),
+            'attr': {'class': 'd-inline-block'}
+        }) }}
+        {{ form_widget(form.delete, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': not deletable}}) }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'form.cancel'|trans|desc('Cancel') }}
+        </button>
+        {{ form_end(form) }}
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig
index 9abcd108d8..cc6917e8db 100644
--- a/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig
+++ b/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig
@@ -1,33 +1,27 @@
 {% form_theme form '@ibexadesign/ui/form_fields.html.twig'  %}
 
-<div class="modal fade ibexa-modal ibexa-modal--no-header ibexa-modal--send-to-trash" id="confirmEmptyTrash" tabindex="-1" role="dialog" aria-labelledby="confirmEmptyTrash"
-     aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
-            <div class="modal-body">
-                <p class="ibexa-modal-body__main">
-                    {{ 'trash.delete.all.confirm'|trans({'%trashItemsCount%': trash_items_count})|desc('Are you sure you want to permanently delete %trashItemsCount% item(s)?') }}
-                </p>
-                <p class="ibexa-modal-body__explanation">
-                    {{ 'trash.delete.all.info'|trans|desc('This action cannot be reversed') }}
-                </p>
-            </div>
-            <div class="modal-footer">
-                {{ form_start(form, {
-                    'action': path('ibexa.trash.empty')
-                }) }}
-                {{ form_widget(form.empty, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'}}) }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'trash.delete.button.cancel'|trans|desc('Cancel') }}
-                </button>
-                {{ form_widget(form.empty_trash, {'label_attr': {'class': 'checkbox-inline'}, 'attr': {'hidden': true}}) }}
-                {{ form_end(form) }}
-            </div>
-        </div>
-    </div>
-</div>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    class: 'ibexa-modal--send-to-trash',
+    no_header: true,
+    id: 'confirmEmptyTrash',
+} %}
+    {% block body_content %}
+        <p class="ibexa-modal-body__main">
+            {{ 'trash.delete.all.confirm'|trans({'%trashItemsCount%': trash_items_count})|desc('Are you sure you want to permanently delete %trashItemsCount% item(s)?') }}
+        </p>
+        <p class="ibexa-modal-body__explanation">
+            {{ 'trash.delete.all.info'|trans|desc('This action cannot be reversed') }}
+        </p>
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_start(form, {
+            'action': path('ibexa.trash.empty')
+        }) }}
+        {{ form_widget(form.empty, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'}}) }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'trash.delete.button.cancel'|trans|desc('Cancel') }}
+        </button>
+        {{ form_widget(form.empty_trash, {'label_attr': {'class': 'checkbox-inline'}, 'attr': {'hidden': true}}) }}
+        {{ form_end(form) }}
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig
index fb6a1b42ad..50fd7d1e83 100644
--- a/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig
@@ -23,6 +23,12 @@
     role: attr.role|default('dialog'),
 }) %}
 
+{% if has_static_backdrop|default(false) %}
+    {% set attr = attr|merge({
+        'data-bs-backdrop': attr['data-bs-backdrop']|default('static')
+    }) %}
+{% endif %}
+
 {% set attr_dialog = attr_dialog|default({})|merge({
     class: ('modal-dialog '
         ~ (size_class is defined ? size_class ~ ' ')
@@ -30,6 +36,11 @@
     role: attr_dialog.role|default('document'),
 }) %}
 
+{% set attr_content = attr_content|default({})|merge({
+    class: ('modal-content '
+        ~ attr_content.class|default(''))|trim,
+}) %}
+
 {% set attr_title = attr_title|default({})|merge({
     class: ('modal-title ' ~ attr_title.class|default(''))|trim,
 }) %}
@@ -60,7 +71,7 @@
         <div {{ html.attributes(attr_dialog) }}>
             {% block content_before %}{% endblock %}
             {% block content %}
-                <div class="modal-content">
+                <div {{ html.attributes(attr_content) }}>
                     {% block header %}
                         {% if no_header %}
                             {{ close_btn }}
diff --git a/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig
index cc29bd6703..a0bfce9e08 100644
--- a/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig
@@ -1,22 +1,18 @@
-<div class="modal fade ibexa-modal ibexa-modal--no-header ibexa-modal--notice ibexa-modal--send-to-trash" id="{{ id }}" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <button type="button" class="close" title="{{ 'modal.close'|trans|desc('Close') }}" data-bs-dismiss="modal">
-                <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                </svg>
-            </button>
-            <div class="modal-body">
-                {{ message }}
-            </div>
-            <div class="modal-footer">
-                <button class="btn ibexa-btn ibexa-btn--primary ibexa-btn--trigger" data-click="{{ data_click }}">
-                    {{ 'modal.delete'|trans|desc('Delete') }}
-                </button>
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'modal.cancel'|trans|desc('Cancel') }}
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    class: 'ibexa-modal--send-to-trash',
+    no_header: true,
+    id,
+    message,
+} %}
+    {% block body_content %}
+        {{ message }}
+    {% endblock %}
+    {% block footer_content %}
+        <button class="btn ibexa-btn ibexa-btn--primary ibexa-btn--trigger" data-click="{{ data_click }}">
+            {{ 'modal.delete'|trans|desc('Delete') }}
+        </button>
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'modal.cancel'|trans|desc('Cancel') }}
+        </button>
+    {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig b/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig
index d999580a59..6f8b880b9a 100644
--- a/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig
+++ b/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig
@@ -1,41 +1,42 @@
 {% trans_default_domain 'ezplatform_url_wildcard' %}
 {% form_theme form '@ibexadesign/content/form_fields.html.twig' '@ibexadesign/content/tab/url/checkbox.html.twig' %}
 
- <div
-    class="modal fade ibexa-modal ibexa-modal--url-wildcards"
-    id="{{ id }}"
-    tabindex="-1"
-    role="dialog"
->
-    <div class="modal-dialog" role="document">
+{% embed '@ibexadesign/ui/component/modal/modal.html.twig' with {
+    title: 'url_wildcard.modal.create.title'|trans|desc('Create a new URL wildcard'),
+    class: 'ibexa-modal--url-wildcards',
+    id,
+} %}
+    {% block content_before %}
         {{ form_start(form, {'action': path('ibexa.url_wildcard.add')}) }}
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3 class="modal-title">{{ 'url_wildcard.modal.create.title'|trans|desc('Create a new URL wildcard') }}</h3>
-                <button type="button" class="close" data-bs-dismiss="modal" aria-label="{{ 'url_wildcard.modal.create.close'|trans|desc('Close') }}">
-                    <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
-                        <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="modal-body">
-                <span class="ibexa-modal__label required">{{ 'url_wildcard.modal.create.url.wildcard'|trans|desc('URL wildcard') }}</span>
-                {{ form_widget(form.source_url) }}
+    {% endblock %}
+    {% block body_content %}
+        <span class="ibexa-modal__label required">
+            {{ 'url_wildcard.modal.create.url.wildcard'|trans|desc('URL wildcard') }}
+        </span>
+        {{ form_widget(form.source_url) }}
 
-                <span class="ibexa-modal__label required">{{ 'url_wildcard.modal.create.url.destintion'|trans|desc('Destination') }}</span>
-                {{ form_widget(form.destination_url) }}
- 
-                <span class="ibexa-modal__label">{{ 'url_wildcard.modal.create.redirect'|trans|desc('Redirect to wildcard destination') }}</span>
-                {{ form_widget(form.forward) }}
-                <div class="ibexa-modal__info-text">{{ 'url_wildcard.modal.create.redirect.helper'|trans|desc('When checked, the URL displayed will be the URL of the destination. When unchecked, the wildcard will not redirect to the destination and the URL will stay the same.') }}</div>
-            </div>
-            <div class="modal-footer">
-                {{ form_widget(form.create, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': 'disabled'}}) }}
-                <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
-                    {{ 'url_wildcard.modal.create.cancel'|trans|desc('Cancel') }}
-                </button>
-            </div>
+        <span class="ibexa-modal__label required">
+            {{ 'url_wildcard.modal.create.url.destintion'|trans|desc('Destination') }}
+        </span>
+        {{ form_widget(form.destination_url) }}
+
+        <span class="ibexa-modal__label">
+            {{ 'url_wildcard.modal.create.redirect'|trans|desc('Redirect to wildcard destination') }}
+        </span>
+        {{ form_widget(form.forward) }}
+        <div class="ibexa-modal__info-text">
+            {{ 'url_wildcard.modal.create.redirect.helper'|trans|desc(
+                'When checked, the URL displayed will be the URL of the destination. When unchecked, the wildcard will not redirect to the destination and the URL will stay the same.'
+            ) }}
         </div>
+    {% endblock %}
+    {% block footer_content %}
+        {{ form_widget(form.create, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': 'disabled'}}) }}
+        <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
+            {{ 'url_wildcard.modal.create.cancel'|trans|desc('Cancel') }}
+        </button>
+    {% endblock %}
+    {% block content_after %}
         {{ form_end(form) }}
-    </div>
-</div>
+    {% endblock %}
+{% endembed %}