{% 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>
    <h3 class="msg_header">{{notification.title}}
    <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>
    </h3>
</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>

<style media="screen">
  .card-container {
    border: 1px solid #ffffff;
    margin-top: 11px;
  }
  .card {
    height: 50px;
    margin: 0px;
    position: relative;
    border-bottom: 1px solid #cccccc;
    padding: 0px;
    width: 100%;
    background-color: #ffffff;
    z-index: 5;
  }
  .sender {
    color: #636363;
  }
  .content-divider {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 15px;
    clear: right;
  }
  .inbox-btn{
    display: inline;
    margin: 3px;
  }
  .btn_group{
    float: right;
  }
</style>
{% endblock %}