{% load i18n %}

<div class="spectra-widget stats-widget">
    <div class="widget-header">
        <h3 class="widget-title">
            <svg class="widget-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="12" y1="20" x2="12" y2="10"></line>
                <line x1="18" y1="20" x2="18" y2="4"></line>
                <line x1="6" y1="20" x2="6" y2="16"></line>
            </svg>
            {{ name|default:"Statistics" }}
        </h3>
    </div>
    <div class="widget-body">
        <div class="stats-grid">
            <div class="stat-card stat-primary">
                <div class="stat-value">{{ stats.total_users|default:0 }}</div>
                <div class="stat-label">{% trans "Total Users" %}</div>
            </div>
            <div class="stat-card stat-success">
                <div class="stat-value">{{ stats.active_users|default:0 }}</div>
                <div class="stat-label">{% trans "Active Users" %}</div>
            </div>
            <div class="stat-card stat-info">
                <div class="stat-value">{{ stats.staff_users|default:0 }}</div>
                <div class="stat-label">{% trans "Staff Members" %}</div>
            </div>
            <div class="stat-card stat-warning">
                <div class="stat-value">{{ stats.content_types|default:0 }}</div>
                <div class="stat-label">{% trans "Content Types" %}</div>
            </div>
        </div>
    </div>
</div>