{% extends "layout.html" %}
{% block extrahead %}
<base target="_parent">
{% endblock %}

{% block basecontent %}
<script>
    function send_request(post_data){
        var form = $("#notification_action_form");
        var formData = form.serialize() + '&' + post_data + '=true';
        var req = new XMLHttpRequest();
        req.open("POST", ".", false);
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        req.onerror = function() { alert("problem occurred while trying to cancel current workflow"); }
        req.onreadystatechange = function() { if(req.readyState === 4){
            window.top.location.href += '';
        }};
        req.send(formData);
    }
    function delete_notification()
    {
        send_request("delete");
    }
    function mark_unread()
    {
        send_request("unread");
    }
</script>

<div class="d-flex justify-content-between border-bottom">
  <span class="h3">{{notification.title}}</span>
  <div class="btn_group">
      <button class="btn btn-primary inbox-btn" onclick="mark_unread()">Mark Unread</button>
      <button class="btn btn-danger inbox-btn" onclick="delete_notification()">Delete</button>
  </div>
</div>

<p class="content-divider"></p>

{% if not notification.is_html %}
<pre>
{% endif %}
    {{notification.content|safe}}
{% if not notification.is_html %}
</pre>
{% endif %}
<form id="notification_action_form" action="." method="post">
    {% csrf_token %}
</form>
{% endblock %}