{% extends "base.html" %}


{% load staticfiles %}

{% block content %}

<style media="screen">

  .inbox-panel {
    display: grid;
    grid-template-columns: 30% 5% 65%;
  }

  .section-panel {
    padding: 10px;
  }

  .iframe-panel {
    padding: 0px;
    margin-top: 0px;
  }

  .card-container {
    border: 1px solid #cccccc;
    border-bottom: 0px;
  }
  .card {
    height: 50px;
    position: relative;
    border-bottom: 1px solid #cccccc;
    padding: 10px;
    width: 100%;
    background-color: #ffffff;
    z-index: 5;
  }
  .selected-card {
    background-color: #f3f3f3;
  }

  .card:hover {
    box-shadow: 0px 0 5px 2px #cccccc;
    z-index: 6;
  }

  #inbox-iframe {
    height: calc(100vh - 57px);
  }

  .half_width {
    width: 50%;
  }
  .card-wrapper {
  }

  #page-wrapper{
    padding: 0px;
  }

  .read_notification{
    background-color: #efefef;
  }
</style>

<div class="inbox-panel">
  <div class="section-panel">
    <h4>New:</h4>
    <div class="card-container">
      {% for notification in unread_notifications  %}
        <div class="inbox-entry card" onclick="showmessage({{notification.id}}); setactive(this);">
          {{ notification }}
        </div>
      {% endfor %}
    </div>
    <h4>Read:</h4>
    <div class="card-container">
      {% for notification in read_notifications %}
        <div class="inbox-entry card read_notification" onclick="showmessage({{notification.id}}); setactive(this);">
          {{ notification }}
        </div>
      {% endfor %}
    </div>
  </div>
  <div>
  </div>
  <div class="iframe-panel inbox-expanded-view">
      <div class="inbox-iframe-div">
        <iframe id="inbox-iframe" frameBorder="0" width="100%" height="100vh" scrolling="yes">Please select a notification</iframe>
      </div>
  </div>
</div>

<script type="text/javascript">

  function showmessage(msg_id)
  {
    iframe = document.getElementById("inbox-iframe");
    iframe.src = "notification/" + msg_id;
  }

</script>
{% endblock %}