django-smartbase-admin 1.0.5__py3-none-any.whl → 1.0.6b1__py3-none-any.whl

django_smartbase_admin/static/sb_admin/sprites/sb_admin/Caution.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M7.99999 1C8.23789 1 8.45795 1.12713 8.57714 1.33301L15.9102 13.999C16.0295 14.2052 16.03 14.4596 15.9111 14.666C15.7921 14.8725 15.5713 15 15.333 15H0.666987C0.428667 15 0.207898 14.8725 0.0888618 14.666C-0.0299797 14.4596 -0.0295034 14.2052 0.0898383 13.999L7.42285 1.33301C7.54204 1.12713 7.7621 1 7.99999 1ZM7.99999 11C7.63202 11 7.33335 11.2981 7.333 11.666V12C7.33313 12.3681 7.63189 12.666 7.99999 12.666C8.3681 12.666 8.66685 12.3681 8.66699 12V11.666C8.66663 11.2981 8.36797 11 7.99999 11ZM7.99902 5.66699C7.6311 5.66753 7.33283 5.96605 7.333 6.33398L7.33593 9.66699C7.33625 10.035 7.63492 10.3331 8.00292 10.333C8.37106 10.3327 8.66916 10.0341 8.66894 9.66602L8.66699 6.33301C8.66655 5.96493 8.36713 5.66669 7.99902 5.66699Z"/>
+</svg>

django_smartbase_admin/static/sb_admin/src/css/components/_input.css

@@ -235,22 +235,26 @@
                 }
             }
         }
-        &-delete {
-            + label {
-                @apply text-dark-300 transition-colors;
-                @apply p-8 h-full w-full flex-center;
-                &:before,
-                &:after {
-                    @apply hidden;
-                }
-                &:hover {
-                    @apply text-dark-400;
-                }
+    }
+
+    input.checkbox-delete {
+        + label {
+            @apply text-dark-300 transition-colors;
+            @apply p-8 h-full w-full flex-center;
+
+            &:before,
+            &:after {
+                @apply hidden;
             }
-            &:checked {
-                + label {
-                    @apply text-negative;
-                }
+
+            &:hover {
+                @apply text-dark-400;
+            }
+        }
+
+        &:checked {
+            + label {
+                @apply text-negative;
             }
         }
     }

django_smartbase_admin/static/sb_admin/src/js/autocomplete.js

@@ -25,6 +25,10 @@ export default class Autocomplete {
             this.handleDynamiclyAddedAutocomplete(document.getElementById('sb-admin-modal'))
         })
         this.handleDynamiclyAddedAutocomplete(document)
+        document.body.addEventListener('sbadmin:modal-change-form-response', (event) => {
+            const {field, id, label} = event.detail
+            this.selectAutocompleteItem(field, id, label)
+        })
     }
 
     handleDynamiclyAddedAutocomplete(el) {
@@ -88,6 +92,10 @@ export default class Autocomplete {
             choicesJS.SBhasNextPage = true
             this.search(choicesJS.SBcurrentSearchTerm, choicesJS, inputEl, autocompleteData, choicesJS.SBcurrentPage)
         }, 200))
+
+        choiceInput.addEventListener('selectItem', (event) => {
+            choicesJSListeners.selectItem(event.detail, inputEl)
+        })
         choiceInput.addEventListener('addItem', () => {
             choicesJSListeners.addItem(choicesJS, inputEl)
         })
@@ -277,4 +285,14 @@ export default class Autocomplete {
                 choicesJS.SBcurrentPage = requestedPage
             })
     }
+
+    selectAutocompleteItem(field, id, label) {
+        const selectEl = document.querySelector(`select.js-autocomplete[data-autocomplete-data-id="${field}_data"]`)
+        if (selectEl) {
+            selectEl.dispatchEvent(new CustomEvent('selectItem', {
+                detail: {value: id, label: label},
+            }))
+            document.getElementById(`${field}-value`).textContent = label
+        }
+    }
 }

django_smartbase_admin/static/sb_admin/src/js/choices.js

@@ -50,6 +50,14 @@ export const choicesJSOptions = (choiceInput) => ({
 
 
 export const choicesJSListeners = {
+    'selectItem': (item, inputEl) => {
+        if (!item) return
+        const choiceValue = [{
+            value: item.value,
+            label: item.label
+        }]
+        inputEl.value = JSON.stringify(choiceValue)
+    },
     'addItem': (choicesJS, inputEl) => {
         const choiceValue = []
         let choicesJSValue = choicesJS.getValue()

django_smartbase_admin/static/sb_admin/src/js/datepicker.js

@@ -8,7 +8,8 @@ import {
 
 
 export default class Datepicker {
-    constructor() {
+    constructor(target) {
+        target = target || document
         let documentLocale = document.documentElement.lang || 'default'
         documentLocale = documentLocale.split('-')[0]
         if (documentLocale === 'en') {
@@ -16,10 +17,11 @@ export default class Datepicker {
         }
         flatpickr.localize(this.getLocale(documentLocale))
         this.initWidgets()
-
-        document.addEventListener('formset:added', (e) => {
-            this.initWidgets(e.target)
-        })
+        if(target === document) {
+            document.addEventListener('formset:added', (e) => {
+                this.initWidgets(e.target)
+            })
+        }
     }
 
     getLocale(locale) {

django_smartbase_admin/static/sb_admin/src/js/main.js

@@ -5,7 +5,13 @@ import Modal from 'bootstrap/js/dist/modal'
 import Tooltip from 'bootstrap/js/dist/tooltip'
 
 // remove Modal focus trap to fix interaction with fields in modals inside another modal
-Modal.prototype._initializeFocusTrap = function () { return { activate: function () { }, deactivate: function () { } } }
+Modal.prototype._initializeFocusTrap = function () {
+    return {
+        activate: function () {
+        }, deactivate: function () {
+        }
+    }
+}
 
 window.bootstrap5 = {
     Modal: Modal,
@@ -31,7 +37,7 @@ class Main {
         const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         tooltipTriggerList.map((tooltipTriggerEl) => {
             const tooltipEl = tooltipTriggerEl.closest('.js-tooltip')
-            if(tooltipEl) {
+            if (tooltipEl) {
                 return new Tooltip(tooltipTriggerEl, {container: tooltipEl})
             }
             return null
@@ -49,10 +55,10 @@ class Main {
             window.open(e.detail.url, e.detail?.target || '_blank')
         })
 
-        if(window.htmx){
+        if (window.htmx) {
             window.htmx.on("htmx:afterSwap", (detail) => {
                 const requestEl = detail.detail.requestConfig.elt.closest('[hx-swap]')
-                if(requestEl && requestEl.getAttribute('hx-swap') === "none") {
+                if (requestEl && requestEl.getAttribute('hx-swap') === "none") {
                     // do not process afterSwap if none swap is performed
                     // this should prevent double processing of afterSwap for first oob-swapped element
                     // which in case of hx-swap=none is returned here in the detail.target
@@ -60,16 +66,18 @@ class Main {
                 }
                 this.initFileInputs(detail.target)
                 this.initDropdowns(detail.target)
+                this.initInputs(detail.target)
+                this.autocomplete.handleDynamiclyAddedAutocomplete(detail.target)
+                this.initInlines(detail.target)
+                this.initCKEditor(detail.target)
             })
         }
 
         new Sidebar()
-        this.datepicker = new Datepicker()
-        this.range = new Range()
+        this.initInputs()
         new Sorting()
         this.autocomplete = new Autocomplete()
         new ChoicesJS()
-        this.multiselect = new Multiselect()
         document.addEventListener('click', (e) => {
             this.closeAlert(e)
             this.selectAll(e)
@@ -82,8 +90,22 @@ class Main {
         this.handleLocationHashFromTabs()
     }
 
+    initInlines(target) {
+        target = target || document
+        const inlineGroups = target.querySelectorAll('.inline-group')
+        inlineGroups.forEach(group => {
+            window.django.jQuery(group).djangoFormset()
+        })
+    }
+
+    initInputs(target) {
+        this.datepicker = new Datepicker(target)
+        this.range = new Range(null, null, target)
+        this.multiselect = new Multiselect()
+    }
+
     handleLocationHashFromTabs() {
-        if(window.location.hash) {
+        if (window.location.hash) {
             document.querySelector(`#tab_${window.location.hash.slice(1)}`)?.click()
         }
         const tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]:not([data-bs-disable-history])')
@@ -116,7 +138,7 @@ class Main {
 
     fileDownload(event) {
         const button = event.target.closest('.js-file-button')
-        if(button) {
+        if (button) {
             event.preventDefault()
             event.stopPropagation()
             const download_window = window.open(button.getAttribute("href"))
@@ -132,21 +154,20 @@ class Main {
         const dropdowns = [].slice.call(target.querySelectorAll('[data-bs-toggle="dropdown"]'))
         dropdowns.map((dropdownToggleEl) => {
             let offset = dropdownToggleEl.dataset['bsOffset']
-            if(offset) {
+            if (offset) {
                 offset = JSON.parse(dropdownToggleEl.dataset['bsOffset'])
-            }
-            else {
-                offset = [0,8]
+            } else {
+                offset = [0, 8]
             }
             return new Dropdown(dropdownToggleEl, {
                 autoClose: 'outside',
                 offset: offset,
                 popperConfig(defaultBsPopperConfig) {
                     const elementConf = {}
-                    if(dropdownToggleEl.dataset['bsPopperPlacement']) {
+                    if (dropdownToggleEl.dataset['bsPopperPlacement']) {
                         elementConf['placement'] = dropdownToggleEl.dataset['bsPopperPlacement']
                     }
-                    return { ...defaultBsPopperConfig, ...elementConf, strategy: 'fixed' }
+                    return {...defaultBsPopperConfig, ...elementConf, strategy: 'fixed'}
                 }
             })
         })
@@ -154,7 +175,7 @@ class Main {
 
     initAliasName() {
         const aliasGroup = document.getElementById(window.sb_admin_const.GLOBAL_FILTER_ALIAS_WIDGET_ID)
-        if(!aliasGroup) {
+        if (!aliasGroup) {
             return
         }
 
@@ -180,9 +201,9 @@ class Main {
         const saveStateEl = event.target.closest('.js-save-state')
         if (saveStateEl) {
             const isBsToggle = saveStateEl.dataset['bsToggle']
-            if(isBsToggle === 'collapse') {
+            if (isBsToggle === 'collapse') {
                 const expanded = saveStateEl.getAttribute('aria-expanded') === 'true'
-                setCookie(saveStateEl.id, expanded, expanded?1:0)
+                setCookie(saveStateEl.id, expanded, expanded ? 1 : 0)
             }
         }
     }
@@ -196,7 +217,7 @@ class Main {
     selectAll(event) {
         const wrapper = event.target.closest('.js-select-all-wrapper')
 
-        if(wrapper) {
+        if (wrapper) {
             const selectAll = event.target.closest('.js-select-all')
             const clearAll = event.target.closest('.js-clear-all')
             if (selectAll) {
@@ -231,17 +252,16 @@ class Main {
             const input = fileInput.querySelector('input[type="file"]')
             const delete_checkbox = fileInput.querySelector('input[type="checkbox"]')
             input?.addEventListener('change', e => {
-                if(delete_checkbox) {
+                if (delete_checkbox) {
                     delete_checkbox.checked = false
                 }
-                if(e.target.files[0]) {
+                if (e.target.files[0]) {
                     fileInput.classList.add('filled')
                     fileInput.querySelectorAll('.js-input-file-image').forEach(el => {
                         el.src = URL.createObjectURL(e.target.files[0])
                     })
                     fileInput.querySelector('.js-input-file-filename').innerHTML = e.target.files[0].name
-                }
-                else {
+                } else {
                     fileInput.classList.remove('filled')
                     fileInput.querySelector('.js-input-file-filename').innerHTML = ""
                 }
@@ -251,13 +271,25 @@ class Main {
             deleteButton?.addEventListener('click', () => {
                 input.value = ""
                 input.dispatchEvent(new Event('change'))
-                if(delete_checkbox) {
+                if (delete_checkbox) {
                     delete_checkbox.checked = true
                 }
             })
         })
     }
 
+    initCKEditor(target) {
+        target = target || document
+        target.querySelectorAll('textarea[data-type="ckeditortype"]').forEach((textarea) => {
+            const id = textarea.id
+            if (!id) return
+            if (window.CKEDITOR.instances[id]) {
+                return
+            }
+            window.CKEDITOR.replace(id)
+        })
+    }
+
     clearFilter(inputId) {
         const fieldElem = document.querySelector(`#${inputId}`)
         fieldElem.value = ''
@@ -266,9 +298,9 @@ class Main {
     }
 
     executeListAction(table_id, action_url, no_params) {
-        if(window.SBAdminTable && window.SBAdminTable[table_id]){
+        if (window.SBAdminTable && window.SBAdminTable[table_id]) {
             window.SBAdminTable[table_id].executeListAction(action_url, no_params)
-        } else{
+        } else {
             window.location.href = action_url
         }
     }
@@ -277,3 +309,9 @@ class Main {
 window.addEventListener('DOMContentLoaded', () => {
     window.SBAdmin = new Main()
 })
+
+document.body.addEventListener('sbadmin:modal-change-form-response', function (event) {
+    if (event.detail.reload) {
+        window.location.reload()
+    }
+})

django_smartbase_admin/static/sb_admin/src/js/range.js

@@ -1,9 +1,10 @@
 
 export default class Range {
-    constructor(selector_override, options_override) {
+    constructor(selector_override, options_override, target) {
+        target = target || document
         const selector = selector_override || '.js-range'
         this.separator = ' - '
-        document.querySelectorAll(selector).forEach(el => {
+        target.querySelectorAll(selector).forEach(el => {
             this.initRange(el, options_override)
         })
     }

django_smartbase_admin/templates/sb_admin/actions/change_form.html

@@ -10,7 +10,9 @@
 {% block view_class %}change-form{% endblock %}
 
 {% block js %}
-    {{ block.super }}
+    {% if not sbadmin_is_modal %}
+        {{ block.super }}
+    {% endif %}
     <script type="text/javascript"
             id="django-admin-form-add-constants"
             src="{% static 'admin/js/change_form.js' %}"
@@ -109,7 +111,8 @@
 
     {% block form %}
         <form {% if has_file_field %}enctype="multipart/form-data" {% endif %}action="{{ form_url }}" method="post"
-              id="{{ opts.model_name }}_form" class="detail-view-form flex-grow flex flex-col w-full max-w-1180 mx-auto" novalidate>
+              id="{% if sbadmin_is_modal %}modal__{% endif %}{{ opts.model_name }}_form" class="detail-view-form flex-grow flex flex-col w-full max-w-1180 mx-auto" novalidate>
+        <div class=" {% if sbadmin_is_modal %}max-h-[70vh] overflow-y-auto sbadmin_is_modal realative flex-grow{% endif %}">
             {% csrf_token %}
             {% if errors %}
                 <div class="alert bg-negative-50 border border-negative-100 text-negative-900 mb-24">
@@ -133,8 +136,8 @@
                     {% for tab, tab_content_object in tabular_context.context.items %}
                         <li role="presentation">
                             <button class="relative{% for class in tab_content_object.classes %} {{ class }}{% endfor %}" id="tab_{{ tab|slugify }}" data-bs-toggle="tab"
-                                    data-bs-target="#tabcontent_{{ tab|slugify }}" type="button" role="tab"
-                                    aria-controls="tabcontent_{{ tab|slugify }}" aria-selected="true">
+                                    data-bs-target="#{% if sbadmin_is_modal %}modal__{% endif %}{{ opts.model_name }}_tabcontent_{{ tab|slugify }}" type="button" role="tab"
+                                    aria-controls="{% if sbadmin_is_modal %}modal__{% endif %}{{ opts.model_name }}_tabcontent_{{ tab|slugify }}" aria-selected="true">
                                 {{ tab }}
                             </button>
                         </li>
@@ -142,7 +145,7 @@
                 </ul>
             {% endif %}
             {% for tab, tab_content_object in tabular_context.context.items %}
-                <div class="detail-view-tab tab-pane fade{% for class in tab_content_object.classes %} {{ class }}{% endfor %} pt-20" id="tabcontent_{{ tab|slugify }}" role="tabpanel"
+                <div class="detail-view-tab tab-pane fade{% for class in tab_content_object.classes %} {{ class }}{% endfor %} pt-20" id="{% if sbadmin_is_modal %}modal__{% endif %}{{ opts.model_name }}_tabcontent_{{ tab|slugify }}" role="tabpanel"
                      aria-labelledby="tab_{{ tab|slugify }}">
                     <div class="flex max-md:flex-wrap w-full lg:gap-24">
                         <div class="min-w-0 w-full">
@@ -150,7 +153,7 @@
                                 {% if tab_content.type == 'fieldset' %}
                                     {% block tab_content_fieldset %}
                                         {% with tab_content.value as fieldset %}
-                                            {% if DETAIL_STRUCTURE_RIGHT_CLASS not in fieldset.classes %}
+                                            {% if DETAIL_STRUCTURE_RIGHT_CLASS not in fieldset.classes or sbadmin_is_modal %}
                                                 {% include "sb_admin/includes/fieldset.html" %}
                                             {% endif %}
                                         {% endwith %}
@@ -170,7 +173,7 @@
                                 {% for tab_content in tab_content_object.content %}
                                     {% if tab_content.type == 'fieldset' %}
                                         {% with tab_content.value as fieldset %}
-                                            {% if DETAIL_STRUCTURE_RIGHT_CLASS in fieldset.classes %}
+                                            {% if DETAIL_STRUCTURE_RIGHT_CLASS in fieldset.classes and not sbadmin_is_modal %}
                                                 {% include "sb_admin/includes/fieldset.html" %}
                                             {% endif %}
                                         {% endwith %}
@@ -191,41 +194,77 @@
                     {% endif %}>
                 </script>
             {% endblock %}
+        </div>
             {% if is_popup %}
                 {# TODO: check sticky bar in popups #}
-             {% endif %}
-            {% block action_bar %}
-                <div class="detail-view-action-bar">
-                    <div>
-                        <h2 class="text-dark-900 font-semibold text-18 mr-16 line-clamp-1">
-                            {% include 'sb_admin/includes/change_form_title.html' %}
-                        </h2>
-                        {% if previous_url or next_url %}
-                            <div class="flex items-center gap-8 mr-8">
-                                <{% if previous_url %}a href="{{ previous_url }}"{% else %}button type="button" disabled{% endif %} class="btn btn-small" title="{% trans 'Prev' %}">
-                                    <svg class="w-20 h-20">
-                                        <use xlink:href="#Left"></use>
-                                    </svg>
-                                </{% if previous_url %}a{% else %}button{% endif %}>
-                                <div class="text-12">{% blocktrans %}<strong>{{ current_index }}</strong> / {{ all_objects_count }}{% endblocktrans %}</div>
-                                <{% if next_url %}a href="{{ next_url }}"{% else %}button type="button" disabled{% endif %} class="btn btn-small" title="{% trans 'Next' %}">
-                                    <svg class="w-20 h-20">
-                                        <use xlink:href="#Right"></use>
-                                    </svg>
-                                </{% if next_url %}a{% else %}button{% endif %}>
-                            </div>
-                        {% endif %}
-                        <div class="flex ml-auto gap-8">
-                            {% if not is_popup and has_view_permission %}
-                                {% url opts|admin_urlname:'changelist' as changelist_url %}
-                                <a href="{% add_preserved_filters changelist_url %}" class="btn btn-empty">{% trans 'Back' %}</a>
+            {% endif %}
+            {% if sbadmin_is_modal %}
+                <div class="bg-light bottom-0 left-0 w-full px-24 py-24 flex justify-between gap-8">
+                    {% if original %}
+                        {% url opts|admin_urlname:'change' original.pk|admin_urlquote as post_url %}
+                    {% else %}
+                        {% url opts|admin_urlname:'add' as post_url %}
+                    {% endif %}
+                    <button
+                            form="{% if sbadmin_is_modal %}modal__{% endif %}{{ opts.model_name }}_form"
+                            hx-post="{{ post_url }}"
+                            hx-target="#sb-admin-modal .modal-content"
+                            hx-swap="innerHTML"
+                            hx-encoding="multipart/form-data"
+                            hx-vals='{
+                                "sbadmin_is_modal": 1,
+                                "sb_admin_source_field": "{{ request.GET.sb_admin_source_field }}",
+                                "sbadmin_reload_on_save": {% if sbadmin_reload_on_save %}1{% else %}0{% endif %},
+                                "sbadmin_parent_instance_field": "{{ request.GET.sbadmin_parent_instance_field }}",
+                                "sbadmin_parent_instance_pk": "{{ request.GET.sbadmin_parent_instance_pk | default:"" }}",
+                                "sbadmin_parent_instance_label": "{{ request.GET.sbadmin_parent_instance_label }}"
+                            }'
+                            class="btn btn-primary flex-grow flex items-center justify-center">
+                        <svg class="w-20 h-20 mr-8">
+                            <use xlink:href="#Save"></use>
+                        </svg>
+                        {% trans 'Save' %}
+                    </button>
+                    <button type="button"
+                            class="btn flex-grow"
+                            data-bs-dismiss="modal" aria-label="Close">
+                        {% trans 'Close' %}
+                    </button>
+                </div>
+            {% else %}
+                {% block action_bar %}
+                    <div class="detail-view-action-bar">
+                        <div>
+                            <h2 class="text-dark-900 font-semibold text-18 mr-16 line-clamp-1">
+                                {% include 'sb_admin/includes/change_form_title.html' %}
+                            </h2>
+                            {% if previous_url or next_url %}
+                                <div class="flex items-center gap-8 mr-8">
+                                    <{% if previous_url %}a href="{{ previous_url }}"{% else %}button type="button" disabled{% endif %} class="btn btn-small" title="{% trans 'Prev' %}">
+                                        <svg class="w-20 h-20">
+                                            <use xlink:href="#Left"></use>
+                                        </svg>
+                                        </{% if previous_url %}a{% else %}button{% endif %}>
+                                        <div class="text-12">{% blocktrans %}<strong>{{ current_index }}</strong> / {{ all_objects_count }}{% endblocktrans %}</div>
+                                        <{% if next_url %}a href="{{ next_url }}"{% else %}button type="button" disabled{% endif %} class="btn btn-small" title="{% trans 'Next' %}">
+                                            <svg class="w-20 h-20">
+                                                <use xlink:href="#Right"></use>
+                                            </svg>
+                                            </{% if next_url %}a{% else %}button{% endif %}>
+                                </div>
                             {% endif %}
+                            <div class="flex ml-auto gap-8">
+                                {% if not is_popup and has_view_permission %}
+                                    {% url opts|admin_urlname:'changelist' as changelist_url %}
+                                    <a href="{% add_preserved_filters changelist_url %}" class="btn btn-empty">{% trans 'Back' %}</a>
+                                {% endif %}
 
-                            {% submit_row %}
+                                {% submit_row %}
+                            </div>
                         </div>
                     </div>
-                </div>
-            {% endblock %}
+                {% endblock %}
+            {% endif %}
         </form>
     {% endblock %}
 {% endblock %}

django_smartbase_admin/templates/sb_admin/inlines/table_inline.html

@@ -24,12 +24,28 @@
                                     class="btn {{ list_action.css_class|default_if_none:'' }}">{{ list_action.title }}</a>
                         {% endfor %}
                         {% if inline_admin_formset.has_add_permission %}
-                            <a href="javascript://" class="add-handler djn-add-handler btn btn-icon ml-auto {{ inline_admin_formset.handler_classes|join:" " }}">
-                                <svg class="w-20 h-20 md:mr-8">
-                                    <use xlink:href="#Plus"></use>
-                                </svg>
-                                <span>{% trans 'Add' %}</span>
-                            </a>
+                            {% if context_data.add_url and not sbadmin_is_modal %}
+                                <a
+                                        class="btn btn-icon ml-auto {{ inline_admin_formset.handler_classes|join:" " }}"
+                                        data-bs-toggle="modal"
+                                        data-bs-target="#sb-admin-modal"
+                                        hx-get="{{ context_data.add_url }}?_popup=1&sbadmin_is_modal=1&sbadmin_reload_on_save=1&sbadmin_parent_instance_field={{ context_data.parent_data.sbadmin_parent_instance_field }}&sbadmin_parent_instance_pk={{ context_data.parent_data.sbadmin_parent_instance_pk }}&sbadmin_parent_instance_label={{ context_data.parent_data.sbadmin_parent_instance_label }}"
+                                        hx-target="#sb-admin-modal .modal-content"
+                                        hx-swap="innerHTML"
+                                >
+                                    <svg class="w-20 h-20 md:mr-8">
+                                        <use xlink:href="#Plus"></use>
+                                    </svg>
+                                    <span>{% trans 'Add' %}</span>
+                                </a>
+                            {% else %}
+                                <a href="javascript://" class="add-handler djn-add-handler btn btn-icon ml-auto {{ inline_admin_formset.handler_classes|join:" " }}">
+                                    <svg class="w-20 h-20 md:mr-8">
+                                        <use xlink:href="#Plus"></use>
+                                    </svg>
+                                    <span>{% trans 'Add' %}</span>
+                                </a>
+                            {% endif %}
                         {% endif %}
                     </div>
                 </header>
@@ -47,35 +63,35 @@
                         <table class="djn-items inline-related djn-table">
                             {% with inline_admin_formset.opts.sortable_field_name|default:"" as sortable_field_name %}
                                 <thead class="djn-module djn-thead">
-                                    <tr>
-                                        {% if context_data.is_sortable_active %}
-                                            <th class="original{% if sortable_field_name %} is-sortable{% endif %}"></th>
-                                        {% endif %}
-                                        {% for field in inline_admin_formset.fields %}
-                                            {% if not field.widget.is_hidden and not field|is_row_class_field %}
-                                                <th class="djn-th
+                                <tr>
+                                    {% if context_data.is_sortable_active %}
+                                        <th class="original{% if sortable_field_name %} is-sortable{% endif %}"></th>
+                                    {% endif %}
+                                    {% for field in inline_admin_formset.fields %}
+                                        {% if not field.widget.is_hidden and not field|is_row_class_field %}
+                                            <th class="djn-th
                                                     {{ field.label|lower|slugify }}{% if field.required %} required{% endif %}">
-                                                    <div class="flex items-center">
-                                                        <span class="mr-auto">{{ field.label|capfirst }}{% if field.required %}<span class="ml-4 text-negative">*</span>{% endif %}</span>
-                                                        {% if field.help_text %}&nbsp;
-                                                            <div class="ml-4">
-                                                                <div class="js-tooltip flex" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ field.help_text|striptags }}">
-                                                                    <svg class="w-12 h-12">
-                                                                        <use xlink:href="#Help"></use>
-                                                                    </svg>
-                                                                </div>
+                                                <div class="flex items-center">
+                                                    <span class="mr-auto">{{ field.label|capfirst }}{% if field.required %}<span class="ml-4 text-negative">*</span>{% endif %}</span>
+                                                    {% if field.help_text %}&nbsp;
+                                                        <div class="ml-4">
+                                                            <div class="js-tooltip flex" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ field.help_text|striptags }}">
+                                                                <svg class="w-12 h-12">
+                                                                    <use xlink:href="#Help"></use>
+                                                                </svg>
                                                             </div>
-                                                        {% endif %}
-                                                    </div>
-                                                </th>
-                                            {% endif %}
-                                        {% endfor %}
-                                        {% block table_inline_delete_table_head %}
-                                            {% if inline_admin_formset.formset.can_delete %}
-                                                <th class="djn-th sticky-table-head" style="min-width: 54px; width: 54px;"></th>
-                                            {% endif %}
-                                        {% endblock %}
-                                    </tr>
+                                                        </div>
+                                                    {% endif %}
+                                                </div>
+                                            </th>
+                                        {% endif %}
+                                    {% endfor %}
+                                    {% block table_inline_delete_table_head %}
+                                        {% if inline_admin_formset.formset.can_delete %}
+                                            <th class="djn-th sticky-table-head" style="min-width: 54px; width: 54px;"></th>
+                                        {% endif %}
+                                    {% endblock %}
+                                </tr>
                                 </thead>