{#
Project: EPT-MX-ADM
Company: EasyProTech LLC (www.easypro.tech)
Dev: Brabus
Date: Thu 23 Oct 2025 22:56:11 UTC
Status: Dashboard Template
Telegram: https://t.me/EasyProTech
#}
{% extends "base.html" %}

{% block title %}{{ t('dashboard.title') }} - {{ t('app.name') }}{% endblock %}

{% block content %}
<div class="fade-in-up">
    <!-- Заголовок страницы с информационными карточками -->
    <div class="header-section mb-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h2 text-gradient mb-0">
                <i class="bi bi-speedometer2 me-2"></i>{{ t('dashboard.title') }}
            </h1>
            <button type="button" class="btn btn-outline-primary" data-refresh onclick="refreshDashboard()">
                <i class="bi bi-arrow-clockwise me-1"></i>{{ t('dashboard.refresh') }}
            </button>
        </div>
        
        <!-- Информационные карточки -->
        <div class="row g-4 mb-4">
            <!-- Total Users Card -->
            <div class="col-xl-3 col-md-6">
                <div class="card card-status h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                                    <i class="bi bi-people-fill"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="text-muted mb-1">Total Users</h6>
                                <h3 class="mb-0">{{ stats.total_users if stats.total_users else '0' }}</h3>
                                <small class="text-success"><i class="bi bi-check-circle me-1"></i>{{ stats.active_users if stats.active_users else '0' }} active</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Total Rooms Card -->
            <div class="col-xl-3 col-md-6">
                <div class="card card-status h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <div class="stat-icon bg-success bg-opacity-10 text-success">
                                    <i class="bi bi-door-open-fill"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="text-muted mb-1">Total Rooms</h6>
                                <h3 class="mb-0">{{ stats.total_rooms if stats.total_rooms else '0' }}</h3>
                                <small class="text-muted"><i class="bi bi-hdd me-1"></i>{{ stats.local_rooms if stats.local_rooms else '0' }} local</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- API Response Card -->
            <div class="col-xl-3 col-md-6">
                <div class="card card-status h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <div class="stat-icon bg-info bg-opacity-10 text-info">
                                    <i class="bi bi-speedometer2"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="text-muted mb-1">API Response</h6>
                                <h3 class="mb-0">{{ performance.api_response_time if performance.api_response_time else '0' }}ms</h3>
                                <small class="text-{{ 'success' if performance.api_response_time and performance.api_response_time < 300 else 'warning' }}">
                                    <i class="bi bi-{{ 'lightning-fill' if performance.api_response_time and performance.api_response_time < 300 else 'clock' }} me-1"></i>
                                    {{ 'Fast' if performance.api_response_time and performance.api_response_time < 300 else 'Slow' }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Server Version Card -->
            <div class="col-xl-3 col-md-6">
                <div class="card card-status h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                                    <i class="bi bi-server"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="text-muted mb-1">Synapse Version</h6>
                                <h5 class="mb-0">{{ stats.server_version if stats.server_version else 'N/A' }}</h5>
                                <small class="text-muted"><i class="bi bi-globe me-1"></i>{{ stats.domain if stats.domain else 'N/A' }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Additional Stats Row -->
        <div class="row g-4 mb-4">
            <!-- System Status Card -->
            <div class="col-xl-4">
                <div class="card card-status h-100">
                    <div class="card-header border-0">
                        <h6 class="mb-0"><i class="bi bi-activity me-2"></i>System Status</h6>
                    </div>
                    <div class="card-body">
                        <div class="status-indicators">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>Matrix API</span>
                                <span class="badge bg-{{ 'success' if health.matrix_api.status == 'healthy' else 'danger' }}">
                                    <i class="bi bi-{{ 'check-circle' if health.matrix_api.status == 'healthy' else 'x-circle' }} me-1"></i>
                                    {{ health.matrix_api.status }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <span>Users API</span>
                                <span class="badge bg-{{ 'success' if health.users_api.status == 'healthy' else 'danger' }}">
                                    <i class="bi bi-{{ 'check-circle' if health.users_api.status == 'healthy' else 'x-circle' }} me-1"></i>
                                    {{ health.users_api.status }}
                                </span>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span>Rooms API</span>
                                <span class="badge bg-{{ 'success' if health.rooms_api.status == 'healthy' else 'danger' }}">
                                    <i class="bi bi-{{ 'check-circle' if health.rooms_api.status == 'healthy' else 'x-circle' }} me-1"></i>
                                    {{ health.rooms_api.status }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- User Details Card -->
            <div class="col-xl-4">
                <div class="card card-status h-100">
                    <div class="card-header border-0">
                        <h6 class="mb-0"><i class="bi bi-person-lines-fill me-2"></i>User Details</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Active Users</span>
                            <span class="fw-bold text-success">{{ stats.active_users if stats.active_users else '0' }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Deactivated</span>
                            <span class="fw-bold text-danger">{{ stats.deactivated_users if stats.deactivated_users else '0' }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">Total</span>
                            <span class="fw-bold text-primary">{{ stats.total_users if stats.total_users else '0' }}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Storage Info Card -->
            <div class="col-xl-4">
                <div class="card card-status h-100">
                    <div class="card-header border-0">
                        <h6 class="mb-0"><i class="bi bi-hdd-stack me-2"></i>Storage Info</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Media Storage</span>
                            <span class="fw-bold">{{ stats.media_size_human if stats.media_size_human else 'N/A' }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="text-muted">Total Rooms</span>
                            <span class="fw-bold">{{ stats.total_rooms if stats.total_rooms else '0' }}</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">Python Ver</span>
                            <span class="fw-bold">{{ stats.python_version if stats.python_version and stats.python_version != 'Unknown' else 'N/A' }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Только быстрые действия -->
    <div class="row">
        <div class="col-12">
            <div class="card elite-card hover-lift">
                <div class="card-header border-0 pb-0">
                    <h5 class="card-title text-gradient mb-0">
                        <i class="bi bi-lightning me-2"></i>{{ t('navigation.quick_actions') }}
                    </h5>
                </div>
                <div class="card-body pt-3">
                    <div class="row g-3">
                        <div class="col-lg-3 col-md-6">
                            <a href="{{ url_for('users.users') }}" class="btn btn-primary btn-elite w-100">
                                <i class="bi bi-person-plus me-2"></i>{{ t('users.title') }}
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <a href="{{ url_for('rooms.rooms') }}" class="btn btn-primary btn-elite w-100">
                                <i class="bi bi-door-open me-2"></i>{{ t('rooms.title') }}
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <a href="{{ url_for('spaces.spaces') }}" class="btn btn-primary btn-elite w-100">
                                <i class="bi bi-grid-3x3 me-2"></i>{{ t('spaces.title') }}
                            </a>
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <a href="{{ url_for('media.users_media') }}" class="btn btn-primary btn-elite w-100">
                                <i class="bi bi-file-earmark-play me-2"></i>{{ t('media.title') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block scripts %}
<script>
// Auto-refresh dashboard every 60 seconds
let dashboardInterval;

document.addEventListener('DOMContentLoaded', function() {
    // Удалено автообновление дашборда
    // dashboardInterval = setInterval(refreshDashboard, 60000);
    // Add pulse animation to status badges
    document.querySelectorAll('.badge.bg-success').forEach(badge => {
        badge.classList.add('pulse');
    });
});

function refreshDashboard() {
    // Show loading state
    const refreshBtn = document.querySelector('[data-refresh]');
    const originalContent = refreshBtn.innerHTML;
    refreshBtn.innerHTML = '<i class="bi bi-arrow-clockwise spin me-1"></i>Refreshing...';
    refreshBtn.disabled = true;
    
    // Refresh dashboard data
    fetch('/api/dashboard/refresh')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Reload the page to update all data
                window.location.reload();
            } else {
                console.error('Dashboard refresh failed:', data.error);
                // Restore button state
                refreshBtn.innerHTML = originalContent;
                refreshBtn.disabled = false;
            }
        })
        .catch(error => {
            console.error('Dashboard refresh error:', error);
            // Restore button state
            refreshBtn.innerHTML = originalContent;
            refreshBtn.disabled = false;
        });
}

// Clear interval when leaving page
window.addEventListener('beforeunload', function() {
    if (dashboardInterval) clearInterval(dashboardInterval);
});
</script>
{% endblock %}