{% load combo %}
<div class="notif-list" id="combo-notif-list">
{% for notif in json.notifications %}
{% if forloop.counter < 4 %}
<a class="notif-item {% if notif.isRead %}read{% else %}unread {% endif %}" href="{{notif.url}}">
  <div class="notif-date">{{notif.publicationDate|strptime:"%a %b %d %H:%M:%S %Z %Y"|date:"d.m"}}</div>
  <div class="notif-text is-truncated">{{notif.title}}</div>
</a>
{% else %} {# insert html element so they can be counted #}
  <span style="display: none" class="notif-item {% if notif.isRead %}read{% else %}unread {% endif %}"></span>
{% endif %}
{% endfor %}
<a style="display: none" class="notif-item zero"><div class="notif-text" data-dot="2">Aucune notification en cours</div></a>
<div class="notif-last">
  <a href="{{mon_liferay_url}}notifications?auth=publik" class="btn-square--filled--core"><span class="flexbox"><span class="btn-text">Voir toutes</span><span class="btn-arrow"></span></span></a>
</div>
</div>
<script>
$(function() {
  var unread = $('.notif-item.unread').length;
  if (unread) {
    $('.notif-amount').text(unread).show();
  } else {
    $('.notif-item.zero').show();
    $('.notif-amount').text("").hide();
  }
  $('#nav-notifications .notif-list').replaceWith($('#combo-notif-list'));
  $('#nav-notifications').css('visibility', 'visible');
});
</script>
