{% load i18n admin_urls %}

<div {% if not is_popup %}id="submit-row"{% endif %} class="relative z-20 {% if not is_popup %} mt-20 lg:mt-8{% endif %}">
    <div class="{% if not is_popup %}bottom-0 fixed left-0 right-0 xl:left-72{% endif %}" :class="{'xl:left-0': !sidebarDesktopOpen}">
        <div class="bg-white dark:bg-gray-900 {% if not is_popup %}border-t px-4 py-4 relative scrollable-top lg:px-12 dark:border-gray-800{% endif %}">
            <div class="container flex flex-col-reverse gap-3 items-center mx-auto lg:flex-row-reverse">
                {% block submit-row %}
                    {% if show_save %}
                        <button type="submit" name="_save" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-md text-sm text-white w-full lg:w-auto">
                            {% translate 'Save' %}
                        </button>
                    {% endif %}

                    {% for action in actions_submit_line %}
                        <button type="submit" name="{{ action.action_name }}" class="border font-medium px-3 py-2 rounded-md text-sm text-gray-500 transition-all  w-full hover:bg-gray-50 lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                            {{ action.description }}
                        </button>
                    {% endfor %}

                    {% if show_save_and_continue %}
                        <button type="submit" name="_continue" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                            {% if can_change %}
                                {% translate 'Save and continue editing' %}
                            {% else %}
                                {% translate 'Save and view' %}
                            {% endif %}
                        </button>
                    {% endif %}

                    {% if show_close %}
                        <a href="{% url opts|admin_urlname:'changelist' %}" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                            {% translate 'Close' %}
                        </a>
                    {% endif %}

                    {% if show_save_and_add_another %}
                        <button type="submit" name="_addanother" class="border font-medium hidden px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 lg:block lg:w-auto dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                            {% translate 'Save and add another' %}
                        </button>
                    {% endif %}

                    {% if show_save_as_new %}
                        <button type="submit" name="_saveasnew" class="border font-medium px-3 py-2 rounded-md text-sm text-gray-500 transition-all w-full hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-900">
                            {% translate 'Save as new' %}
                        </button>
                    {% endif %}

                    {% if show_delete_link and original %}
                        {% url opts|admin_urlname:'delete' original.pk|admin_urlquote as delete_url %}

                        <p class="deletelink-box mr-auto w-full lg:w-auto">
                            <a href="{% add_preserved_filters delete_url %}" class="block border border-red-500 font-medium px-3 py-2 rounded-md text-center text-sm text-red-500 whitespace-nowrap dark:border-transparent dark:bg-red-500/20 dark:text-red-500">
                                {% translate "Delete" %} {{ opts.verbose_name }}
                            </a>
                        </p>
                    {% endif %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>
