{% with title="Guestbook", url=config.link + "/guestbook", description="Guestbook - messages and mentions", type='page', image=None, skip_header=not config.header, styles=['/css/blog.css', '/css/reactions.css'] %}
  {% include 'common-head.html' %}
{% endwith %}

<main>
  <article class="container">
    <div class="title">
      <h1>&#128221; Guestbook</h1>
    </div>

    <div class="description">
      <p>
        Messages and mentions from across the web.
        {% if config.enable_webmentions %}
        You can mention this site via <a href="https://indieweb.org/Webmention" target="_blank" rel="noopener">Webmention</a>.
        {% endif %}
        {% if config.enable_activitypub and config.activitypub_profile_url %}
        You can also mention <a href="{{ config.activitypub_profile_url }}">{{ activitypub_handle or '@' + config.activitypub_username }}</a> on the Fediverse.
        {% endif %}
      </p>
      <p class="guestbook-feeds">
        <a href="/guestbook/feed.atom" target="_blank" title="Atom Feed">{% include 'icons/rss.html' %} Atom</a>
        <a href="/guestbook/feed.rss" target="_blank" title="RSS Feed">{% include 'icons/rss.html' %} RSS</a>
      </p>
    </div>

    {% if reactions_tree %}
      {% with utils=utils %}
        {% include 'reactions.html' %}
      {% endwith %}
    {% else %}
      <div class="guestbook-empty">
        <p>No messages yet. Be the first to leave a note!</p>
      </div>
    {% endif %}
  </article>
</main>

<style>
.guestbook-empty {
  text-align: center;
  padding: 2em;
  color: var(--color-fg-secondary);
  font-style: italic;
}

.guestbook-feeds {
  display: flex;
  gap: 1em;
  margin-top: 0.5em;
}

.guestbook-feeds a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--color-fg-secondary);
  text-decoration: none;
  font-size: 0.9em;
}

.guestbook-feeds a:hover {
  color: var(--color-fg-primary);
}

.guestbook-feeds svg {
  width: 16px;
  height: 16px;
}
</style>

{% include 'footer.html' %}
{% include 'common-tail.html' %}