{% load i18n %}

<div class="actions flex flex-col mb-3 md:flex-row md:items-center lg:mb-0">
    {% block actions %}
        <div class="flex">
            {% block actions-form %}
                {% for field in action_form %}
                    {% if field.label %}
                        <label>
                            {{ field.label }}
                    {% endif %}

                    {{ field }}

                    {% if field.label %}
                        </label>
                    {% endif %}
                {% endfor %}
            {% endblock %}

            {% block actions-submit %}
                <button type="submit" class="bg-white border flex items-center h-9.5 ml-1 px-2 rounded shadow-sm text-gray-400 w-9.5 hover:text-gray-700 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
                    <span class="material-symbols-outlined md-18">chevron_left</span>
                </button>
            {% endblock %}
        </div>

        {% block actions-counter %}
            {% if actions_selection_counter %}
                <div class="hidden md:block">
                    <span class="action-counter ml-4 text-sm text-gray-500 dark:text-gray-400" data-actions-icnt="{{ cl.result_list|length }}">
                        {{ selection_note }}
                    </span>

                    {% if cl.result_count != cl.result_list|length %}
                        <span class="all hidden ml-4 text-gray-500 text-sm">
                            {{ selection_note_all }}
                        </span>

                        <span class="question hidden ml-4 text-primary-600 text-sm underline">
                            <a href="#" title="{% translate "Click here to select the objects across all pages" %}">
                                {% blocktranslate with cl.result_count as total_count %}Select all {{ total_count }} {{ module_name }}{% endblocktranslate %}
                            </a>
                        </span>

                        <span class="clear hidden ml-4 text-sm text-red-600 underline">
                            <a href="#">
                                {% translate "Clear selection" %}
                            </a>
                        </span>
                    {% endif %}
                </div>
            {% endif %}
        {% endblock %}
    {% endblock %}
</div>