{% extends '__layout__.html' %}
{% block title %}Messages{% endblock %}
{% block head %}
<link href="/static/css/message.css" rel="stylesheet"/>
{% endblock %}
{% block content %}
<div id="main">
    <div class="container" style="max-width:800px;">
        <h1 class="m-0">{%if isOutgoing:%}Outgoing {%endif%}Messages</h1>
        {% if not isOutgoing: %}
        <a class="m-0 mb-2 text-decoration-none" href="/messages/outgoing" style="font-size:11px;">View outgoing messages</a>
        {%else%}
        <a class="m-0 mb-2 text-decoration-none" href="/messages" style="font-size:11px;">View incoming messages</a>
        {%endif%}
        <p class="m-0 mb-2" style="font-size:12px;color:#909090;">Do not share personal or sensitive information. A staff member will never ask for your password or email.</p>
        <div class="linebreak"></div>
        <div>
            {% for message in UserMessages %}
            <a href="/messages/view/{{message.id}}" class="message-row {% if message.read == False %}message-row-unread{% endif %}">
                <img class="message-avatar" src="/Thumbs/Avatar.ashx?x=48&y=48&userId={%if not isOutgoing %}{{message.sender.id}}{%else%}{{message.recipient.id}}{%endif%}" alt="{%if not isOutgoing %}{{message.sender.username}}{%else%}{{message.recipient.username}}{%endif%}"/>
                <div class="message-meta">
                    <div class="d-flex align-items-center w-100">
                        <span class="message-sender">{%if not isOutgoing %}{{message.sender.username}}{%else%}{{message.recipient.username}}{%endif%}</span>
                        <span class="message-time ms-auto">{{message.created.strftime("%b %d, %Y %I:%M %p")}} UTC</span>
                    </div>
                    <p class="message-subject m-0">{{message.subject}} — <span class="message-preview">{{message.content}}</span></p>
                </div>
            </a>
            {%endfor%}
            {% if len(UserMessages.items) == 0: %}
            <h5 class="mt-2 mb-2 text-center">No results found</h5>
            {%endif%}
        </div>
        <div class="linebreak"></div>
        <div class="d-flex align-items-center">
            <a class="ms-auto m-0 text-decoration-none {% if not UserMessages.has_prev %}text-secondary{%endif%}" {% if UserMessages.has_prev %}href="/messages/{%if isOutgoing:%}outgoing{%endif%}?page={{UserMessages.prev_num}}"{%endif%}>Previous</a>
            <p class="ms-3 me-3 m-0">Page {{UserMessages.page}} of {{UserMessages.pages}}</p>
            <a class="me-auto m-0 text-decoration-none {% if not UserMessages.has_next %}text-secondary{%endif%}" {% if UserMessages.has_next %}href="/messages/{%if isOutgoing:%}outgoing{%endif%}?page={{UserMessages.next_num}}"{%endif%}>Next</a>
        </div>
    </div>
</div>
{% endblock %}