<h2 class="text-xl font-semibold pt-12">Updates</h2>

  <div id="posts-container">

    <p>Loading...</p>

  <script>

    import { AtpAgent } from '@atproto/api';

    const urlParams = new URLSearchParams(window.location.search);

    const rkey = urlParams.get('rkey');

    const DID = 'did:plc:ia2zdnhjaokf5lazhxrmj6eu';

    const atUri = `at://${DID}/app.bsky.feed.post/${rkey}`;

    const agent = new AtpAgent({ service: 'https://public.api.bsky.app' });

    agent.app.bsky.feed.getAuthorFeed({

      actor: DID,

      limit: 20,

      filter: 'posts_no_replies'

    })

    .then(({ data }) => {

      const posts = data.feed;

      if (posts.length === 0) {

        document.getElementById('posts-container').innerHTML = '<p>No recent posts found.</p>';

        return;

      }

      const postsHTML = posts.map(feedItem => {

        const post = feedItem.post;

        const createdAt = new Date(post.record.createdAt).toLocaleDateString();

        // Handle images

        let imagesHTML = '';

        if (post.embed && post.embed.images) {

          const imageElements = post.embed.images.map(image => {

            return `

              <img

                src="${image.fullsize}"

                alt="${image.alt || 'Image from post'}"

                class="max-w-full h-auto"

                loading="lazy"

              />

            `;

          }).join('');

          imagesHTML = `

            <div class="mt-3 grid gap-2 ${post.embed.images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}">

              ${imageElements}

            </div>

          `;

        }

        return `

          <article class="border-b pb-4 mb-6 last:border-b-0">

            <p class="mb-2">${post.record.text}</p>

            ${imagesHTML}

            <time class="text-sm text-gray-500 mt-2 block">${createdAt}</time>

          </article>

        `;

      }).join('');

      document.getElementById('posts-container').innerHTML = `

        <div class="space-y-4">

          <div>${postsHTML}</div>

        </div>

      `;

    })

    .catch(err => {

      console.error('Error fetching posts:', err);

      document.getElementById('posts-container').innerHTML =

        '<p>Error loading recent posts.</p>';

    });

  </script>

  </div>

    function renderPost(post) {

      const createdAt = new Date(post.record.createdAt).toLocaleDateString();

      // Handle images and other embeds

      let embedHTML = '';

      if (post.embed) {

        // Handle images

        if (post.embed.images) {

          const imageElements = post.embed.images.map(image => `

            <img

              src="${image.fullsize}"

              alt="${image.alt || 'Image from post'}"

              class="rounded-lg max-w-full h-auto cursor-pointer"

              loading="lazy"

              onclick="window.open('${image.fullsize}', '_blank')"

            />

          `).join('');

          embedHTML = `

            <div class="mt-4 grid gap-2 ${post.embed.images.length === 1 ? 'grid-cols-1' : 'grid-cols-2'}">

              ${imageElements}

            </div>

          `;

        }

        // Handle external links

        else if (post.embed.external) {

          const external = post.embed.external;

          embedHTML = `

            <a href="${external.uri}" target="_blank" rel="noopener noreferrer"

               class="block mt-4 p-4 border rounded-lg hover:bg-gray-50 transition-colors">

              ${external.thumb ? `<img src="${external.thumb}" alt="Link preview" class="w-full h-32 object-cover rounded mb-3" />` : ''}

              <div class="font-medium text-lg">${external.title || 'External Link'}</div>

              ${external.description ? `<div class="text-sm text-gray-600 mt-1">${external.description}</div>` : ''}

              <div class="text-xs text-gray-400 mt-2">${external.uri}</div>

            </a>

          `;

        }

        // Handle quoted posts

        else if (post.embed.record) {

          const quotedPost = post.embed.record;

          embedHTML = `

            <div class="mt-4 p-4 border-l-4 border-blue-400 bg-gray-50 rounded">

              <div class="text-sm text-gray-600 mb-2">Quoting:</div>

              <div>${quotedPost.value?.text || 'Quoted post'}</div>

              <div class="text-xs text-gray-400 mt-2">

                ${quotedPost.value?.createdAt ? new Date(quotedPost.value.createdAt).toLocaleDateString() : ''}

              </div>

            </div>

          `;

        }

      }

      return `

        <article class="max-w-2xl mx-auto">

          <h1 class="mb-4">${post.record.text}</h1>

          ${embedHTML}

          <div class="mt-6 pt-4 border-t">

            <time class="text-sm text-gray-500">${createdAt}</time>

          </div>

        </article>

      `;

    }

        document.getElementById('post-container').innerHTML = renderPost(post);

          `<p class="text-red-600">Post not found: ${err.message}</p>`;