{% extends 'base.html' %}

{% block header %}
<h1>Messages for {{ area }} </h1>
<a href="{{ url_for('display_messages', area=area) }}">Back to {{ area }}</a>
{% endblock %}

{% block content %}

<div class="small-12 medium-12 large-12 cell">
<div class="grid-x padding-x">
    <div class="small-2 medium-2 large-2 cell">{% if prevmsg is not none %}
    <a class="button" href="{{ url_for('display_message', area=area, msgno=prevmsg) }}">Previous</a>{% endif %}</div>
    <div class="small-2 medium-2 large-2 cell">{% if nextmsg is not none %}
    <a class="button" href="{{ url_for('display_message', area=area, msgno=nextmsg) }}">Next</a>{% endif %}</div>
</div>

<div class="grid-x padding-x">
    <div class="small-2 medium-2 large-2 cell">Message #:</div>
    <div class="small-10 medium-10 large-10 cell">{{ message.MsgNum }}</div>
</div>

<div class="grid-x padding-x">
    <div class="small-2 medium-2 large-2 cell">Date:</div>
    <div class="small-10 medium-10 large-10 cell">{{ message.written|datefmt }}</div>
</div>

<div class="grid-x padding-x">
<div class="small-2 medium-2 large-2 cell">From:</div>
<div class="small-10 medium-10 large-10 cell">{{ message.from }}</div>
</div>

<div class="grid-x padding-x">
<div class="small-2 medium-2 large-2 cell">To:</div>
<div class="small-10 medium-10 large-10 cell">{{ message.to }}</div>
</div>

<div class="grid-x padding-x">
<div class="small-2 medium-2 large-2 cell">Subject:</div>
<div class="small-10 medium-10 large-10 cell">{{ message.subject }}</div>
</div>

<div class="grid-x padding-x">
<div class="small-12 medium-2 large-2 cell">Text:</div>
<div class="small-12 medium-10 large-10 cell">{% if message.png is defined %}
  <img alt="Message {{ message.MsgNum }}" src="{{ url_for('display_ansi', area=area, msgno=message.MsgNum ) }}">{% else %}
  <pre id="messagetext" class="oldstyle">{{ message.text }}</pre>
  {% if message.rot47 is defined %}
  <script>
  $("#messagetext").easyTooltip({
  content: "{{ message.rot47|safe }}",
  tooltipBgColor: "rgba(200,200,200,1)",
  tooltipOpacity: 1,
});
  </script>
  {% endif %}
  {% endif %}
</div>

</div>

</div>

{% endblock %}