{% if selectable and bulk_actions %}
<div
    x-show="selected.length > 0"
    x-cloak
    x-transition
    class="flex items-center gap-3"
>

    <span class="text-sm font-medium text-slate-600">

        <span
            class="mr-1 inline-flex h-6 min-w-6 items-center justify-center rounded-full bg-indigo-100 px-1.5 text-xs font-bold text-indigo-700"
            x-text="selected.length"
        ></span>

        Selected

    </span>


    <form
        method="post"
        action="{{ table_url }}"
        class="flex items-center gap-2"
        hx-indicator="#{{ table_id }}-loader"
        @htmx:confirm="handleConfirm"
    >

        {% csrf_token %}

        <template
            x-for="id in selected"
            :key="id"
        >
            <input
                type="hidden"
                name="{{ objects_parameter }}"
                :value="id"
            >
        </template>


        <select
            required
            name="action"
            class="h-9 rounded-lg border border-slate-200 bg-slate-50 px-3 text-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
        >

            <option value="" disabled selected>
                Choose action
            </option>

            {% for action in bulk_actions %}
                <option value="{{ action.name }}">
                    {{ action.label }}
                </option>
            {% endfor %}

        </select>


        <button
            type="submit"
            class="btn btn-sm btn-primary"
            :disabled="selected.length === 0"
        >
            Apply
        </button>

    </form>

</div>
{% endif %}