{% 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>
  <p>Logged in as <a href="/u/{{ username }}">{{ username }}</a></p>
  <hr>
  <p>
    <div>Your message link: <code class="cursor-pointer" id="message-link">{{ config.services.message.url.pub }}/m/{{ username }}/</code></div>
    <div><small>(click to copy)</small></div>
  </p>

  <p><button id="refresh" onclick="fetchMessages(true);">Refresh</button></p>
  <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="{{ config.services.common.url.pub }}/static/js/base.js?v={{ config.version_str }}"></script>
  <script src="/static/js/messages.js?v={{ config.version_str }}"></script>
  <script>
    document.getElementById("message-link").addEventListener("click", function() {
      navigator.clipboard.writeText(this.innerText);
      this.classList.remove("success-anim");
      setTimeout(() => { this.classList.add("success-anim"); }, 10);
    });
  </script>
{% endblock %}