{% load unfold unfold_list i18n %}

<div class="flex flex-row grow items-center lg:h-[64px] {% if not cl.model_admin.list_fullwidth %}container mx-auto{% endif %}">
    {% if cl.paginator.template_name %}
        {% include cl.paginator.template_name %}
    {% else %}
        {% include "unfold/helpers/pagination_default.html" %}
    {% endif %}

    {% if show_all_url %}
        <a href="{{ show_all_url }}" class="showall ml-4 text-primary-600 dark:text-primary-500">
            {% translate 'Show all' %}
        </a>
    {% endif %}

    {% if cl.formset and cl.result_count %}
        <div class="ml-auto">
        <button
            type="submit"
            name="_save"
            form="changelist-form"
            x-data="{ loading: false }"
            @click.prevent="loading = true; $nextTick(() => $el.form.submit())"
            :disabled="loading"
            class="bg-primary-600 block border border-transparent cursor-pointer font-medium px-3 py-2 rounded-default text-white w-full flex items-center justify-center"
        >
            <span x-show="loading" class="flex items-center">
                <style>
                @keyframes spin {
                    to {
                    transform: rotate(360deg);
                    }
                }
                </style>
                <svg
                style="animation: spin 1s linear infinite"
                class="h-4 w-4 mr-2"
                viewBox="0 0 24 24"
                fill="none"
                >
                <circle
                    cx="12"
                    cy="12"
                    r="10"
                    stroke="currentColor"
                    stroke-width="4"
                    opacity="0.2"
                />
                <path
                    d="M12 2a10 10 0 0 1 10 10"
                    stroke="currentColor"
                    stroke-width="4"
                    stroke-linecap="round"
                />
                </svg>
            </span>
            <span x-show="!loading">{% translate 'Save' %}</span>
        </button>
        </div>
    {% endif %}
</div>
