<div class="dropdown-header text-center">
    <strong><%= _lc( 'MESSAGE_DROPDOWN_HEADER', [ messages.length ] ) %></strong>
</div>
<% if ( messages.length > 0 ) {    %>
<% for ( var ni = 0; ni < Math.min( 5, messages.length ); ni++ ) {    %>
<a class="dropdown-item" href="#">
    <div class="message">
        <div>
            <small class="text-muted">John Doe</small>
            <small class="text-muted float-right mt-1">Just now</small>
        </div>
        <div class="font-weight-bold">
            <span class="fa fa-exclamation text-danger"></span> Important message</div>
        <div class="small text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</div>
    </div>
</a>
<% }    %>
<% } else {   %>
<p class="text-muted text-center">
    <%= _lc( 'MESSAGE_EMPTY' ) %>
</p>
<% }    %>
<a class="dropdown-item text-center" href="#">
    <strong><%= _lc( 'MESSAGE_DROPDOWN_FOOTER_LINK' ) %></strong>
</a>