{% extends "base.html" %}

{% block title %}Settings Module{% endblock %}

{% block content %}
<div class="container-fluid py-5">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2">
                <i class="fas fa-cog"></i> Settings
            </h1>
            <p class="text-muted">Configure application settings and preferences</p>
        </div>
    </div>
    
    <!-- App Overview Section -->
    <div class="row mb-4">
        <div class="col-12">
            <h4 class="mb-3"><i class="fas fa-chart-pie"></i> Application Overview</h4>
            <div class="row">
                <!-- Users Card -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="display-6 text-primary mb-2">{{ stats.user_count }}</div>
                            <p class="card-text mb-0">Active Users</p>
                        </div>
                    </div>
                </div>
                
                <!-- Database Size Card -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="display-6 text-info mb-2">{{ stats.database_size_mb }} MB</div>
                            <p class="card-text mb-0">Database Size</p>
                        </div>
                    </div>
                </div>
                
                <!-- Logs Size Card -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="display-6 text-warning mb-2">{{ stats.logs_size_mb }} MB</div>
                            <p class="card-text mb-0">Logs Size</p>
                        </div>
                    </div>
                </div>
                
                <!-- Database Count Card -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="display-6 text-secondary mb-2">{{ stats.database_count }}</div>
                            <p class="card-text mb-0">Databases</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <!-- Backups Card -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="display-6 text-success mb-2">{{ stats.backup_count }}</div>
                            <p class="card-text mb-0">Scheduled Backups</p>
                        </div>
                    </div>
                </div>
                
                <!-- Printer Keys Card -->
                <div class="col-md-3 col-sm-6 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="display-6 text-danger mb-2">{{ stats.printer_keys_count }}</div>
                            <p class="card-text mb-0">Printer Keys</p>
                        </div>
                    </div>
                </div>
                
                <!-- App Keys Availability Card -->
                <div class="col-md-6 col-sm-6 mb-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <p class="card-text mb-0">App Key Availability</p>
                                    <h5 class="mb-0 mt-2">
                                        {% if stats.app_key_availability.available %}
                                            <span class="badge bg-success"><i class="fas fa-check-circle"></i> {{ stats.app_key_availability.status }}</span>
                                        {% else %}
                                            <span class="badge bg-danger"><i class="fas fa-times-circle"></i> {{ stats.app_key_availability.status }}</span>
                                        {% endif %}
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                <a href="{{ url_for('settings.general_settings') }}" class="list-group-item list-group-item-action active">
                    <i class="fas fa-sliders-h"></i> General Settings
                </a>
                <a href="{{ url_for('settings.user_management') }}" class="list-group-item list-group-item-action">
                    <i class="fas fa-users"></i> User Management
                </a>
                <a href="{{ url_for('settings.app_keys') }}" class="list-group-item list-group-item-action">
                    <i class="fas fa-key"></i> App Keys
                </a>
                <a href="{{ url_for('settings.database_management') }}" class="list-group-item list-group-item-action">
                    <i class="fas fa-cogs"></i> Database Management
                </a>
                <a href="{{ url_for('settings.database_settings') }}" class="list-group-item list-group-item-action">
                    <i class="fas fa-database"></i> Database Info
                </a>
                <a href="{{ url_for('settings.logs_explorer') }}" class="list-group-item list-group-item-action">
                    <i class="fas fa-file-alt"></i> Logs Explorer
                </a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Settings Overview</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        Select a settings category from the left menu to configure.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}