<div class="dropdown nav-item mx-2 my-2 my-lg-0">
    <a
        href="#"
        class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" 
        id="messagesDropdown"
        data-bs-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false">
        <i class="fa fa-fw fa-envelope"></i><span class="">{MBADGE}</span>
    </a>
    <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end text-small shadow" aria-labelledby="messagesDropdown">
        {LOOP}
        <!-- Message Item -->
        <li>
            <a href="{ROOT_URL}messages/view/{ID}" class="dropdown-item">
                <div class="d-flex">
                    <h5 class="media-heading text-start">
                        <img class="" style="width: 40px;" src="{ROOT_URL}{fromAvatar}" alt="">
                        <strong>{userFrom}</strong>
                    </h5>
                    <div class="text-end">
                        <div class="media-body">
                            <p class="small text-muted mb-1"><i class="fa fa-clock-o me-1"></i> {DTC}{lastReply}{/DTC}</p>
                            <span>{summary}</span>
                        </div>
                    </div>
                </div>
            </a>
        </li>
        {/LOOP}
        {ALT}
        <li class="px-3 text-center">
            <strong>No Messages</strong>
        </li>
        {/ALT}
        <!-- Footer -->
        <li>
            <hr class="dropdown-divider">
        </li>
        <li>
            <a href="/messages" class="dropdown-item text-center">
                Read All New Messages
            </a>
        </li>
    </ul>
</div>