document.addEventListener('DOMContentLoaded', function() {
    const drawer = document.querySelector('custom-task-drawer');
    const openDrawerBtn = document.getElementById('openDrawer');
    
    openDrawerBtn.addEventListener('click', () => {
        drawer.openDrawer();
    });
    
    // Close drawer when clicking outside
    document.addEventListener('click', (e) => {
        if (!drawer.contains(e.target) && e.target !== openDrawerBtn) {
            drawer.closeDrawer();
        }
    });
    
    // Sample data for demonstration
    const tasks = document.querySelectorAll('custom-task-card');
    tasks.forEach(task => {
        task.addEventListener('click', () => {
            const taskData = {
                title: task.getAttribute('title'),
                po: task.getAttribute('po'),
                status: task.getAttribute('status'),
                due: task.getAttribute('due'),
                priority: task.getAttribute('priority'),
                assignee: task.getAttribute('assignee')
            };
            drawer.openDrawerWithData(taskData);
        });
    });
});