{% extends "user_inbox/base.html" %}
{% import "macros.html" as macros %}
{% block profilesection %}
  {% trans %}notifications{% endtrans %}
{% endblock %}
{% block inbox_content %}
  {% if notifications %}
  <div class="js-manage-messages">
    <a class="js-mark-as-seen">{% trans %}mark seen{% endtrans %}</a> |
    <a class="js-delete">{% trans %}delete{% endtrans %}</a> 
    {% trans %}select:{% endtrans %} 
    <a class="js-select-all">{% trans %}all{% endtrans %}</a> |
    <a class="js-select-none">{% trans %}none{% endtrans %}</a>
  </div>
  {% endif %}
  <div class="js-action-status"></div>
  <div class="js-messages">
  {% for message in notifications %}{# messages are grouped by question, using the "nested_messages" #}
    <div class="js-message-group">
      <h3><input class="js-message-group-cb" type="checkbox" />{{ message.title.strip()|escape}}</h3>
      <div class="js-message{% if message.is_new %} js-new{% else %} js-seen{% endif %}"
        data-message-id="{{ message.id }}"
      >
          {{ macros.inbox_message_snippet(message) }}
      </div>
      {# "nested" messages are further response messages to the same question #}
      {% for followup_message in message.followup_messages %}
        <div class="js-message{% if followup_message.is_new %} js-new{% else %} js-seen{% endif %}"
            data-message-id="{{ followup_message.id }}"
        >
          {{ macros.inbox_message_snippet(followup_message) }}
        </div>
      {% endfor %}
    </div>
  {% endfor %}
  <div class="js-no-notifications empty-content-box {% if notifications %}js-hidden{% endif %}">{% trans %}There are no notifications.{% endtrans %}</div>
  </div>
{% endblock %}
