{% extends "base.html" %}

{% block head %}
  <link rel="stylesheet" href="/static/css/messages.css">
  <script>let url = "/api/messages/";</script>
{% endblock %}

{% block body %}
  <h1>Your messages</h1>
  Logged in as <b>{{ username }}</b>
  <hr>
  <button id="refresh" onclick="fetchMessages(true);">Refresh</button>
  <p id="switch">
    <b data-url="/api/messages/"        data-id="all"                     href="javascript:(() => { updateURL('all');    })()">All messages</b> -
    <a data-url="/api/messages/?unread" data-id="unread" class="not-bold" href="javascript:(() => { updateURL('unread'); })()">Not responded</a>
  </p>
  <div id="messages"><i class="delete-if-more-messages">Loading...</i></div>
  <button hidden id="more-button" onclick="fetchMessages(false);">Load more</button>
  <script src="/static/js/messages.js?v={{ config.version_str }}"></script>
{% endblock %}