<% var notificationCount = Math.max( 0, Math.min( 5, notifications.length ) ); %>
<div class="dropdown-header text-center">
    <strong><%= _lc( 'NOTIFICATION_DROPDOWN_HEADER', [ notificationCount ] ) %></strong>
</div>
<% if ( notifications.length > 0 ) {    %>
    <% var notification; %>
    <% for ( var ni = 0; ni < notificationCount; ni++ ) {    %>
        <% notification = notifications[ ni ]; %>
        <div class="dropdown-item clickable"
             data-type="notification-item"
             data-notification-is-new="<%= notification.isUnread() ? '1' : '0' %>"
             data-notification-id="<%= notification.getId() %>">
            <div class="message">
                <div>
                    <small class="text-muted"><%=raw notification.getCreatorName() %></small>
                    <small class="text-muted float-right mt-1"><%= notification.getMomentCreated().fromNow() %></small>
                </div>
                <% if ( notification.isUnread() ) {  %>
                    <div class="font-weight-bold">
                        <%= notification.getHeadline() %>
                    </div>
                <% } else {   %>
                    <div>
                        <%= notification.getHeadline() %>
                    </div>
                <% }    %>
                <div style="white-space: normal">
                    <small><%= notification.getMessage() %></small>
                </div>
            </div>
        </div>
    <% }    %>
<% } else {   %>
<p class="text-muted text-center">
    <%= _lc( 'NOTIFICATION_EMPTY' ) %>
</p>
<% }    %>
<div>
    <button data-id="btn-mark-all-notifications-as-read"
            class="btn btn-link btn-sm btn-primary dropdown-item text-center">
        <%= _lc( 'MARK_ALL_NOTIFICATION_AS_READ' ) %>
    </button>
</div>
