document.addEventListener('DOMContentLoaded', () => {
    // Sample agent data
    const agents = [
        {
            id: 1,
            name: "Data Miner",
            status: "active",
            skills: ["Web Scraping", "Data Analysis", "Pattern Recognition"],
            avatar: "http://static.photos/technology/200x200/101"
        },
        {
            id: 2,
            name: "Security Sentinel",
            status: "idle",
            skills: ["Threat Detection", "Vulnerability Scanning", "Log Analysis"],
            avatar: "http://static.photos/black/200x200/202"
        },
        {
            id: 3,
            name: "Customer Scout",
            status: "active",
            skills: ["Sentiment Analysis", "Chatbot", "FAQ Generation"],
            avatar: "http://static.photos/blue/200x200/303"
        }
    ];

    // Render agent cards
    const agentsContainer = document.getElementById('agents-container');
    
    agents.forEach(agent => {
        const card = document.createElement('custom-agent-card');
        card.setAttribute('name', agent.name);
        card.setAttribute('status', agent.status);
        card.setAttribute('skills', JSON.stringify(agent.skills));
        card.setAttribute('avatar', agent.avatar);
        agentsContainer.appendChild(card);
    });

    // New agent button functionality
    document.getElementById('new-agent-btn').addEventListener('click', () => {
        const newAgentId = agents.length + 1;
        const newAgent = {
            id: newAgentId,
            name: `Agent ${newAgentId}`,
            status: "idle",
            skills: ["Learning..."],
            avatar: `http://static.photos/abstract/200x200/${newAgentId}00`
        };
        
        agents.push(newAgent);
        
        const card = document.createElement('custom-agent-card');
        card.setAttribute('name', newAgent.name);
        card.setAttribute('status', newAgent.status);
        card.setAttribute('skills', JSON.stringify(newAgent.skills));
        card.setAttribute('avatar', newAgent.avatar);
        agentsContainer.appendChild(card);
        
        // Force icon refresh
        feather.replace();
    });
});