{% extends "base.html" %}

{% block body %}
  <h1>Hey there, {{ username }}!</h1>
  <hr>
  <p><a href="messages/">Read your messages</a> ({{ new }} new)</p>
  <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>
  <hr class="sub">
  <small>
    <a href="{{ config.services.auth.url.pub }}/logout/?to=message">Log out</a> -
    <a href="{{ config.services.auth.url.pub }}{{ login_token }}">Other services</a>
  </small>

  <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 %}