<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Домовой Бот - Админ Панель</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --success-color: #27ae60;
            --warning-color: #f39c12;
            --danger-color: #e74c3c;
        }
        
        body {
            background-color: #f8f9fa;
        }
        
        .sidebar {
            min-height: 100vh;
            background: linear-gradient(180deg, var(--primary-color) 0%, #1a252f 100%);
        }
        
        .sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 1rem;
            transition: all 0.3s;
        }
        
        .sidebar .nav-link:hover,
        .sidebar .nav-link.active {
            color: white;
            background-color: rgba(255,255,255,0.1);
        }
        
        .sidebar .nav-link i {
            margin-right: 0.5rem;
        }
        
        .stat-card {
            border-radius: 10px;
            padding: 1.5rem;
            color: white;
            margin-bottom: 1rem;
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-card.primary { background: linear-gradient(135deg, var(--secondary-color), #2980b9); }
        .stat-card.success { background: linear-gradient(135deg, var(--success-color), #229954); }
        .stat-card.warning { background: linear-gradient(135deg, var(--warning-color), #d68910); }
        .stat-card.danger { background: linear-gradient(135deg, var(--danger-color), #c0392b); }
        
        .stat-card .stat-value {
            font-size: 2.5rem;
            font-weight: bold;
        }
        
        .stat-card .stat-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .content {
            padding: 2rem;
        }
        
        .card {
            border: none;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
        }
        
        .card-header {
            background-color: white;
            border-bottom: 2px solid #f0f0f0;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-md-2 sidebar p-0">
                <div class="p-3 text-white text-center">
                    <h4><i class="bi bi-house-door"></i> Домовой Бот</h4>
                    <small>Админ Панель v1.11</small>
                </div>
                <nav class="nav flex-column">
                    <a class="nav-link active" href="/"><i class="bi bi-speedometer2"></i> Дашборд</a>
                    <a class="nav-link" href="/users"><i class="bi bi-people"></i> Пользователи</a>
                    <a class="nav-link" href="/verification">
                        <i class="bi bi-shield-check"></i> Верификация
                        {% if pending_count and pending_count > 0 %}
                        <span class="badge bg-danger ms-2">{{ pending_count }}</span>
                        {% endif %}
                    </a>
                    <a class="nav-link" href="/phones"><i class="bi bi-telephone"></i> Телефоны</a>
                    <a class="nav-link" href="/broadcast"><i class="bi bi-broadcast"></i> Рассылки</a>
                    <a class="nav-link" href="/polls"><i class="bi bi-bar-chart"></i> Опросы</a>
                    <a class="nav-link" href="/events"><i class="bi bi-calendar-event"></i> События</a>
                    <a class="nav-link" href="/schedules"><i class="bi bi-clock"></i> Расписания</a>
                    <a class="nav-link" href="/export"><i class="bi bi-download"></i> Экспорт</a>
                </nav>
            </div>
            
            <!-- Main Content -->
            <div class="col-md-10 content">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>Дашборд</h2>
                    <div>
                        <span class="text-muted">Админ: {{ username }}</span>
                        <a href="/" class="btn btn-outline-primary btn-sm ms-2">
                            <i class="bi bi-arrow-clockwise"></i> Обновить
                        </a>
                    </div>
                </div>
                
                <!-- Stats Cards -->
                <div class="row">
                    <div class="col-md-3">
                        <a href="/users?filter=all" style="text-decoration: none;">
                            <div class="stat-card primary">
                                <div class="stat-value">{{ stats.users }}</div>
                                <div class="stat-label">Пользователей</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="/users?filter=verified" style="text-decoration: none;">
                            <div class="stat-card success">
                                <div class="stat-value">{{ stats.verified }}</div>
                                <div class="stat-label">Верифицировано</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="/users?filter=ig" style="text-decoration: none;">
                            <div class="stat-card" style="background: linear-gradient(135deg, #17a2b8, #117a8b);">
                                <div class="stat-value">{{ stats.ig }}</div>
                                <div class="stat-label">Инициативная группа</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-3">
                        <a href="/users?filter=active_unverified" style="text-decoration: none;">
                            <div class="stat-card danger">
                                <div class="stat-value">{{ stats.active_unverified }}</div>
                                <div class="stat-label">Активных (50+ сообщ.)</div>
                            </div>
                        </a>
                    </div>
                </div>
                
                <!-- Additional Stats -->
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <i class="bi bi-megaphone"></i> Объявления
                            </div>
                            <div class="card-body">
                                <h3 class="text-center">{{ stats.ads }}</h3>
                                <p class="text-center text-muted">Активных объявлений</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <i class="bi bi-calendar-event"></i> События
                            </div>
                            <div class="card-body">
                                <h3 class="text-center">{{ stats.schedules }}</h3>
                                <p class="text-center text-muted">Предстоящих событий</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Actions -->
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="bi bi-lightning"></i> Быстрые действия
                    </div>
                    <div class="card-body">
                        <a href="/users" class="btn btn-primary me-2">
                            <i class="bi bi-people"></i> Пользователи
                        </a>
                        <a href="/export" class="btn btn-success me-2">
                            <i class="bi bi-download"></i> Экспорт JSON
                        </a>
                            <i class="bi bi-gear"></i> Настройки
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
