{% load i18n %}

{% load i18n %}

<div class="actions flex flex-col md:flex-row items-center justify-between p-3 mb-8 bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border border-slate-200/60 dark:border-slate-800/60 rounded-2xl shadow-sm transition-all duration-300 gap-4 relative z-50" id="custom-actions-container">
    {% block actions %}
    <div class="flex flex-wrap items-center gap-6">
        {% block actions-form %}
        <div class="flex items-center gap-4">
            {% for field in action_form %}
                {% if field.name == 'action' %}
                    <div class="relative custom-select-root" data-select-name="{{ field.name }}">
                        <!-- Hidden Native Select (Used by actions.js) -->
                        <div class="hidden-native-select" style="display: none !important;">
                            {{ field }}
                        </div>

                        <!-- Custom UI Trigger -->
                        <div class="relative w-[300px]">
                            <button type="button" class="custom-select-trigger w-full flex items-center justify-between px-4 py-2.5 bg-slate-50/50 dark:bg-slate-900/40 border border-slate-200/60 dark:border-slate-700/60 rounded-xl text-[13px] font-semibold text-slate-700 dark:text-slate-200 hover:border-slate-300 dark:hover:border-slate-600 focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500/50 transition-all text-left shadow-sm">
                                <span class="flex items-center gap-3">
                                    <svg class="w-4 h-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16m-7 6h7" />
                                    </svg>
                                    <span class="selected-label truncate">{% translate "Select an action" %}</span>
                                </span>
                                <svg class="w-4 h-4 text-slate-400 transition-transform duration-200 trigger-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>

                            <!-- Custom Dropdown Menu (Style changed to hidden by default for fixed positioning) -->
                            <style>
                                .custom-select-menu {
                                    position: fixed;
                                    z-index: 2000;
                                    background: white;
                                    border: 1px solid rgba(0,0,0,0.05);
                                    border-radius: 16px;
                                    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
                                    opacity: 0;
                                    transform: scale(0.95);
                                    pointer-events: none;
                                    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                                    overflow: hidden;
                                }
                                [data-theme="dark"] .custom-select-menu {
                                    background: #1e293b;
                                    border-color: rgba(255,255,255,0.05);
                                    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
                                }
                                .custom-select-menu.open {
                                    opacity: 1;
                                    transform: scale(1);
                                    pointer-events: auto;
                                }
                            </style>
                            <div class="custom-select-menu">
                                <div class="max-h-64 overflow-y-auto custom-scrollbar p-1.5 space-y-0.5" id="actions-options-list">
                                    <!-- Options will be injected by JS -->
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <!-- Keep hidden inputs and other fields as they are -->
                    <div style="display: none !important;">{{ field }}</div>
                {% endif %}
            {% endfor %}
        </div>
        {% endblock %}
        
        {% block actions-submit %}
        <button type="submit" class="inline-flex items-center gap-2.5 px-6 py-2.5 bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 font-bold text-[12px] uppercase tracking-wider rounded-xl hover:bg-black dark:hover:bg-white transition-all shadow-md active:scale-95 disabled:opacity-50 group" name="index" value="{{ action_index|default:0 }}">
            <span>{% translate "Run" %}</span>
            <div class="bg-white/20 dark:bg-black/10 rounded-lg p-1 group-hover:translate-x-1 transition-transform">
                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
            </div>
        </button>
        {% endblock %}
    </div>


    {% block actions-counter %}
    {% if actions_selection_counter %}
        <div class="flex items-center gap-2">
            <span class="action-counter text-[11px] font-bold text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-900/50 px-4 py-2 rounded-xl border border-slate-100 dark:border-slate-800 shadow-inner" data-actions-icnt="{{ cl.result_list|length }}">{{ selection_note }}</span>
            
            {% if cl.result_count != cl.result_list|length %}
            <span class="all hidden">
                <span class="text-[11px] font-bold text-blue-500 px-4 py-2">{{ selection_note_all }}</span>
            </span>
            
            <span class="question hidden">
                <a role="button" href="#" class="inline-flex items-center text-[11px] font-bold text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-500/10 px-4 py-2 rounded-xl transition-colors underline decoration-blue-500/30 underline-offset-4">
                    {% blocktranslate with cl.result_count as total_count %}Select {{ total_count }}{% endblocktranslate %}
                </a>
            </span>
            
            <span class="clear hidden">
                <a role="button" href="#" class="inline-flex items-center text-[11px] font-bold text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-500/10 px-4 py-2 rounded-xl transition-colors">
                    {% translate "Clear" %}
                </a>
            </span>
            {% endif %}
        </div>
    {% endif %}
    {% endblock %}
  {% endblock %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const root = document.querySelector('.custom-select-root');
    if (!root) return;

    const nativeSelect = root.querySelector('select');
    const trigger = root.querySelector('.custom-select-trigger');
    const menu = root.querySelector('.custom-select-menu');
    const label = root.querySelector('.selected-label');
    const arrow = root.querySelector('.trigger-arrow');
    const optionsContainer = root.querySelector('#actions-options-list');

    // Portal setup
    document.body.appendChild(menu);

    // Populate custom options from native select
    function refreshOptions() {
        optionsContainer.innerHTML = '';
        Array.from(nativeSelect.options).forEach((opt, index) => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = `w-full text-left px-4 py-2.5 rounded-lg text-[13px] font-medium transition-colors ${opt.selected ? 'bg-blue-500/10 text-blue-600 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'}`;
            btn.textContent = opt.text;
            btn.dataset.index = index;
            btn.dataset.value = opt.value;
            
            btn.onclick = (e) => {
                e.stopPropagation();
                selectOption(index);
                closeMenu();
            };
            optionsContainer.appendChild(btn);
        });
        
        // Update label
        const selectedOpt = nativeSelect.options[nativeSelect.selectedIndex];
        if (selectedOpt) {
            label.textContent = selectedOpt.text;
        }
    }

    function selectOption(index) {
        nativeSelect.selectedIndex = index;
        // Trigger native change event for Django's actions.js
        nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));
        refreshOptions();
    }

    function toggleMenu() {
        const isOpen = menu.classList.contains('open');
        if (isOpen) closeMenu();
        else openMenu();
    }

    function openMenu() {
        // Calculate position
        const rect = trigger.getBoundingClientRect();
        menu.style.top = (rect.bottom + 8) + 'px';
        menu.style.left = rect.left + 'px';
        menu.style.width = rect.width + 'px';

        menu.classList.add('open');
        arrow.classList.add('rotate-180');
    }

    function closeMenu() {
        menu.classList.remove('open');
        arrow.classList.remove('rotate-180');
    }

    trigger.addEventListener('click', (e) => {
        e.stopPropagation();
        toggleMenu();
    });

    document.addEventListener('click', () => closeMenu());
    window.addEventListener('scroll', closeMenu, true);
    window.addEventListener('resize', closeMenu);

    // Initial sync
    refreshOptions();
    
    // Listen for external changes to native select (if any)
    nativeSelect.addEventListener('change', refreshOptions);
});
</script>