{% extends 'base.html' %}

{% block content %}
<h2 class="mb-4">📊 Dashboard Overview</h2>
<div class="row g-4">
    <div class="col-md-3">
        <div class="card text-white cardbg-gradient-custom" style="background: #934950;">
            <div class="card-body">
                <h5 class="card-title">Total Users</h5>
                <p class="card-text fs-4">{{ user_count }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white cardbg-gradient-custom" style="background: green;">
            <div class="card-body">
                <h5 class="card-title">Active Users</h5>
                <p class="card-text fs-4">{{ active_users }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-white  cardbg-gradient-custom" style="background: #241476;">
            <div class="card-body">
                <h5 class="card-title">Staff Members</h5>
                <p class="card-text fs-4">{{ staff_users }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}