{% load assets i18n humanize %}

{% for notification in notifications %}
<div class="notification {% if notification.acked %}acked{% else %}new{% endif %}
            {% if forloop.counter > 10 %}hidden{% endif %}"
    data-combo-notification-ack-url="{% url 'api-notification-ack' notification_id=notification.id %}"
    data-combo-notification-forget-url="{% url 'api-notification-forget' notification_id=notification.id %}">
  <span class="producer" style="background-image: url({% asset_url "logo:"|add:notification.origin %})"></span>
  <div>
  <h3>{% if notification.url %}<a href="{{ notification.url|default:"#" }}">{{ notification.summary }}</a>
      {% else %}{{ notification.summary }}{% endif %}</h3>
  <div class="description">
  {{ notification.body|linebreaks }}
  </div>
  <p class="datetime">{{ notification.start_timestamp|naturaltime }}</p>
  <a class="delete" href="#">×</a>
  </div>
</div>
{% empty %}
<div class="notification-none">Aucune notification.</div>
{% endfor %}

<div class="notification-buttons">
<div class="notification-more"><a href="#" class="pk-button">Afficher les notifications plus anciennes</a></div>
{% if push_notifications_enabled %}
<div class="notification-push-on"><a href="#" class="pk-button">Activer les notifications</a></div>
<div class="notification-push-off"><a href="#" class="pk-button">Désactiver les notifications</a></div>
{% endif %}
</div>

<script>
$(function() {
  if ($('.notification.hidden').length) {
    $('.notification-more').show();
  }
  $('.notification-more a').on('click', function() {
    var $notification = $('.notification.hidden').first();
    for (var i=0; i<10; i++) {
      $notification.removeClass('hidden');
      $notification = $notification.next('div.notification');
    }
    if ($('.notification.hidden').length == 0) {
      $('.notification-more').hide();
    }
    return false;
  });
  $('.notification-push-on a').on('click', function() {
    $('.notification-push-on').hide();
    $('.notification-push-off').hide();
    combo_pwa_subscribe_user();
    return false;
  });
  $('.notification-push-off a').on('click', function() {
    $('.notification-push-on').hide();
    $('.notification-push-off').hide();
    combo_pwa_unsubscribe_user();
    return false;
  });
  $(document).on('combo:pwa-user-info', function() {
    if (COMBO_PWA_USER_SUBSCRIPTION) {
      $('.notification-push-off').show();
    } else {
      $('.notification-push-on').show();
    }
  });
}
);
</script>
