{# Webmentions Component #}
{# Displays likes, reposts, and replies for a post #}
{# Also checks legacy URLs from micro.blog and old blog for historical webmentions #}
{# Client-side JS supplements build-time data with real-time fetches #}

{% set mentions = webmentions | webmentionsForUrl(page.url, urlAliases, conversationMentions) %}
{% set absoluteUrl = site.url + page.url %}
{% set buildTimestamp = "" | timestamp %}

{# Data container for client-side JS to fetch new webmentions #}
<div data-webmentions
     data-target="{{ absoluteUrl }}"
     data-domain="{{ site.webmentions.domain }}"
     data-buildtime="{{ buildTimestamp }}"
     class="hidden"></div>

{% if mentions.length %}
<section class="webmentions mt-8 pt-8 border-t border-surface-200 dark:border-surface-700" id="webmentions">
  <h2 class="text-lg font-semibold text-surface-700 dark:text-surface-300 mb-6">
    Interactions ({{ mentions.length }})
  </h2>

  {# Likes #}
  {% set likes = mentions | webmentionsByType('likes') %}
  {% if likes.length %}
  <div class="webmention-likes mb-6">
    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
      {{ likes.length }} Like{% if likes.length != 1 %}s{% endif %}
    </h3>
    <is-land on:visible>
    <ul class="facepile" role="list">
      {% for like in likes %}
      <li class="inline" data-wm-source="{{ like['wm-source'] if like['wm-source'] else '' }}" data-author-url="{{ like.author.url }}">
        <a href="{{ like.author.url }}"
           class="facepile-avatar"
           aria-label="{{ like.author.name }} (opens in new tab)"
           target="_blank"
           rel="noopener">
          <img
            src="{{ like.author.photo or '/images/default-avatar.svg' }}"
            alt=""
            class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
            loading="lazy"
          >
        </a>
      </li>
      {% endfor %}
    </ul>
    </is-land>
  </div>
  {% endif %}

  {# Reposts #}
  {% set reposts = mentions | webmentionsByType('reposts') %}
  {% if reposts.length %}
  <div class="webmention-reposts mb-6">
    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
      {{ reposts.length }} Repost{% if reposts.length != 1 %}s{% endif %}
    </h3>
    <is-land on:visible>
    <ul class="facepile" role="list">
      {% for repost in reposts %}
      <li class="inline" data-wm-source="{{ repost['wm-source'] if repost['wm-source'] else '' }}" data-author-url="{{ repost.author.url }}">
        <a href="{{ repost.author.url }}"
           class="facepile-avatar"
           aria-label="{{ repost.author.name }} (opens in new tab)"
           target="_blank"
           rel="noopener">
          <img
            src="{{ repost.author.photo or '/images/default-avatar.svg' }}"
            alt=""
            class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
            loading="lazy"
          >
        </a>
      </li>
      {% endfor %}
    </ul>
    </is-land>
  </div>
  {% endif %}

  {# Bookmarks #}
  {% set bookmarks = mentions | webmentionsByType('bookmarks') %}
  {% if bookmarks.length %}
  <div class="webmention-bookmarks mb-6">
    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
      {{ bookmarks.length }} Bookmark{% if bookmarks.length != 1 %}s{% endif %}
    </h3>
    <is-land on:visible>
    <ul class="facepile" role="list">
      {% for bookmark in bookmarks %}
      <li class="inline" data-wm-source="{{ bookmark['wm-source'] if bookmark['wm-source'] else '' }}" data-author-url="{{ bookmark.author.url }}">
        <a href="{{ bookmark.author.url }}"
           class="facepile-avatar"
           aria-label="{{ bookmark.author.name }} (opens in new tab)"
           target="_blank"
           rel="noopener">
          <img
            src="{{ bookmark.author.photo or '/images/default-avatar.svg' }}"
            alt=""
            class="w-8 h-8 rounded-full ring-2 ring-white dark:ring-surface-900"
            loading="lazy"
          >
        </a>
      </li>
      {% endfor %}
    </ul>
    </is-land>
  </div>
  {% endif %}

  {# Replies #}
  {% set replies = mentions | webmentionsByType('replies') %}
  {% if replies.length %}
  <div class="webmention-replies">
    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-4">
      {{ replies.length }} Repl{% if replies.length != 1 %}ies{% else %}y{% endif %}
    </h3>
    <ul class="space-y-4">
      {% for reply in replies %}
      <li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm"
          data-wm-url="{{ reply.url }}"
          data-wm-source="{{ reply['wm-source'] if reply['wm-source'] else '' }}"
          data-author-url="{{ reply.author.url }}">
        <div class="flex gap-3">
          <a href="{{ reply.author.url }}" target="_blank" rel="noopener">
            <img
              src="{{ reply.author.photo or '/images/default-avatar.svg' }}"
              alt="{{ reply.author.name }}"
              class="w-10 h-10 rounded-full"
              loading="lazy"
            >
          </a>
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-1 flex-wrap">
              <a href="{{ reply.author.url }}"
                 class="font-semibold text-surface-900 dark:text-surface-100 hover:underline"
                 target="_blank"
                 rel="noopener">
                {{ reply.author.name }}
              </a>
              <span class="wm-provenance-badge" data-detect="true"></span>
              <a href="{{ reply.url }}"
                 class="text-xs text-surface-600 dark:text-surface-400 hover:underline"
                 target="_blank"
                 rel="noopener">
                <time class="font-mono" datetime="{{ reply.published }}">
                  {{ reply.published | date("MMM d, yyyy") }}
                </time>
              </a>
            </div>
            <div class="text-surface-700 dark:text-surface-300 prose dark:prose-invert prose-sm max-w-none">
              {{ reply.content.html | safe if reply.content.html else reply.content.text }}
            </div>
            <button class="wm-reply-btn hidden text-xs text-primary-600 dark:text-primary-400 hover:underline mt-2"
                    data-reply-url="{{ reply.url }}"
                    data-platform="">
              Reply
            </button>
          </div>
        </div>
        <div class="wm-owner-reply-slot ml-13 mt-2"></div>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  {# Other mentions #}
  {% set otherMentions = mentions | webmentionsByType('mentions') %}
  {% if otherMentions.length %}
  <div class="webmention-mentions mt-6">
    <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">
      {{ otherMentions.length }} Mention{% if otherMentions.length != 1 %}s{% endif %}
    </h3>
    <ul class="space-y-2 text-sm">
      {% for mention in otherMentions %}
      <li>
        <a href="{{ mention.url }}"
           class="text-accent-600 dark:text-accent-400 hover:underline"
           target="_blank"
           rel="noopener">
          {{ mention.author.name }} mentioned this on <time class="font-mono" datetime="{{ mention.published }}">{{ mention.published | date("MMM d, yyyy") }}</time>
        </a>
      </li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}
</section>
{% endif %}

{# Webmention send form — collapsed by default #}
<details class="webmention-form mt-8">
  <summary class="text-sm font-semibold text-surface-600 dark:text-surface-400 cursor-pointer hover:text-surface-700 dark:hover:text-surface-300 transition-colors list-none [&::-webkit-details-marker]:hidden flex items-center gap-1.5">
    <svg class="w-3.5 h-3.5 transition-transform [[open]>&]:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
    </svg>
    Send a Webmention
  </summary>
  <div class="mt-3 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
    <p class="text-xs text-surface-600 dark:text-surface-400 mb-3">
      Have you written a response to this post? Send a webmention by entering your post URL below.
    </p>
    <form action="https://webmention.io/{{ site.webmentions.domain }}/webmention" method="post" class="flex gap-2">
      <input type="hidden" name="target" value="{{ site.url }}{{ page.url }}">
      <label for="webmention-source" class="sr-only">Your post URL</label>
      <input
        id="webmention-source"
        type="url"
        name="source"
        placeholder="https://your-site.com/response"
        required
        class="flex-1 px-3 py-2 text-sm bg-surface-50 dark:bg-surface-700 border border-surface-300 dark:border-surface-600 rounded"
      >
      <button
        type="submit"
        class="px-4 py-2 text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 rounded transition-colors">
        Send
      </button>
    </form>
  </div>
</details>
