django-smartbase-admin 0.2.47__py3-none-any.whl → 1.0.38__py3-none-any.whl

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' %}"
@@ -23,96 +25,106 @@
 {% endblock %}
 
 {% block content %}
-    {% block form_modal %}
-        {% include 'sb_admin/partials/modal/modal.html' %}
-    {% endblock %}
     {% get_tabular_context adminform inline_admin_formsets tabs_context as tabular_context %}
 
     {% block header %}
-        <div class="detail-view-header py-16 md:pb-32 flex items-center max-xs:px-20 w-full max-w-1180 mx-auto">
-            {% 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 p-0 w-40 mr-16">
-                    <svg class="w-20 h-20">
-                        <use xlink:href="#Left-small"></use>
-                    </svg>
-                </a>
-            {% endif %}
-            <h1 class="text-24 md:text-30 text-dark-900 font-bold font-heading line-clamp-1 first-letter:uppercase">
-                {% include 'sb_admin/includes/change_form_title.html' %}
-            </h1>
-            {% if change and not is_popup %}
-                <ul class="detail-view-actions flex ml-auto gap-8 md:gap-16">
-                    <li class="relative md:hidden">
-                        <button
-                            data-bs-toggle="dropdown"
-                            aria-expanded="false"
-                            data-bs-popper-placement="bottom-end"
-                            class="btn btn-empty btn-icon">
-                            <svg class="w-16 h-16">
-                                <use xlink:href="#More"></use>
-                            </svg>
-                            <span></span>
-                        </button>
-                        <div class="dropdown-menu w-248 max-h-432">
-                            <ul>
-                                {% block dropdown_actions %}
-                                    {% if detail_actions %}
-                                        {% for action in detail_actions %}
-                                            <li>
-                                                <a {% if action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' %}{% endif %} href="{{ action.url }}" class="dropdown-menu-link {{ action.css_class|default_if_none:'' }}">
-                                                    {{ action.title }}
-                                                </a>
-                                            </li>
-                                        {% endfor %}
-                                    {% endif %}
+        {% if sbadmin_is_modal %}
+            <div class="modal-header">
+                <h3 class="text-dark-900 text-18 font-semibold leading-28">
+                    {% include 'sb_admin/includes/change_form_title.html' %}
+                </h3>
+                <svg data-bs-dismiss="modal" aria-label="Close"
+                     class="w-24 h-24 absolute top-16 right-16 cursor-pointer transition-transform hover:rotate-90">
+                    <use xlink:href="#Close-small"></use>
+                </svg>
+            </div>
+        {% else %}
+            <div class="detail-view-header py-16 md:pb-32 flex items-center max-xs:px-20 w-full max-w-1180 mx-auto">
+                {% if not is_popup and has_view_permission and show_back_button %}
+                    {% url opts|admin_urlname:'changelist' as changelist_url %}
+                    <a href="{% add_preserved_filters back_url %}" class="btn p-0 w-40 mr-16">
+                        <svg class="w-20 h-20">
+                            <use xlink:href="#Left-small"></use>
+                        </svg>
+                    </a>
+                {% endif %}
+                <h1 class="text-24 md:text-30 text-dark-900 font-bold font-heading line-clamp-1 first-letter:uppercase">
+                    {% include 'sb_admin/includes/change_form_title.html' %}
+                </h1>
+                {% if change and not is_popup %}
+                    <ul class="detail-view-actions flex ml-auto gap-8 md:gap-16">
+                        <li class="relative md:hidden">
+                            <button
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                                data-bs-popper-placement="bottom-end"
+                                class="btn btn-empty btn-icon">
+                                <svg class="w-16 h-16">
+                                    <use xlink:href="#More"></use>
+                                </svg>
+                                <span></span>
+                            </button>
+                            <div class="dropdown-menu w-248 max-h-432">
+                                <ul>
+                                    {% block dropdown_actions %}
+                                        {% if detail_actions %}
+                                            {% for action in detail_actions %}
+                                                <li>
+                                                    <a {% if action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' %}{% endif %} href="{{ action.url }}" class="dropdown-menu-link {{ action.css_class|default_if_none:'' }}">
+                                                        {{ action.title }}
+                                                    </a>
+                                                </li>
+                                            {% endfor %}
+                                        {% endif %}
 
-                                    <li>
-                                        {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
-                                        <a href="{% add_preserved_filters history_url %}" class="dropdown-menu-link">{% trans "History" %}</a>
-                                    </li>
-                                {% endblock %}
-                            </ul>
-                        </div>
-                    </li>
+                                        <li>
+                                            {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
+                                            <a href="{% add_preserved_filters history_url %}" class="dropdown-menu-link">{% trans "History" %}</a>
+                                        </li>
+                                    {% endblock %}
+                                </ul>
+                            </div>
+                        </li>
 
 
-                    {% block actions %}
-                        <li class="max-sm:hidden">
-                            {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
-                            <a href="{% add_preserved_filters history_url %}" class="btn btn-empty">{% trans "History" %}</a>
-                        </li>
+                        {% block actions %}
+                            <li class="max-sm:hidden">
+                                {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
+                                <a href="{% add_preserved_filters history_url %}" class="btn btn-empty">{% trans "History" %}</a>
+                            </li>
 
-                        {% if detail_actions %}
-                            {% for action in detail_actions %}
-                                <li class="max-sm:hidden">
-                                    <a {% if action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' %}{% endif %} href="{{ action.url }}" class="btn btn-empty {{ action.css_class|default_if_none:'' }}">
-                                        {{ action.title }}
-                                    </a>
-                                </li>
-                            {% endfor %}
+                            {% if detail_actions %}
+                                {% for action in detail_actions %}
+                                    <li class="max-sm:hidden">
+                                        <a {% if action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' %}{% endif %} href="{{ action.url }}" class="btn btn-empty {{ action.css_class|default_if_none:'' }}">
+                                            {{ action.title }}
+                                        </a>
+                                    </li>
+                                {% endfor %}
+                            {% endif %}
+                        {% endblock %}
+                        {% if has_absolute_url %}
+                            <li>
+                                <a href="{{ absolute_url }}" class="btn btn-icon">
+                                    <svg class="w-20 h-20 md:mr-8">
+                                        <use xlink:href="#Preview-open"></use>
+                                    </svg>
+                                    <span>
+                                        {% trans "View on site" %}
+                                    </span>
+                                </a>
+                            </li>
                         {% endif %}
-                    {% endblock %}
-                    {% if has_absolute_url %}
-                        <li>
-                            <a href="{{ absolute_url }}" class="btn btn-icon">
-                                <svg class="w-20 h-20 md:mr-8">
-                                    <use xlink:href="#Preview-open"></use>
-                                </svg>
-                                <span>
-                                    {% trans "View on site" %}
-                                </span>
-                            </a>
-                        </li>
-                    {% endif %}
-                </ul>
-            {% endif %}
-        </div>
+                    </ul>
+                {% endif %}
+            </div>
+        {% endif %}
     {% endblock %}
 
     {% 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="flex flex-col{% if sbadmin_is_modal %} min-h-0{% else %} detail-view-form flex-grow w-full max-w-1180 mx-auto{% endif %}" novalidate>
+        <div{% if sbadmin_is_modal %} class="modal-body"{% endif %}>
             {% csrf_token %}
             {% if errors %}
                 <div class="alert bg-negative-50 border border-negative-100 text-negative-900 mb-24">
@@ -136,8 +148,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>
@@ -145,7 +157,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">
@@ -153,7 +165,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 %}
@@ -172,11 +184,13 @@
                             <div class="lg:flex-shrink-0 w-full lg:w-370 empty:hidden">
                                 {% 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 %}
-                                                {% include "sb_admin/includes/fieldset.html" %}
-                                            {% endif %}
-                                        {% endwith %}
+                                        {% block tab_content_fieldset_right %}
+                                            {% with tab_content.value as fieldset %}
+                                                {% if DETAIL_STRUCTURE_RIGHT_CLASS in fieldset.classes and not sbadmin_is_modal %}
+                                                    {% include "sb_admin/includes/fieldset.html" %}
+                                                {% endif %}
+                                            {% endwith %}
+                                        {% endblock %}
                                     {% endif %}
                                 {% endfor %}
                             </div>
@@ -194,41 +208,79 @@
                     {% 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="modal-footer">
+                    {% if original %}
+                        {% url opts|admin_urlname:'change' original.pk|admin_urlquote as post_url %}
+                    {% else %}
+                        {% url opts|admin_urlname:'add' as post_url %}
+                    {% endif %}
+                    {% if has_change_permission %}
+                        <button
+                                form="{% if sbadmin_is_modal %}modal_{% endif %}{{ opts.model_name }}_form"
+                                hx-post="{{ post_url }}"
+                                hx-target="#sb-admin-modal"
+                                hx-swap="innerHTML"
+                                hx-select="#modal-content"
+                                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>
+                    {% endif %}
+                    <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 and show_back_button %}
+                                    <a href="{% add_preserved_filters back_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/actions/dashboard.html

@@ -2,8 +2,8 @@
 {% load i18n sb_admin_tags %}
 
 {% block content %}
-    <div class="w-full max-w-1180 mx-auto">
-        {% for widget in sub_views %}
+    <div class="w-full max-w-1180 mx-auto dashboard-wrapper">
+        {% for widget in direct_sub_views %}
             {% render_widget widget request %}
         {% endfor %}
     </div>

django_smartbase_admin/templates/sb_admin/actions/delete_selected_confirmation.html

@@ -9,39 +9,63 @@
 
 {% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation delete-selected-confirmation{% endblock %}
 
-{% block breadcrumbs %}
-<div class="breadcrumbs">
-<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
-&rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
-&rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
-&rsaquo; {% translate 'Delete multiple objects' %}
-</div>
-{% endblock %}
 
 {% block content %}
-{% if perms_lacking %}
-    <p>{% blocktranslate %}Deleting the selected {{ objects_name }} would result in deleting related objects, but your account doesn't have permission to delete the following types of objects:{% endblocktranslate %}</p>
-    <ul>{{ perms_lacking|unordered_list }}</ul>
-{% elif protected %}
-    <p>{% blocktranslate %}Deleting the selected {{ objects_name }} would require deleting the following protected related objects:{% endblocktranslate %}</p>
-    <ul>{{ protected|unordered_list }}</ul>
-{% else %}
-    <p>{% blocktranslate %}Are you sure you want to delete the selected {{ objects_name }}? All of the following objects and their related items will be deleted:{% endblocktranslate %}</p>
-    {% include "admin/includes/object_delete_summary.html" %}
-    <h2>{% translate "Objects" %}</h2>
-    {% for deletable_object in deletable_objects %}
-        <ul>{{ deletable_object|unordered_list }}</ul>
-    {% endfor %}
-    <form method="post">{% csrf_token %}
-    <div>
-    {% for obj in queryset %}
-    <input type="hidden" name="{{ action_checkbox_name }}" value="{{ obj.pk|unlocalize }}">
-    {% endfor %}
-    <input type="hidden" name="action" value="delete_selected">
-    <input type="hidden" name="post" value="yes">
-    <input type="submit" value="{% translate 'Yes, I’m sure' %}">
-    <a href="#" class="button cancel-link">{% translate "No, take me back" %}</a>
+    <div class="py-16 md:pb-32 max-xs:px-20">
+        <h1 class="text-24 md:text-30 text-dark-900 font-bold font-heading line-clamp-1 first-letter:uppercase">
+            {% blocktrans %}Delete {{ object }}{% endblocktrans %}
+        </h1>
+        {% if perms_lacking %}
+            <p class="mt-8">{% blocktranslate %}Deleting the selected {{ objects_name }} would result in deleting related objects, but your account doesn't have permission to delete the following types of objects:{% endblocktranslate %}</p>
+        {% elif protected %}
+            <p class="mt-8">{% blocktranslate %}Deleting the selected {{ objects_name }} would require deleting the following protected related objects:{% endblocktranslate %}</p>
+        {% else %}
+            <p class="mt-8">{% blocktranslate %}Are you sure you want to delete the selected {{ objects_name }}? All of the following objects and their related items will be deleted:{% endblocktranslate %}</p>
+        {% endif %}
     </div>
-    </form>
-{% endif %}
+    {% if perms_lacking %}
+        <div class="card">
+            <ul id="deleted-objects">{{ perms_lacking|unordered_list }}</ul>
+        </div>
+    {% elif protected %}
+        <div class="card">
+            <ul id="deleted-objects">{{ protected|unordered_list }}</ul>
+        </div>
+    {% else %}
+        <div class="card mb-24">
+            <header class="mb-24">
+                <span class="text-dark-900">{% translate "Summary" %}</span>
+            </header>
+
+            <ul>
+                {% for model_name, object_count in model_count %}
+                    <li>{{ model_name|capfirst }}: {{ object_count }}</li>
+                {% endfor %}
+            </ul>
+
+            <h2>{% trans "Objects" %}</h2>
+            {% for deletable_object in deletable_objects %}
+                <ul>{{ deletable_object|unordered_list }}</ul>
+            {% endfor %}
+            <ul>{{ deleted_objects|unordered_list }}</ul>
+        </div>
+
+        <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>
+                <form method="post" class="flex ml-auto gap-8">
+                    {% csrf_token %}
+                    {% for obj in queryset %}
+                        <input type="hidden" name="{{ action_checkbox_name }}" value="{{ obj.pk|unlocalize }}">
+                    {% endfor %}
+                    <input type="hidden" name="action" value="delete_selected">
+                    <input type="hidden" name="post" value="yes">
+                    <a href="#" class="btn btn-empty cancel-link">{% trans "No, take me back" %}</a>
+                    <input type="submit" class="btn btn-destructive" value="{% trans 'Yes, I’m sure' %}">
+                </form>
+            </div>
+        </div>
+    {% endif %}
 {% endblock %}

django_smartbase_admin/templates/sb_admin/actions/list.html

@@ -4,45 +4,82 @@
 {% block view_class %}change-list{% endblock %}
 
 {% block content %}
-    {% block form_modal %}
-        {% include 'sb_admin/partials/modal/modal.html' %}
-    {% endblock %}
     {% block page_header %}
-        <div class="list-view-header py-16 md:pb-32 flex items-center max-xs:px-20">
-            <h1 class="text-24 md:text-30 text-dark-900 font-bold font-heading line-clamp-1 first-letter:uppercase">{{ list_title|capfirst }}</h1>
-            <ul class="ml-auto flex gap-8 md:gap-16">
-                <li class="relative md:hidden">
-                    <button
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false"
-                        data-bs-popper-placement="bottom-end"
-                        class="btn btn-empty btn-icon">
-                        <svg class="w-16 h-16">
-                            <use xlink:href="#More"></use>
-                        </svg>
-                        <span></span>
-                    </button>
-                    <div class="dropdown-menu w-248 max-h-432">
-                        <ul>
-                            {% block dropdown_actions %}
-                                {% for list_action in content_context.list_actions %}
-                                    <li>
-                                        <a {% if list_action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' with action=list_action %} hx-vals="js:{params: window.SBAdminTable['{{ view_id }}'].getAllUrlParams()}" {% else %}onclick="window.SBAdminTable['{{ view_id }}'].executeListAction('{{ list_action.url }}', {{ list_action.no_params|yesno:'true,false' }})"{% endif %}
-                                            class="dropdown-menu-link {{ list_action.css_class|default_if_none:'' }}">{{ list_action.title }}</a>
-                                    </li>
-                                {% endfor %}
-                            {% endblock %}
-                        </ul>
-                    </div>
-                </li>
+        <div class="list-view-header py-16 md:pb-32 flex flex-wrap items-center max-xs:px-20 gap-x-16 gap-y-8">
+            {% block heading %}
+                <h1 class="text-24 md:text-30 text-dark-900 font-bold font-heading line-clamp-1 first-letter:uppercase">{{ list_title|capfirst }}</h1>
+            {% endblock %}
+            <ul class="ml-auto flex flex-wrap gap-8 md:gap-16">
+                {% if content_context.list_actions %}
+                    <li class="relative md:hidden">
+                        <button
+                                data-bs-toggle="dropdown"
+                                aria-expanded="false"
+                                data-bs-popper-placement="bottom-end"
+                                class="btn btn-empty btn-icon">
+                            <svg class="w-16 h-16">
+                                <use xlink:href="#More"></use>
+                            </svg>
+                            <span></span>
+                        </button>
+                        <div class="dropdown-menu w-248 max-h-432">
+                            <ul>
+                                {% block dropdown_actions %}
+                                    {% for list_action in content_context.list_actions %}
+                                        {% if not list_action.sub_actions %}
+                                            <li>
+                                                {% include "sb_admin/actions/partials/action_link.html" with action=list_action view_id=view_id extra_classes="dropdown-menu-link items-center" %}
+                                            </li>
+                                        {% endif %}
+                                    {% endfor %}
+                                    <script>
+                                        (function(){
+                                            if(document.currentScript && !document.currentScript.previousElementSibling) {
+                                                const li = document.currentScript.closest('li');
+                                                if(li) {
+                                                    li.classList.add('hidden');
+                                                }
+                                            }
+                                        }());
+                                    </script>
+                                {% endblock %}
+                            </ul>
+                        </div>
+                    </li>
+                {% endif %}
 
                 {% block actions %}
                     {% for list_action in content_context.list_actions %}
-                        <li class="max-sm:hidden">
-                            <button {% if list_action.open_in_modal %}{% include 'sb_admin/actions/partials/open_modal_attrs.html' with action=list_action %} hx-vals="js:{params: window.SBAdminTable['{{ view_id }}'].getAllUrlParams()}" {% else %}onclick="window.SBAdminTable['{{ view_id }}'].executeListAction('{{ list_action.url }}', {{ list_action.no_params|yesno:'true,false' }})"{% endif %}
-                                    class="btn btn-empty {{ list_action.css_class|default_if_none:'' }}">{{ list_action.title }}
+                        {% if list_action.sub_actions %}
+                            <button
+                                    data-bs-toggle="dropdown"
+                                    aria-expanded="false"
+                                    data-bs-popper-placement="bottom-end"
+                                    class="btn btn-icon">
+                                {% if list_action.icon %}
+                                    <svg class="w-16 h-16 md:mr-8">
+                                        <use xlink:href="#{{ list_action.icon }}"></use>
+                                    </svg>
+                                {% endif %}
+                                <span>{{ list_action.title }}</span>
+                                <svg class="w-16 h-16 ml-4 max-sm:hidden">
+                                    <use xlink:href="#Down"></use>
+                                </svg>
                             </button>
-                        </li>
+                            <div class="dropdown-menu max-h-432">
+                                <ul>
+                                    {% for list_sub_action in list_action.sub_actions %}
+                                        <li>
+                                            {% include list_action.template with action=list_sub_action view_id=view_id extra_classes="dropdown-menu-link" %}
+                                        </li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        {% else %}
+                            <li class="max-sm:hidden">
+                                {% include list_action.template with action=list_action view_id=view_id extra_classes="btn btn-empty" %}
+                            </li>
+                        {% endif %}
                     {% endfor %}
                 {% endblock %}
                 {% if content_context.new_url %}
@@ -51,7 +88,7 @@
                             <svg class="w-20 h-20 md:mr-8">
                                 <use xlink:href="#Plus"></use>
                             </svg>
-                            <span>{% trans 'Add' %} {{ model_name }}</span>
+                            <span>{% trans 'Add' %}{% if add_label %} {{ add_label }}{% endif %}</span>
                         </a>
                     </li>
                 {% endif %}
@@ -65,16 +102,16 @@
                 {% include content_context.tabulator_header_template_name %}
             {% endblock %}
             {% block tabulator_body %}
-            <div id="{{ view_id }}-table" class="list-view-table"></div>
+                <div id="{{ view_id }}-table" class="list-view-table"></div>
             {% endblock %}
             {% block tabulator_custom_footer %}
-            <div class="tabulator-custom-footer">
-                <div class="flex items-center">
-                    <div class="mr-16 max-sm:hidden">{% trans 'For page' %}</div>
-                    <div id="{{ view_id }}-page-size-widget"></div>
+                <div class="tabulator-custom-footer">
+                    <div class="flex items-center">
+                        <div class="mr-16 max-sm:hidden">{% trans 'For page' %}</div>
+                        <div id="{{ view_id }}-page-size-widget"></div>
+                    </div>
+                    <div id="{{ view_id }}-pagination-widget" class="ml-auto flex items-center"></div>
                 </div>
-                <div id="{{ view_id }}-pagination-widget" class="ml-auto flex items-center"></div>
-            </div>
             {% endblock %}
         </div>
     {% endblock %}