{% load i18n %}

<!-- Notification Summary Box (Top Right) -->
<div id="notifySummaryBox" class="border border-secondary rounded p-2" style="background-color: #eee; min-width: 200px; font-size: 0.9rem;">
	<div style="line-height: 1.4;">
		<div><strong>{% translate 'Recipients' %}:</strong> <span id="summaryPeople">{{ people_count }}</span></div>
		<div><strong>{% translate 'Emails' %}:</strong> <span id="summaryEmails">{{ email_count }}</span></div>
		<div><strong>{% translate 'SMS' %}:</strong> <span id="summarySMS">{{ sms_count }}</span></div>
	</div>
	<div id="summaryLoading" style="display: none; margin-top: 0.5rem; text-align: center;">
		<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
		<small>{% translate 'Updating...' %}</small>
	</div>
</div>