{% extends "base/layout.html" %}

{% block content %}
<div class="fade-in">
    <!-- Welcome Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-start-primary">
                <div class="card-body">
                    <h4 class="card-title mb-2">Welcome to RBAC Management System</h4>
                    <p class="card-text text-muted mb-0">
                        Manage users, roles, and permissions efficiently with our comprehensive administrative
                        interface.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-md-4 mb-3">
            <div class="card card-stat h-100">
                <div class="card-body text-center">
                    <div class="stat-icon bg-primary bg-opacity-10 text-primary mx-auto mb-3">
                        <i class="bi bi-people"></i>
                    </div>
                    <h3 class="card-title">{{ stats.total_users if stats else '0' }}</h3>
                    <p class="card-text text-muted">Total Users</p>
                    <a href="{{ frontend_prefix }}/users" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-arrow-right me-1"></i>Manage Users
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-3">
            <div class="card card-stat h-100">
                <div class="card-body text-center">
                    <div class="stat-icon bg-success bg-opacity-10 text-success mx-auto mb-3">
                        <i class="bi bi-person-badge"></i>
                    </div>
                    <h3 class="card-title">{{ stats.total_roles if stats else '0' }}</h3>
                    <p class="card-text text-muted">Total Roles</p>
                    <a href="{{ frontend_prefix }}/roles" class="btn btn-outline-success btn-sm">
                        <i class="bi bi-arrow-right me-1"></i>Manage Roles
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-4 mb-3">
            <div class="card card-stat h-100">
                <div class="card-body text-center">
                    <div class="stat-icon bg-warning bg-opacity-10 text-warning mx-auto mb-3">
                        <i class="bi bi-key"></i>
                    </div>
                    <h3 class="card-title">{{ stats.total_permissions if stats else '0' }}</h3>
                    <p class="card-text text-muted">Total Permissions</p>
                    <a href="{{ frontend_prefix }}/permissions" class="btn btn-outline-warning btn-sm">
                        <i class="bi bi-arrow-right me-1"></i>Manage Permissions
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- System Overview -->
    <div class="row">
        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-graph-up me-2"></i>Recent Activity
                    </h5>
                </div>
                <div class="card-body">
                    <div class="text-muted text-center py-4">
                        <i class="bi bi-clock-history" style="font-size: 2rem;"></i>
                        <p class="mt-2 mb-0">Activity monitoring will be available soon</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-info-circle me-2"></i>System Information
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="d-flex justify-content-between align-items-center py-2">
                            <span class="text-muted">System Version:</span>
                            <span class="fw-bold">1.0.0</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2">
                            <span class="text-muted">Database:</span>
                            <span class="fw-bold">Connected</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2">
                            <span class="text-muted">Last Backup:</span>
                            <span class="fw-bold">N/A</span>
                        </li>
                        <li class="d-flex justify-content-between align-items-center py-2">
                            <span class="text-muted">Status:</span>
                            <span class="badge bg-success">Operational</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}