<!-- Notifications Dropdown -->
 <div class="dropdown nav-item mx-2">
    <a
        href="#"
        class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" 
        id="notiificationsDropdown"
        data-bs-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false">
        <i class="fa fa-fw fa-bell"></i><span class="ms-2">{NBADGE}</span>
    </a>
    <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow" aria-labelledby="notiificationsDropdown">
        {LOOP}
        <!-- Notification Item -->
        <li>
            <a href="{ROOT_URL}notifications" class="dropdown-item">
                <div class="media">
                    <div class="media-body">
                        <p class="small text-muted mb-1"><i class="fa fa-clock-o me-1"></i> {DTC}{createdAt}{/DTC}</p>
                        <span>{notification}</span>
                    </div>
                </div>
            </a>
        </li>
        {/LOOP}
        {ALT}
        <li class="px-3 text-center">
            <strong>No Notifications</strong>
        </li>
        {/ALT}
        <!-- Footer -->
        <li>
            <hr class="dropdown-divider">
        </li>
        <li>
            <a href="/notifications" class="dropdown-item text-center">
                See All Notifications
            </a>
        </li>
    </ul>
</div>
