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

{% block object-tools %}
    <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
        
        <!-- Dropdown Template (di kiri) -->
        <div style="margin-right: auto; padding-left: 10px;">
            <select id="templateDropdown" class="form-control"
                    style="padding: 6px 10px; border-radius: 4px; font-size: 14px; transition: background 0.3s, color 0.3s;">
                <option value="" selected disabled>Import Templates</option>
                <option value="/categories/download-template/product">Product Template</option>
                <option value="/categories/download-template/employee">Employee Template</option>
                <option value="/categories/download-template/supplier">Supplier Template</option>
                <option value="/categories/download-template/customer">Customer Template</option>
            </select>
        </div>
        
        <!-- Tombol Admin Bawaan (Import, Export, Add) -->
        <ul class="object-tools">
            {{ block.super }}
        </ul>
    
    </div>

    <!-- Script untuk Auto Download & Menyesuaikan Tema -->
    <script>
        document.getElementById('templateDropdown').addEventListener('change', function() {
            const selectedUrl = this.value;
            if (selectedUrl) {
                window.location.href = selectedUrl;  // Redirect untuk memulai download otomatis
                this.selectedIndex = 0;  // Reset kembali ke "Select Template"
            }
        });

        function applyTheme() {
            const dropdown = document.getElementById('templateDropdown');
            const isDarkMode = document.documentElement.classList.contains('dark');  // Unfold menambahkan class "dark" jika mode gelap aktif
            
            if (isDarkMode) {
                dropdown.style.background = "#1E293B";  // Warna latar belakang gelap
                dropdown.style.color = "#E2E8F0";  // Warna teks terang
                dropdown.style.border = "1px solid #4A5568";  // Border yang lebih cocok untuk mode gelap
            } else {
                dropdown.style.background = "#FFFFFF";  // Warna latar belakang putih
                dropdown.style.color = "#1A202C";  // Warna teks gelap
                dropdown.style.border = "1px solid #CBD5E0";  // Border abu-abu muda
            }
        }

        // Jalankan saat halaman dimuat
        applyTheme();

        // Pantau perubahan tema (Unfold otomatis mengubah class "dark")
        const observer = new MutationObserver(applyTheme);
        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    </script>
{% endblock %}
