{% extends "course_flow/base.html" %}
<!-- -->
{% load static i18n %}
<!-- -->
{% block title %}{% trans "Notifications" %} - CourseFlow{% endblock %}
<!-- -->
{% block metadescription %} {% endblock %}
<!-- -->
{% block header %}{% endblock %}
<!-- -->
{% block body %}
<div id="create">
    <div class="workflow-create-wrapper">
    {% if object_list|length > 0 %}
    <h1>{% trans "Notifications" %}</h1>
    {% for notification in object_list %}
        <a class="list-notification hover-shade
          {% if notification.is_unread %}
            unread
          {% endif %}
        " href="
          {% if notification.content_object.type == 'project' %}
            {% url 'course_flow:project-update' pk=notification.content_object.pk %}
          {% else %}
            {% url 'course_flow:workflow-update' pk=notification.content_object.pk %}
          {% endif %}
        "><div class="created-on">{{ notification.created_on }}</div>{{ notification.text }}</a>
    {% endfor %}

    <div><button id="mark-all-as-read" class="primary-button">Mark all as read</button></div>
    <div class="pagination">
        <span class="step-links">
            {% if page_obj.has_previous %}
                <a href="?page=1">&laquo; {% trans "first" %}</a>
                <a href="?page={{ page_obj.previous_page_number }}">{% trans "previous" %}</a>
            {% endif %}

            <span class="current">
                {{ page_obj.number }} / {{ page_obj.paginator.num_pages }}
            </span>

            {% if page_obj.has_next %}
                <a href="?page={{ page_obj.next_page_number }}">{% trans "next" %}</a>
                <a href="?page={{ page_obj.paginator.num_pages }}">{% trans "last" %} &raquo;</a>
            {% endif %}
        </span>
    </div>
    {% endif %}
    </div>
</div>
{% endblock %}
<!-- -->
{% block foot %} {% endblock %}
<!-- -->
{% csrf_token %}
<!-- -->
{% block scripts %} {{ block.super }}
<script nonce="{{request.csp_nonce}}">
  $("#create").detach().appendTo("#container");
  $("form input").on("input",()=>$("#save-button").attr("disabled",false));
  $("#mark-all-as-read").on("click",()=>{
    $.post("{% url 'course_flow:mark-all-as-read' %}",{},()=>{
      window.location = window.location;
    });
  });
</script>
{% endblock %}
