{% extends "admin/change_list.html" %}
{% load i18n admin_urls static admin_list %}

{% block object-tools-items %}
    <li>
        <a href="#" onclick="exportSelectedRegistrations(event)" class="export-button grp-state-focus">
            Export Selected
        </a>
    </li>
    {{ block.super }}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <style>
        .export-button {
            background: #4361ee !important;
            color: white !important;
            padding: 8px 16px !important;
            border-radius: 4px !important;
            text-decoration: none !important;
            display: inline-block !important;
            margin-right: 8px !important;
            transition: background-color 0.2s !important;
        }
        
        .export-button:hover {
            background: #3651d4 !important;
        }
        
        #result_list tbody tr.selected {
            background-color: #e8f0fe !important;
        }
    </style>
    <script>
        function exportSelectedRegistrations(e) {
            e.preventDefault();
            
            // Get all selected checkboxes
            const selectedBoxes = document.querySelectorAll('input[name="_selected_action"]:checked');
            
            if (selectedBoxes.length === 0) {
                alert('Please select at least one registration to export.');
                return;
            }
            
            // Create a form and submit it
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = window.location.pathname;
            
            // Add CSRF token
            const csrfToken = document.querySelector('[name="csrfmiddlewaretoken"]').value;
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = 'csrfmiddlewaretoken';
            csrfInput.value = csrfToken;
            form.appendChild(csrfInput);
            
            // Add action
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = 'export_as_csv';
            form.appendChild(actionInput);
            
            // Add selected items
            selectedBoxes.forEach(box => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = '_selected_action';
                input.value = box.value;
                form.appendChild(input);
            });
            
            document.body.appendChild(form);
            form.submit();
        }
        
        // Highlight selected rows
        document.addEventListener('DOMContentLoaded', function() {
            const checkboxes = document.querySelectorAll('input[name="_selected_action"]');
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const row = this.closest('tr');
                    if (this.checked) {
                        row.classList.add('selected');
                    } else {
                        row.classList.remove('selected');
                    }
                });
            });
        });
    </script>
{% endblock %}