<!DOCTYPE html>
<html lang="en">
<head>
    <title>Smart Assistant Dashboard</title>
    {{template "old/views/partials/header"}}
    <style>
        .image-container {
            display: flex;
            justify-content: center;
            margin: 40px 0;
            position: relative;
        }
        
        .image-container img {
            filter: drop-shadow(0 0 15px rgba(94, 0, 255, 0.6));
            transition: all 0.5s ease;
        }
        
        .image-container:hover img {
            transform: scale(1.05);
            filter: drop-shadow(0 0 25px rgba(0, 255, 149, 0.8));
        }
        
        .image-container::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--tertiary), transparent);
        }
        
        .dashboard-title {
            text-align: center;
            margin-bottom: 40px;
            font-size: 2.5rem;
            letter-spacing: 2px;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
            color: var(--primary);
            text-shadow: var(--neon-glow);
            animation: gentlePulse 3s infinite;
        }
        
        /* Gentle pulse animation for the title */
        @keyframes gentlePulse {
            0% { text-shadow: 0 0 7px var(--primary), 0 0 10px var(--primary); }
            50% { text-shadow: 0 0 12px var(--primary), 0 0 20px var(--primary); }
            100% { text-shadow: 0 0 7px var(--primary), 0 0 10px var(--primary); }
        }
        
        /* Subtle glitch effect for hover */
        @keyframes subtleGlitch {
            0% { transform: translateX(-50%); }
            20% { transform: translateX(-50%) translate(-1px, 1px); }
            40% { transform: translateX(-50%) translate(-1px, -1px); }
            60% { transform: translateX(-50%) translate(1px, 1px); }
            80% { transform: translateX(-50%) translate(1px, -1px); }
            100% { transform: translateX(-50%); }
        }
        
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        
        .user-info {
            position: absolute;
            top: 20px;
            right: 20px;
        }
        
        .dashboard-stats {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0 40px;
        }
        
        .stat-item {
            background: rgba(17, 17, 17, 0.7);
            border-radius: 8px;
            padding: 15px;
            min-width: 150px;
            text-align: center;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(94, 0, 255, 0.2);
        }
        
        .stat-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            opacity: 0.7;
        }
        
        .stat-count {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
            text-shadow: var(--neon-glow);
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: #cccccc;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Badge positioning */
        .card {
            position: relative;
        }
        
        .badge {
            position: absolute;
            top: 15px;
            right: 15px;
        }
    </style>
</head>
<body>
    {{template "old/views/partials/menu"}}
    <div class="container">
   
        
        <div class="image-container">
            <img src="/old/public/logo_1.png" width="250" alt="Company Logo">
        </div>
        
        <h1 class="dashboard-title">LocalAGI</h1>
        
        <!-- Simple stats display -->
        <div class="dashboard-stats">
            <div class="stat-item">
                <div class="stat-count">{{.Actions}}</div>
                <div class="stat-label">Available Actions</div>
            </div>
            <div class="stat-item">
                <div class="stat-count">{{.Connectors}}</div>
                <div class="stat-label">Available Connectors</div>
            </div>
            <div class="stat-item">
                <div class="stat-count">{{ .AgentCount }}</div>
                <div class="stat-label">Agents</div>
            </div>
        </div>
        
        <div class="cards-container">
            <!-- Card for Agent List Page -->
            <a href="/old/agents" class="card-link">
                <div class="card">
                    <h2><i class="fas fa-robot"></i> Agent List</h2>
                    <p>View and manage your list of agents, including detailed profiles and statistics.</p>
                </div>
            </a>
            
            <!-- Card for Create Agent -->
            <a href="/old/create" class="card-link">
                <div class="card">
                    <h2><i class="fas fa-plus-circle"></i> Create Agent</h2>
                    <p>Create a new intelligent agent with custom behaviors, connectors, and actions.</p>
                </div>
            </a>
            
            <!-- Additional Cards for Future Features -->
            <a href="#" class="card-link">
                <div class="card">
                    <h2><i class="fas fa-chart-line"></i> Analytics</h2>
                    <p>View performance metrics and insights from your agent operations.</p>
                    <span class="badge badge-secondary">Coming Soon</span>
                </div>
            </a>
            
            <a href="#" class="card-link">
                <div class="card">
                    <h2><i class="fas fa-cogs"></i> Settings</h2>
                    <p>Configure system preferences and global settings for all agents.</p>
                    <span class="badge badge-secondary">Coming Soon</span>
                </div>
            </a>
        </div>
    </div>
    
    <!-- Toast notification container -->
    <div id="toast" class="toast">
        <span id="toast-message"></span>
    </div>
    
    <script>
        // Add the controlled glitch effect to dashboard title
        document.addEventListener('DOMContentLoaded', function() {
            const title = document.querySelector('.dashboard-title');
            
            title.addEventListener('mouseover', function() {
                // Use the more subtle glitch animation
                this.style.animation = 'subtleGlitch 0.5s infinite';
            });
            
            title.addEventListener('mouseout', function() {
                // Return to gentle pulse animation
                this.style.animation = 'gentlePulse 3s infinite';
            });
            
            // Welcome toast notification
            setTimeout(() => {
                showToast('Welcome to Smart Assistant Dashboard', 'success');
            }, 1000);
        });
    </script>
</body>
</html>