{# Bulk actions toolbar - shown when items are selected #}
{% if has_bulk_actions %}
<div x-data="bulkActions()"
     x-show="selectedIds.length > 0"
     x-cloak
     class="bg-primary-50 border border-primary-200 rounded-xl p-3 mb-4 flex items-center gap-4">

    <span class="text-sm font-medium text-primary-800">
        <span x-text="selectedIds.length"></span> seleccionado(s)
    </span>

    <div class="flex gap-2">
        {% for action in bulk_actions %}
        <button type="button"
                @click="performAction('{{ action.name }}', '{{ action.confirm }}')"
                class="text-sm font-medium px-3 py-1.5 rounded-lg hover:bg-primary-100 transition-colors {{ action.css_class|default:'text-primary-700' }}">
            {% if action.icon %}
            <svg class="w-4 h-4 inline-block mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {% if action.icon == 'download' %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                {% elif action.icon == 'trash' %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                {% elif action.icon == 'check' %}
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                {% endif %}
            </svg>
            {% endif %}
            {{ action.label }}
        </button>
        {% endfor %}
    </div>

    <button type="button" @click="clearSelection()"
            class="ml-auto text-sm text-gray-500 hover:text-gray-700">
        Cancelar
    </button>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('bulkActions', () => ({
        selectedIds: [],

        init() {
            // Listen for checkbox changes
            this.$watch('selectedIds', () => {});
        },

        toggle(id) {
            const idx = this.selectedIds.indexOf(id);
            if (idx > -1) {
                this.selectedIds.splice(idx, 1);
            } else {
                this.selectedIds.push(id);
            }
        },

        toggleAll(checked, ids) {
            this.selectedIds = checked ? [...ids] : [];
        },

        isSelected(id) {
            return this.selectedIds.includes(id);
        },

        clearSelection() {
            this.selectedIds = [];
            // Uncheck all checkboxes
            document.querySelectorAll('input[name="row_select"]').forEach(cb => {
                cb.checked = false;
            });
        },

        performAction(actionName, confirmMsg) {
            if (confirmMsg && !confirm(confirmMsg)) return;

            const form = document.createElement('form');
            form.method = 'POST';
            form.style.display = 'none';

            const csrf = document.createElement('input');
            csrf.name = 'csrfmiddlewaretoken';
            csrf.value = document.querySelector('[name=csrfmiddlewaretoken]').value;
            form.appendChild(csrf);

            const actionInput = document.createElement('input');
            actionInput.name = 'bulk_action';
            actionInput.value = actionName;
            form.appendChild(actionInput);

            this.selectedIds.forEach(id => {
                const input = document.createElement('input');
                input.name = 'selected_ids';
                input.value = id;
                form.appendChild(input);
            });

            document.body.appendChild(form);
            htmx.ajax('POST', window.location.pathname, {source: form, target: '#list-content'});
            form.remove();
            this.clearSelection();
        }
    }));
});
</script>
{% endif %}