<div class="card adminuiux-card border-0 shadow-sm h-100 hover-lift" data-widget="queues">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between mb-3">
            <h6 class="fw-bold text-dark small mb-0">QUEUE STATS</h6>
            <i class="bi bi-stack text-secondary"></i>
        </div>
        <div class="row g-2 text-center">
            <div class="col-6">
                <div class="p-2 rounded-3 bg-light">
                    <div class="fw-black display-6 text-dark counter-value" id="stat-queues-pending">{{ $stats['queues']['pending'] ?? 0 }}</div>
                    <div class="extra-small text-muted fw-semibold">PENDING</div>
                </div>
            </div>
            <div class="col-6">
                <div class="p-2 rounded-3 bg-danger-subtle">
                    <div class="fw-black display-6 text-danger counter-value" id="stat-queues-failed">{{ $stats['queues']['failed'] ?? 0 }}</div>
                    <div class="extra-small text-danger fw-semibold">FAILED</div>
                </div>
            </div>
        </div>
        <div class="mt-3 d-flex align-items-center gap-2">
            <span class="extra-small text-muted">Reverb:</span>
            <i class="bi bi-broadcast text-muted" id="reverb-icon"></i>
            <span class="extra-small text-muted" id="reverb-status-text">IDLE</span>
        </div>
    </div>
</div>
