{# Bluesky Thread Component #}
{# Fetches and displays replies from the syndicated Bluesky post via the AT Protocol public API #}
{# Only renders when the post has a bsky.app syndication URL #}

{% set bskySyndUrl = "" %}
{% if syndication %}
  {% for url in syndication %}
    {% if "bsky.app" in url %}
      {% set bskySyndUrl = url %}
    {% endif %}
  {% endfor %}
{% endif %}

{% if bskySyndUrl %}
<div x-data="bskyThread('{{ bskySyndUrl }}')" class="mt-8">
  <template x-if="!loading && replies.length > 0">
    <section class="bluesky-thread pt-8 border-t border-surface-200 dark:border-surface-700">
      <h2 class="text-lg font-semibold text-surface-700 dark:text-surface-300 mb-6 flex items-center gap-2">
        <svg class="w-5 h-5 text-[#0085ff] flex-shrink-0" viewBox="0 0 568 501" fill="currentColor" aria-hidden="true">
          <path d="M123.121 33.664C188.241 82.553 258.281 181.68 284 234.873c25.719-53.192 95.759-152.32 160.879-201.21C491.866-1.611 568-28.906 568 57.947c0 17.346-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.748C507.222 323.8 536.444 388.56 473.333 453.32c-119.86 122.992-172.272-30.859-185.702-70.281-2.462-7.227-3.614-10.608-3.631-7.733-.017-2.875-1.169.506-3.631 7.733-13.43 39.422-65.842 193.273-185.702 70.281-63.111-64.76-33.89-129.52 80.986-149.071-65.72 11.185-139.6-7.295-159.875-79.748C9.945 203.659 0 75.291 0 57.946 0-28.906 76.135-1.612 123.121 33.664Z"/>
        </svg>
        Bluesky Thread (<span x-text="replies.length"></span>)
      </h2>
      <ul class="space-y-3">
        <template x-for="reply in replies" :key="reply.uri">
          <li class="p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm"
              :class="reply.depth > 0 ? 'ml-4 sm:ml-8' : ''">
            <div class="flex gap-3">
              <a :href="reply.author.url" target="_blank" rel="noopener" class="flex-shrink-0">
                <img :src="reply.author.avatar || '/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 text-sm"
                     target="_blank" rel="noopener"
                     x-text="reply.author.name"></a>
                  <span class="text-xs text-surface-500 dark:text-surface-400"
                        x-text="'@' + reply.author.handle"></span>
                  <a :href="reply.url"
                     class="text-xs text-surface-500 dark:text-surface-400 hover:underline ml-auto"
                     target="_blank" rel="noopener">
                    <time :datetime="reply.published" x-text="formatDate(reply.published)"></time>
                  </a>
                </div>
                <p class="text-surface-700 dark:text-surface-300 text-sm whitespace-pre-wrap break-words"
                   x-text="reply.text"></p>
                <div x-show="reply.likeCount > 0"
                     class="mt-1.5 text-xs text-surface-400 dark:text-surface-500 flex items-center gap-1">
                  <svg class="w-3 h-3" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                  </svg>
                  <span x-text="reply.likeCount"></span>
                </div>
              </div>
            </div>
          </li>
        </template>
      </ul>
      <p class="mt-4 text-xs text-surface-400 dark:text-surface-500">
        <a :href="'{{ bskySyndUrl }}'" class="hover:underline" target="_blank" rel="noopener">
          Vollständigen Thread auf Bluesky ansehen
        </a>
      </p>
    </section>
  </template>
</div>
{% endif %}