django-smartbase-admin 1.0.4b1__py3-none-any.whl → 1.0.6b1__py3-none-any.whl

django_smartbase_admin/static/sb_admin/sprites/sb_admin/Bolt-one.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M9.33301 0.666992C9.70109 0.666992 9.99982 0.964968 10 1.33301V3.33301H11.9062C12.326 3.33301 12.667 3.67396 12.667 4.09375V8C12.667 10.3508 10.9283 12.2944 8.66699 12.6182V13.667C8.66717 13.851 8.816 14 9 14H12.667C13.035 14.0002 13.333 14.2989 13.333 14.667C13.3328 15.0349 13.0349 15.3328 12.667 15.333H9C8.07962 15.333 7.33318 14.5873 7.33301 13.667V12.6182C5.07169 12.2944 3.33301 10.3508 3.33301 8V4.09375C3.33301 3.67396 3.67396 3.33301 4.09375 3.33301H6V1.33301C6.00018 0.964968 6.29891 0.666992 6.66699 0.666992C7.03492 0.667168 7.33283 0.965076 7.33301 1.33301V3.33301H8.66699V1.33301C8.66717 0.965076 8.96508 0.667168 9.33301 0.666992Z"/>
+</svg>

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/sprites/sb_admin/Electric-drill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
+  <path d="M13.2324 2.33301C14.3942 2.33301 15.3119 3.31984 15.2275 4.47852L15.0332 7.14551C14.9681 8.03718 14.3245 8.75492 13.4863 8.94727L12.2637 12.3096C11.9673 13.1244 11.1922 13.667 10.3252 13.667C8.89441 13.6667 7.89871 12.2442 8.3877 10.8994L9.07812 9H6.66699C6.2988 9 6 8.7012 6 8.33301V8H4.66699C4.2988 8 4 7.7012 4 7.33301V6.33301H1.33301C0.965076 6.33283 0.667168 6.03492 0.666992 5.66699C0.666992 5.29891 0.964968 5.00018 1.33301 5H4V4C4 3.63181 4.2988 3.33301 4.66699 3.33301H6V3C6 2.63181 6.2988 2.33301 6.66699 2.33301H13.2324Z"/>
+</svg>

django_smartbase_admin/static/sb_admin/sprites/sb_admin/Fire-extinguisher.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
+  <path d="M12.5928 0.671065C12.7812 0.650124 12.97 0.710613 13.1113 0.83708C13.2524 0.963466 13.3329 1.14375 13.333 1.33317V3.33317C13.333 3.52279 13.2526 3.70378 13.1113 3.83024C12.97 3.95671 12.7812 4.0172 12.5928 3.99626L10.4668 3.75896C11.0049 4.35087 11.333 5.13709 11.333 6.00017V14.0002C11.333 14.7366 10.7364 15.3332 10 15.3332H6C5.26361 15.3332 4.66699 14.7366 4.66699 14.0002V6.00017C4.66699 4.88021 5.21938 3.88964 6.0664 3.28532C6.02513 3.1986 6 3.10255 6 3.00017V2.9904C5.6697 2.98428 5.3413 2.98304 5.00586 3.01774C4.46073 3.07417 4.06139 3.21514 3.80469 3.47185C3.52039 3.75622 3.40779 4.03137 3.3584 4.39274C3.3174 4.69289 3.32202 5.00932 3.32812 5.42888C3.33061 5.6 3.33301 5.78885 3.33301 6.00017C3.33296 6.36821 3.035 6.66698 2.66699 6.66716C2.29883 6.66716 2.00004 6.36832 2 6.00017C2 5.85022 1.99739 5.6977 1.99512 5.54509C1.98824 5.08366 1.98142 4.61972 2.03711 4.21208C2.11965 3.60825 2.34122 3.04957 2.8623 2.52849L2.97265 2.42497C3.53443 1.92869 4.24761 1.75587 4.86914 1.69157C5.24722 1.65247 5.64619 1.65209 6 1.65739C6.00505 1.29355 6.30195 1.00017 6.66699 1.00017H9.62793L12.5928 0.671065Z" />
+</svg>

django_smartbase_admin/static/sb_admin/sprites/sb_admin/Gas.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
+  <path d="M6.10938 0.731334C6.34199 0.620996 6.617 0.654442 6.81641 0.817272C6.90413 0.888933 7.00453 0.967898 7.11426 1.05458C7.77581 1.57716 8.78836 2.37637 9.55664 3.50184L9.72852 3.76844C10.1179 4.4092 10.4298 5.16757 10.6494 5.7909C10.6815 5.88195 10.7116 5.97126 10.7402 6.05751C10.8901 5.80473 11.0158 5.47972 11.0654 5.06337C11.0996 4.77773 11.3128 4.54621 11.5947 4.48915C11.8768 4.43209 12.1642 4.56231 12.3066 4.81239C12.506 5.16245 12.6424 5.40517 12.7754 5.70985C12.9058 6.00867 13.0285 6.35773 13.2178 6.92665L13.3545 7.36903C13.6361 8.35767 13.667 9.05813 13.667 9.69911C13.667 12.8691 11.1032 15.3329 8 15.3329C4.91611 15.3329 2.33301 12.9943 2.33301 9.80555C2.33303 9.10132 2.40767 8.00642 2.94141 7.13856L3.19727 6.74794C3.44 6.40253 3.64888 6.17909 3.88965 5.92079C3.98451 5.81902 4.08438 5.71185 4.19336 5.58973L4.42383 5.33387C4.54996 5.19507 4.62595 5.11209 4.70312 5.01161C4.80382 4.88049 4.90508 4.71844 5.10645 4.33973C5.26864 4.03459 5.42859 3.53274 5.54688 2.95301C5.66343 2.38176 5.72852 1.79062 5.72852 1.3329C5.72864 1.07559 5.87692 0.84168 6.10938 0.731334Z" />
+</svg>

django_smartbase_admin/static/sb_admin/sprites/sb_admin/Lightning-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" >
+  <path d="M12.333 0.666992C12.5882 0.666992 12.821 0.812485 12.9326 1.04199C13.0442 1.27153 13.0151 1.54444 12.8574 1.74512L10.0381 5.33301H13.667C13.9316 5.33314 14.1712 5.49005 14.2774 5.73242C14.3836 5.97499 14.3359 6.25757 14.1563 6.45215L6.15626 15.1191C5.94864 15.3438 5.615 15.3979 5.34669 15.251C5.07828 15.1039 4.94368 14.7931 5.02149 14.4971L6.46876 9H2.667C2.43385 9 2.2175 8.87809 2.09669 8.67871C1.97598 8.47921 1.9681 8.23101 2.07618 8.02441L5.74317 1.02441C5.85819 0.804833 6.08515 0.667113 6.33301 0.666992H12.333Z"/>
+</svg>

django_smartbase_admin/static/sb_admin/sprites/sb_admin/Printer.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <path d="M15.833 0.833008C16.2932 0.833008 16.667 1.20675 16.667 1.66699V7.5H18.333C18.7931 7.5 19.1668 7.87292 19.167 8.33301V15.833C19.167 16.2932 18.7932 16.667 18.333 16.667H16.25V18.333C16.25 18.7931 15.8771 19.1668 15.417 19.167H4.58301C4.12292 19.1668 3.75 18.7931 3.75 18.333V16.667H1.66699C1.20675 16.667 0.833008 16.2932 0.833008 15.833V8.33301C0.833184 7.87292 1.20686 7.5 1.66699 7.5H3.33301V1.66699C3.33301 1.20675 3.70675 0.833008 4.16699 0.833008H15.833ZM5.41699 17.5H14.583V14.167H5.41699V17.5ZM2.5 15H3.74219V13.333C3.74236 12.8729 4.11507 12.5 4.5752 12.5H15.4238C15.884 12.5 16.2567 12.8729 16.2568 13.333V15H17.5V9.16699H2.5V15ZM5 7.5H15V2.5H5V7.5Z"/>
+</svg>

django_smartbase_admin/static/sb_admin/sprites/sb_admin/Pull.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M7.87207 1.34674C7.95631 1.33032 8.04269 1.33045 8.12695 1.34674C8.15048 1.35128 8.17274 1.35932 8.19531 1.36627C8.21547 1.37246 8.23625 1.37668 8.25586 1.38482C8.27616 1.39328 8.29425 1.40573 8.31348 1.41607C8.33203 1.42605 8.3514 1.43449 8.36914 1.44635C8.40571 1.47077 8.4407 1.4974 8.47168 1.52838L10.4717 3.52838C10.732 3.78873 10.732 4.21139 10.4717 4.47174C10.2113 4.73209 9.78867 4.73209 9.52832 4.47174L8.66699 3.60943V10.1797C9.06499 10.4104 9.33289 10.84 9.33301 11.3331C9.33301 11.3675 9.33069 11.4018 9.32812 11.4356H14C14.3681 11.4356 14.6668 11.7336 14.667 12.1016V14.0001L14.6533 14.1348C14.591 14.4384 14.322 14.6671 14 14.6671H2C1.67796 14.6671 1.40898 14.4384 1.34668 14.1348L1.33301 14.0001V12.1016C1.33318 11.7336 1.63192 11.4356 2 11.4356H6.67188C6.66931 11.4018 6.66699 11.3675 6.66699 11.3331C6.66711 10.84 6.93501 10.4104 7.33301 10.1797V3.60943L6.47168 4.47174C6.21133 4.73209 5.78867 4.73209 5.52832 4.47174C5.26797 4.21139 5.26797 3.78873 5.52832 3.52838L7.52832 1.52838C7.55911 1.49759 7.59357 1.47067 7.62988 1.44635C7.6476 1.43448 7.66702 1.42606 7.68555 1.41607C7.70475 1.40571 7.72289 1.3933 7.74316 1.38482C7.76275 1.37666 7.78357 1.37249 7.80371 1.36627C7.82627 1.35929 7.84856 1.35132 7.87207 1.34674Z" />
+</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 %}