{% load i18n %}
{% block cell-content %}
  <{{ cell.title_level }} class="cell--title">{% trans "Notifications" %}</{{ cell.title_level }}>
  {% if notifications %}
    <div class="links-list">
      <ul>
        {% for notification in notifications %}
          <li class="combo-notification {% if notification.acked %}combo-notification-acked{% endif %}"
              data-combo-notification-id="{{ notification.public_id }}">
            <a href="{{ notification.url|default:"#" }}">{{ notification.summary }}</a>
            {% if notification.body %}
              <div class="description">
                {{ notification.body|linebreaks }}
              </div>
            {% endif %}
            {% if notification.origin %}
              {% block notification-origin %}
                <span class="combo-notification--origin">[{{ notification.origin }}]</span>
              {% endblock %}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    </div>
  {% else %}
    <div class="cell--body">
      <p>{% trans 'No notifications.' %}</p>
    </div>
  {% endif %}

  {% if push_notifications_enabled %}
    <div class="cell--body notification-buttons">
      <div class="notification-push-on" style="display: none"><a href="#" class="pk-button">Activer les notifications</a></div>
      <div class="notification-push-off" style="display: none"><a href="#" class="pk-button">Désactiver les notifications</a></div>
    </div>

    <script>
      $(function() {
        $('.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>
  {% endif %}

{% endblock %}