{% extends 'base.html' %}
{% block head %}
{% include 'modules/head.html' %}
{% include 'modules/planet_seo.html' %}
{% endblock %}

{% block dom_ready %}
window.onpopstate = function(event) {
  if (event.state) {
    const postModal = document.getElementById("post-modal");
    postModal.style.display = "none";
  }
};
{% endblock %}

{% block main %}
<div id="body-dom">
  <div id="body-header">
    <div id="tags-container">
      <div id="tags">
        <div id="default-tag" class="tag"><span class="tag-text">all</span></div>
        {% for tag in planet.tags %}
        <div id="custom-tag-{{ tag }}" class="tag custom-tag"><span class="tag-text">{{ tag }}</span><span class="remove">×</span></div>
        {% endfor %}
      </div>
    </div>
    <div id="post-mode-button" class="post-mode-button"><span id="grid-post-mode-button" class="post-mode-button-icon post-mode-button-active"> </span>|<span id="list-post-mode-button" class="post-mode-button-icon"> ☰</span></div>
  </div>
  <div class="body-content">
    <div id="post-frames-container"></div>
    <div id="post-list-container"></div>
    <div id="posts-loading-animation" class="body-loading-animation loading-animation"></div>
  </div>
</div>
{% include './fork-modal.html' %}
<div id="post-modal" class="modal negative-space">
  <div class="modal-content body-content centered-content content-top-offset negative-space">
    <div class="exit-button mobile-padding negative-space"><span class="exit-button-text negative-space">×</span></div>
    {% include './post-page.html' %}
  </div>
</div>
<script>
  // Configuration constants.
  const IndexCONFIG = {
    horizontalMargin: 20,
    verticalMargin: 20,
    postFrameWidthClasses: ["post-frame-w1"], //, "post-frame-w3", "post-frame-w3"];
    noScrollEffectEdgeDistance: 80,
    toggleNavVisibilityScrollThreshold: 50,
    pagingMargingBottom: 100,
    timeTillIdle: 2000,
    defaultPageSize: 200,
    scrollFast: 3,
    threshold: 0.95
  };

  // DOM element cache for better performance.
  const IndexDOM = {
    postModal: document.getElementById("post-modal"),
    postFramesContainer: document.getElementById("post-frames-container"),
    postListContainer: document.getElementById("post-list-container"),
    postsLoadingAnimation: document.getElementById("posts-loading-animation"),
    postFormStateChainInput: document.getElementById("post-form-state-chain-input"),
    postFormStateCollectionAddressInput: document.getElementById("post-form-state-collection-address-input"),
    postModeButton: document.getElementById("post-mode-button"),
    gridPostModeButton: document.getElementById("grid-post-mode-button"),
    listPostModeButton: document.getElementById("list-post-mode-button"),
    tagsContainer: document.getElementById("tags-container"),
    defaultTag: document.getElementById("default-tag"),
    topDomShrinkWrapper: document.getElementById("top-dom-shrink-wrapper"),
    headerContainer: document.getElementById("header-container"),
    topDom: document.getElementById("top-dom"),
    bodyDom: document.getElementById("body-dom"),
    peersCountLabel: document.getElementById("peers-count"),
    balanceValue: document.getElementById("balance-value"),
    ownersCount: document.getElementById("owners-count"),
    operatorValue: document.getElementById("operator-value"),
    featurePageMetrics: document.getElementById("feature-page-metrics"),
    pageMetricsLink: document.getElementById("page-metrics-link")
  };

  // Layout variables.
  let posts = [];
  let currentRow = 1;
  let greatestRightInRow = 0;
  let rows = [];
  let lastScrollTop = 0;

  // State variables.
  let nextPageOffset = 0;
  let canLoadNewPosts = true;
  let hasDecoratedTags = false;
  let activeTags = [];
  let projectTags =  {};
  let postMode = "frames";

  // Note: showNav and hideNav functions are defined in top-dom.html

  const loadPostsState = async (encodedIPFSUris) => {
    // Load tiers.
    const chain = IndexDOM.postFormStateChainInput.value;
    const collectionAddress = parseInt(IndexDOM.postFormStateCollectionAddressInput.value);

    const tiers = await tx_view_tiers(collectionAddress, encodedIPFSUris, resolveChainId(chain));

    for (let i in tiers) {
      const tier = tiers[i];
      if (tier[0] == 0) continue;

      // Set a chain object.
      if (!tiersCache[chain]) tiersCache[chain] = {};

      // Cache the value.
      if (!tiersCache[chain][collectionAddress]) tiersCache[chain][collectionAddress] = {};
      tiersCache[chain][collectionAddress][encodedIPFSUris[i]] = tier;
    }
  }

  const decoratePostFrameState = (postFrame, collectionAddress, encodedIPFSUri) => {
    const chain = IndexDOM.postFormStateChainInput.value;

    if (!tiersCache[chain]) tiersCache[chain] = {};
    if (!tiersCache[chain][collectionAddress]) tiersCache[chain][collectionAddress] = {};
    const tier = tiersCache[chain][collectionAddress][encodedIPFSUri];
    if (!tier) return;

    const state = postFrame.querySelector(".post-frame-state");

    // Get a reference to the tier's remaining supply.
    const formattedRemainingSupply = parseInt(tier[2].toString());
    const formattedTotalSupply = parseInt(tier[3].toString());

    // Set the content.
    if (formattedTotalSupply > 0 && formattedRemainingSupply == 0) {
      state.innerHTML = 'sold out';
      state.classList.add("alert");
    } else {
      state.textContent = `${formattedRemainingSupply > 10000000 ? "infinite" : formattedRemainingSupply } left`;
    }
  }

  const decoratePostRowState = (postRow, collectionAddress, encodedIPFSUri) => {
    const chain = IndexDOM.postFormStateChainInput.value;

    if (!tiersCache[chain]) tiersCache[chain] = {};
    if (!tiersCache[chain][collectionAddress]) tiersCache[chain][collectionAddress] = {};
    const tier = tiersCache[chain][collectionAddress][encodedIPFSUri];
    if (!tier) return;

    const state = postRow.querySelector(".post-row-state");

    // Get a reference to the tier's remaining supply.
    const formattedRemainingSupply = parseInt(tier[2].toString());
    const formattedTotalSupply = parseInt(tier[3].toString());

    // Set the content.
    if (formattedTotalSupply > 0 && formattedRemainingSupply == 0) {
      state.innerHTML = 'sold out';
      state.classList.add("alert");
    } else {
      state.textContent = `${formattedRemainingSupply > 10000000 ? "infinite" : formattedRemainingSupply } left`;
    }
  }

  const decoratePostFrame = async (postFrame, post, postId, date, name, link, tags, content, coverImageSrc, coverVideoSrc, coverAudioSrc, coverAutogenerated) => {
    const collectionAddress = parseInt(IndexDOM.postFormStateCollectionAddressInput.value);

    // Set a default name if needed.
    if (name === undefined || name === null || name === "") name = "untitled";

    // Get references to frame elements that need decorating.
    const subtitle = postFrame.querySelector(".post-frame-subtitle");
    const title = postFrame.querySelector(".post-frame-title");
    const frameImage = postFrame.querySelector("img");

    // Set the frame and img's ID.
    postFrame.id = 'frame-' + postId;
    if (post.heroImageWidth && post.heroImageHeight) {
      postFrame.setAttribute("data-mediaWidth", post.heroImageWidth);
      postFrame.setAttribute("data-mediaHeight", post.heroImageHeight);
    }

    if (post.pinned && post.pinned > 0) {
      const icon = document.createElement("div");
      icon.innerHTML = "";
      icon.classList.add("post-frame-pinned-icon");
      postFrame.appendChild(icon);
    }

    const verb = content.length > 150 ? "read" : "see";

    // Set the content.
    title.innerHTML = name;
    subtitle.innerHTML = `${date}${ (post.pinned && post.pinned > 0 ) ? '<span class="space">•</span>pinned' : "" }<span class="space">•</span><span class="post-frame-state">click to ${verb}</span>${ Object.keys(tags).length ? '<span class="space">•</span>' : "" }${Object.values(tags).map(tag => `<div class="tag">${tag}</div>`).join(" ")}`;

    if (name == "✃") title.classList.add("bigger-font");

    if (coverVideoSrc) {
      const frameVideo = document.createElement("video");
      const frameVideoCurrentTime = document.createElement("span");
      const frameVideoDuration = document.createElement("span");
      const frameVideoAnimation = document.createElement("span");
      frameVideo.classList.add("post-frame-video");
      frameVideoAnimation.id = 'frame-video-' + postId;
      frameVideo.style.display = "block";
      frameVideo.autoplay = false;
      frameVideo.loop = true;
      frameVideo.poster = "{{ assets_prefix }}" + postId + "/_videoThumbnail.png";
      frameVideo.playsInline = true;
      frameVideo.preload = "auto";
      frameVideo.muted = true;  // So hover to play works. See https://developer.chrome.com/blog/autoplay/
      // TODO: If user has interacted with the page, unmute.
      frameVideo.controls = false;
      // Mark videos with playback info.
      subtitle.appendChild(document.createTextNode(" • "));
      subtitle.appendChild(frameVideoAnimation);
      subtitle.appendChild(frameVideoCurrentTime);
      subtitle.appendChild(frameVideoDuration);
      frameVideo.src = coverVideoSrc;
      prepareAudioAnimation(frameVideoAnimation.id);
      postFrame.appendChild(frameVideo);

      const overlay = document.createElement("div");
      overlay.innerHTML = "[▶]";
      overlay.classList.add("overlay-play-icon");
      postFrame.appendChild(overlay);

      frameVideo.addEventListener('loadedmetadata', () => {
        frameVideoDuration.textContent = formatPlayclock(frameVideo.duration);
        frameVideoCurrentTime.textContent = ` ${formatPlayclock(frameVideo.currentTime)} / `;
      });
      frameVideo.addEventListener('timeupdate', () => {
          frameVideoCurrentTime.textContent = ` ${formatPlayclock(frameVideo.currentTime)} / `;
      });
      let hideInfoAnimation;
      frameVideo.addEventListener("mouseover", () => {
        if (!frameVideo.paused) return;
        frameVideo.play();
        startAudioAnimation(frameVideoAnimation.id);
      });
      frameVideo.addEventListener("mousemove", () => {
        postFrame.classList.remove("idle");
        clearTimeout(hideInfoAnimation);
        hideInfoAnimation = setTimeout(() => {
          postFrame.classList.add("idle");
        }, IndexCONFIG.timeTillIdle);
      });
      frameVideo.addEventListener("mouseout", () => {
        clearTimeout(hideInfoAnimation);
        frameVideo.pause();
        stopAudioAnimation(frameVideoAnimation.id);
      });
    } else if (coverAudioSrc) {
      const frameAudioContainer = document.createElement("div");
      const frameAudio = document.createElement("audio");
      const frameAudioSource = document.createElement("source");
      const frameAudioCurrentTime = document.createElement("span");
      const frameAudioDuration = document.createElement("span");
      const frameAudioAnimation = document.createElement("span");
      frameAudioContainer.classList.add("post-frame-audio-container");
      frameAudioCurrentTime.classList.add("post-frame-audio-play-clock");
      frameAudioDuration.classList.add("post-frame-audio-play-clock");
      frameAudioAnimation.id = 'frame-audio-' + postId;
      frameAudio.autoplay = false;
      frameAudio.loop = true;
      frameAudio.muted = false;
      frameAudio.controls = false;
      subtitle.innerHTML = `${subtitle.innerHTML}`;
      frameAudioSource.src = coverAudioSrc;
      frameAudioSource.loading = "lazy";
      frameAudio.appendChild(frameAudioSource);
      frameAudioContainer.appendChild(frameAudio);
      frameAudioContainer.appendChild(frameAudioAnimation);
      frameAudioContainer.appendChild(frameAudioCurrentTime);
      frameAudioContainer.appendChild(frameAudioDuration);
      postFrame.appendChild(frameAudioContainer);
      prepareAudioAnimation(frameAudioAnimation.id);
      frameAudio.addEventListener('loadedmetadata', () => {
        frameAudioDuration.textContent = formatPlayclock(frameAudio.duration);
        frameAudioCurrentTime.textContent = ` ${formatPlayclock(frameAudio.currentTime)} / `;
      });
      frameAudio.addEventListener('timeupdate', () => {
          frameAudioCurrentTime.textContent = ` ${formatPlayclock(frameAudio.currentTime)} / `;
      });
      frameAudioContainer.addEventListener("mouseover", () => {
        if (!frameAudio.paused) return;
        frameAudio.play();
        startAudioAnimation(frameAudioAnimation.id);
      });
      frameAudioContainer.addEventListener("mouseout", () => {
        frameAudio.pause();
        stopAudioAnimation(frameAudioAnimation.id);
      });

      const overlay = document.createElement("div");
      overlay.innerHTML = "[▶]";
      overlay.classList.add("overlay-play-icon");
      postFrame.appendChild(overlay);

    } else if (coverImageSrc && !coverAutogenerated) {
      const frameImage = document.createElement("img");
      frameImage.classList.add("post-frame-image");
      frameImage.style.display = "block";
      frameImage.src = coverImageSrc;
      frameImage.loading = "lazy";
      postFrame.appendChild(frameImage);
    } else {
      const frameText = document.createElement("div");
      frameText.classList.add("post-frame-text");
      frameText.innerHTML = content.slice(0, 200).replace(/\n/g, "<br>");
      postFrame.appendChild(frameText);
    }

    const encodedIPFSUri = await encodeIPFSUriFrom("{{ assets_prefix }}", postId);

    // Summon a modal when the frame is clicked.
    postFrame.addEventListener("click", async (e) => {
      e.preventDefault();

      // Show the modal.
      IndexDOM.postModal.style.display = "block";

      toggleNavVisibility();

      // Make the modal look right.
      await decoratePostModal(post, postId, encodedIPFSUri, name, date, link, renderMarkdown(content), coverImageSrc, coverVideoSrc, coverAudioSrc, coverAutogenerated);

      // Make the body not scrollable.
      document.body.style.overflow = "hidden";
    });

    decoratePostFrameState(postFrame, collectionAddress, encodedIPFSUri);
  }

  const decoratePostRow = async (postRow, post, postId, date, name, link, tags, content, thumbnailImageSrc, thumbnailVideoSrc, thumbnailAudioSrc, thumbnailAutogenerated) => {
    const collectionAddress = parseInt(IndexDOM.postFormStateCollectionAddressInput.value);

    // Set a default name if needed.
    if (name === undefined || name === null || name === "") name = "untitled";

    // Get references to frame elements that need decorating.
    const subtitle = postRow.querySelector(".post-row-subtitle");
    const title = postRow.querySelector(".post-row-title");
    const thumbnail = postRow.querySelector(".post-row-thumbnail");

    const verb = content.length > 150 ? "read" : "see";

    // Set the frame and img's ID.
    postRow.id = 'row-' + postId;

    // Set the content.
    title.innerHTML = name;
    subtitle.innerHTML = `${date} • <span class="post-row-state">click to ${verb}</span> ${ Object.keys(tags).length ? "•" : "" }${Object.values(tags).map(tag => `<div class="tag">${tag}</div>`).join(" ")}`;

    if (name == "✃") title.classList.add("bigger-font");

    if (thumbnailVideoSrc) {
      const thumbnailVideo = document.createElement("video");
      const thumbnailVideoCurrentTime = document.createElement("span");
      const thumbnailVideoDuration = document.createElement("span");
      const thumbnailVideoAnimation = document.createElement("span");
      thumbnailVideo.classList.add("row-thumbnail-video");
      thumbnailVideoAnimation.id = 'thumbnail-video-' + postId;
      thumbnailVideo.style.display = "block"
      thumbnailVideo.autoplay = false;
      thumbnailVideo.loop = true;
      thumbnailVideo.muted = false;
      thumbnailVideo.controls = false;
      // Mark videos with playback info.
      subtitle.appendChild(document.createTextNode(" • "));
      subtitle.appendChild(thumbnailVideoAnimation);
      subtitle.appendChild(thumbnailVideoCurrentTime);
      subtitle.appendChild(thumbnailVideoDuration);
      prepareAudioAnimation(thumbnailVideoAnimation.id);
      thumbnailVideo.src = thumbnailVideoSrc;
      thumbnailVideo.loading = "lazy";
      thumbnail.appendChild(thumbnailVideo);
      thumbnailVideo.addEventListener('loadedmetadata', () => {
        thumbnailVideoDuration.textContent = formatPlayclock(thumbnailVideo.duration);
        thumbnailVideoCurrentTime.textContent = ` ${formatPlayclock(thumbnailVideo.currentTime)} / `;
      });
      thumbnailVideo.addEventListener('timeupdate', () => {
          thumbnailVideoCurrentTime.textContent = ` ${formatPlayclock(thumbnailVideo.currentTime)} / `;
      });
      postRow.addEventListener("mouseover", () => {
        if (!thumbnailVideo.paused) return;
        thumbnailVideo.play();
        startAudioAnimation(thumbnailVideoAnimation.id);
      });
      postRow.addEventListener("mouseout", () => {
        thumbnailVideo.pause();
        stopAudioAnimation(thumbnailVideoAnimation.id);
      });
    } else if (thumbnailAudioSrc) {
      const rowAudioContainer = document.createElement("div");
      const rowAudio = document.createElement("audio");
      const rowAudioSource = document.createElement("source");
      const rowAudioCurrentTime = document.createElement("span");
      const rowAudioDuration = document.createElement("span");
      const rowAudioAnimation = document.createElement("span");
      rowAudioContainer.classList.add("post-row-audio-container");
      rowAudioCurrentTime.classList.add("post-row-audio-play-clock");
      rowAudioDuration.classList.add("post-row-audio-play-clock");
      rowAudioAnimation.id = 'row-audio-' + postId;
      rowAudio.autoplay = false;
      rowAudio.loop = true;
      rowAudio.muted = false;
      rowAudio.controls = false;
      subtitle.innerHTML = `${subtitle.innerHTML} • [▶]`
      rowAudioSource.src = thumbnailAudioSrc;
      rowAudioSource.loading = "lazy";
      rowAudio.addEventListener('loadedmetadata', () => {
        rowAudioDuration.textContent = formatPlayclock(rowAudio.duration);
        rowAudioCurrentTime.textContent = ` ${formatPlayclock(rowAudio.currentTime)} / `;
      });
      rowAudio.addEventListener('timeupdate', () => {
          rowAudioCurrentTime.textContent = ` ${formatPlayclock(rowAudio.currentTime)} / `;
      });
      rowAudio.appendChild(rowAudioSource);
      rowAudioContainer.appendChild(rowAudio);
      rowAudioContainer.appendChild(rowAudioAnimation);
      rowAudioContainer.appendChild(rowAudioCurrentTime);
      rowAudioContainer.appendChild(rowAudioDuration);
      thumbnail.appendChild(rowAudioContainer);
      prepareAudioAnimation(rowAudioAnimation.id);
      postRow.addEventListener("mouseover", () => {
        if (!rowAudio.paused) return;
        rowAudio.play();
        startAudioAnimation(rowAudioAnimation.id);
      });
      postRow.addEventListener("mouseout", () => {
        rowAudio.pause();
        stopAudioAnimation(rowAudioAnimation.id);
      });
    } else if (thumbnailImageSrc && !thumbnailAutogenerated) {
      const thumbnailImage = document.createElement("img");
      thumbnailImage.classList.add("row-thumbnail-image");
      thumbnailImage.style.display = "block"
      thumbnailImage.src = thumbnailImageSrc;
      thumbnailImage.loading = "lazy";
      thumbnail.appendChild(thumbnailImage);
    } else {
      const thumbnailTextContainer = document.createElement("div");
      const thumbnailText = document.createElement("div");
      thumbnailTextContainer.classList.add("post-row-thumbnail-text-container");
      thumbnailText.classList.add("post-row-thumbnail-text");
      thumbnailText.innerHTML = content.slice(0, 100).replace(/\n/g, "<br>");
      thumbnailTextContainer.appendChild(thumbnailText)
      thumbnail.appendChild(thumbnailTextContainer);
    }

    const encodedIPFSUri = await encodeIPFSUriFrom("{{ assets_prefix }}", postId);

    // Summon a modal when the frame is clicked.
    postRow.addEventListener("click", async (e) => {
      e.preventDefault();

      // Show the modal.
      IndexDOM.postModal.style.display = "block";

      toggleNavVisibility();

      // Make the modal look right.
      await decoratePostModal(post, postId, encodedIPFSUri, name, date, link, renderMarkdown(content), thumbnailImageSrc, thumbnailVideoSrc, thumbnailAudioSrc, thumbnailAutogenerated);

      // Make the body not scrollable.
      document.body.style.overflow = "hidden";
    });

    decoratePostRowState(postRow, collectionAddress, encodedIPFSUri);
  }

  /// Load the frame contents.
  const loadMedia = async (container) => {
    const media = container.querySelector('img:first-of-type') || container.querySelector('video:first-of-type');
    if (!media) return;
    const mediaWidth = container.getAttribute("data-mediaWidth");
    const mediaHeight = container.getAttribute("data-mediaHeight");
    if (mediaWidth && mediaHeight) {
      media.style.width = "100%";
      media.style.aspectRatio = `${mediaWidth}/${mediaHeight}`;
    }
    return new Promise((resolve) => {
      // Resolve if the image if done.
      if (media.complete) return resolve();

      if (mediaWidth && mediaHeight) return resolve();

      const checkForDimensions = () => {
        // Resolve if the img has dimensions.
        if ((media.width || media.videoWidth) && (media.height || media.videoHeight)) return setTimeout(resolve, 500);
        // Otherwise wait until the image has dimensions.
        else
          return requestAnimationFrame(checkForDimensions);
      }

      checkForDimensions();
    });
  }

  /// Get the top.
  const getTopTarget = (postFrame, row) => {
    if (row == 1) {
      return IndexDOM.postFramesContainer.offsetTop;
    }

    let previousRow = rows[row - 2];
    let candidatePostFrame;

    for (let j = 0; j < previousRow.postFrameReferences.length; j++) {
      let postFrameToCheck = previousRow.postFrameReferences[j];

      if (
        postFrame.left < postFrameToCheck.right + IndexCONFIG.horizontalMargin &&
        postFrame.right + IndexCONFIG.horizontalMargin > postFrameToCheck.left &&
        (candidatePostFrame == null || postFrameToCheck.bottom > candidatePostFrame.bottom)
      ) candidatePostFrame = postFrameToCheck;
      else if (j == previousRow.postFrameReferences.length - 1 && postFrame.left >= postFrameToCheck.right + IndexCONFIG.horizontalMargin) {
        return candidatePostFrame ? candidatePostFrame.bottom : getTopTarget(postFrame, row - 1);
      }
    }

    if (!candidatePostFrame) {
      console.log({ postFrame, row, previousRow });
    }

    return candidatePostFrame.bottom;
  }

  const framePost = () => {
    const frame = document.createElement("div");
    const infoContainer = document.createElement("div");
    const info = document.createElement("div");
    const title = document.createElement("div");
    const subtitle = document.createElement("div");

    frame.classList.add("post-frame");
    infoContainer.classList.add("post-frame-info-container");
    info.classList.add("post-frame-info");
    subtitle.classList.add("post-frame-subtitle");
    title.classList.add("post-frame-title");

    // Get random width.
    const widthClass = IndexCONFIG.postFrameWidthClasses[Math.floor(Math.random() * IndexCONFIG.postFrameWidthClasses.length)];
    frame.classList.add(widthClass);

    info.appendChild(title);
    info.appendChild(subtitle);
    infoContainer.appendChild(info);
    frame.appendChild(infoContainer);
    IndexDOM.postFramesContainer.appendChild(frame);

    return frame;
  }

  const listPost = () => {
    const rowContainer = document.createElement("div");
    const row = document.createElement("div");
    const info = document.createElement("div");
    const title = document.createElement("div");
    const subtitle = document.createElement("div");
    const thumbnail = document.createElement("div");

    rowContainer.classList.add("post-row-container");
    row.classList.add("post-row");
    info.classList.add("post-row-info");
    title.classList.add("post-row-title");
    subtitle.classList.add("post-row-subtitle");
    thumbnail.classList.add("post-row-thumbnail");

    info.appendChild(title);
    info.appendChild(subtitle);
    row.appendChild(thumbnail);
    row.appendChild(info);
    rowContainer.appendChild(row);
    IndexDOM.postListContainer.appendChild(rowContainer);

    return row;
  }

  const positionAndShowPostFrame = async (postFrame) => {
    await loadMedia(postFrame);

    const rect = postFrame.getBoundingClientRect();
    if (rect.left < greatestRightInRow) currentRow++;

    greatestRightInRow = rect.right;

    const heightDiff = rect.top - getTopTarget(rect, currentRow);
    const newFrame = { left: rect.left, right: rect.right, bottom: rect.bottom - heightDiff + IndexCONFIG.verticalMargin };

    if (currentRow > rows.length) rows.push({ postFrameReferences: [newFrame] });
    else rows[rows.length - 1].postFrameReferences.push(newFrame);

    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const marginTop = window.getComputedStyle(postFrame).display == "block" ? 0 : heightDiff + scrollTop - IndexCONFIG.verticalMargin;
    postFrame.classList.add("post-frame-fade-in");

    return new Promise((resolve) => {
      if (marginTop) {
        const handleEvent = (event) => {
          if (event.propertyName === "margin-top") {
            postFrame.removeEventListener("transitionend", handleEvent);
            resolve();
          }
        };
        postFrame.addEventListener("transitionend", handleEvent);
        postFrame.style.marginTop = -marginTop + "px";
      } else resolve();
    });
  }

  const decoratePostModal = async (post, postId, encodedIPFSUri, name, date, link, content, imageSrc, videoSrc, audioSrc, coverAutogenerated) => {
    // Get references to modal elements that need decorating.
    const postFormErrorMessage= document.getElementById("post-form-error-message");
    const recordPostForm = document.getElementById("record-post-form");
    const collectPostForm = document.getElementById("collect-post-form");
    const postImage = document.getElementById("post-cover-image");
    const postVideo = document.getElementById("post-cover-video");
    const postAudio = document.getElementById("post-cover-audio");
    const postContent = document.getElementById("post-content");

    requestAnimationFrame(() => {
      const headerContainerHeight = IndexDOM.headerContainer.offsetHeight;
      const borderHeight = parseInt(IndexDOM.topDomShrinkWrapper.style.borderBottomWidth, 10);
      const paddingTop = headerContainerHeight + borderHeight;
      IndexDOM.postModal.style.paddingTop = paddingTop + 'px';
      IndexDOM.postModal.style.scrollPaddingTop = parseFloat(window.getComputedStyle(IndexDOM.postModal).getPropertyValue('scroll-padding-top')) + paddingTop + "px";
    });

    // Track the modal in browse history.
    history.pushState({ modalOpened: true, postId }, "", "?id=" + postId);


    // Close the modal only when clicking the exit button.
    // Removed click-to-close on negative space functionality.
    const exitButton = IndexDOM.postModal.querySelector('.exit-button');
    exitButton.addEventListener("click", (e) => {
      // Make the body scrollable.
      document.body.style.overflow = "auto";

      // If there's a video, pause it.
      if (videoSrc) postVideo.pause();
      // If there's audio, pause it.
      if (audioSrc) postAudio.pause();

      // Hide the RECORD form.
      recordPostForm.style.display = "none";
      // Hide the COLLECT form.
      collectPostForm.style.display = "none";
      // Hide the error message.
      postFormErrorMessage.style.display = "none";
      // Hide the content
      postImage.style.display = "none"
      postVideo.style.display = "none"
      postContent.style.display = "none"

      // Hide the modal.
      IndexDOM.postModal.style.display = "none";

      toggleNavVisibility();

      // Reset the view stack browsing state.
      history.pushState({}, "", window.location.pathname);
    });

    // Show the post page.
    await decoratePostPage(postId, name, date, link, content, imageSrc, videoSrc, audioSrc, encodedIPFSUri, coverAutogenerated);

    await decorateAttachments(post);
    await decorateAggregation(post);
  }

  const showPostFrames = async (newPosts) => {
    const newPostFrames = newPosts.map((post) => {
      // if post.hasVideo, use _videoThumbnail.png
      // else use a random attachment
      const coverImageName = post.hasVideo ? '_videoThumbnail.png' : post.hasAudio ? '_audioThumbnail.png' : post.heroImageFilename ? post.heroImageFilename : post.attachments.length && post.attachments[Math.floor(Math.random() * post.attachments.length)];
      const coverImageSrc = coverImageName && './' + post.id + '/' + coverImageName;
      const coverVideoSrc = post.hasVideo ? './' + post.id + '/' + post.videoFilename : null;
      const coverAudioSrc = post.hasAudio ? './' + post.id + '/' + post.audioFilename : null;
      const coverAutogenerated = coverImageName == "_cover.png";
      const frame = framePost();
      decoratePostFrame(frame, post, post.id, formatTimestamp(post.created), post.title, post.externalLink, post.tags, post.content, coverImageSrc, coverVideoSrc, coverAudioSrc, coverAutogenerated);
      return frame;
    });

    for (const postFrame of newPostFrames)
      await positionAndShowPostFrame(postFrame);
  }

  const showPostList = async (newPosts) => {
    const newPostRows = newPosts.map((post) => {
      // if post.hasVideo, use _videoThumbnail.png
      // else use a random attachment
      const thumbnailImageName = post.hasVideo ? '_videoThumbnail.png' : post.attachments.length && post.attachments[Math.floor(Math.random() * post.attachments.length)];
      const thumbnailImageSrc = thumbnailImageName && './' + post.id + '/' + thumbnailImageName;
      const thumbnailVideoSrc = post.hasVideo ? './' + post.id + '/' + post.videoFilename : null;
      const thumbnailAudioSrc = post.hasAudio ? './' + post.id + '/' + post.audioFilename : null;
      const thumbnailAutogenerated = thumbnailImageName == "_cover.png";
      const row = listPost();
      decoratePostRow(row, post, post.id, formatTimestamp(post.created), post.title, post.externalLink, post.tags, post.content, thumbnailImageSrc, thumbnailVideoSrc, thumbnailAudioSrc, thumbnailAutogenerated);
      return row;
    });
  }

  const showPosts = async (posts) => {
    postMode == "frames" ? await showPostFrames(posts) : await showPostList(posts);
    videoMobileScroll();
  }

  const videoMobileScroll = () => {
    if (window.screen.availWidth <= 600) {
      // Select all video elements on the page
      const videos = document.querySelectorAll('video');

      videos.forEach(video => {
          video.muted = true; // Mute the video to avoid autoplay restrictions
          video.loop = true; // Enable video looping

          // Initially, hide the controls
          video.controls = false;

          // Show controls when hovering over the video
          video.addEventListener('mouseover', function () {
              video.controls = true;
          });

          // Hide controls when the mouse leaves the video
          video.addEventListener('mouseout', function () {
              video.controls = false;
          });
      });

      // Function to play/pause videos based on visibility
      const videoObserver = new IntersectionObserver(entries => {
          entries.forEach(entry => {
              const video = entry.target;
              if (entry.isIntersecting) {
                  // Video is in the viewport, start playing
                  video.play().catch(error => {
                      console.error("Video failed to play automatically:", error);
                  });
              } else {
                  // Video is out of the viewport, pause playing
                  video.pause();
              }
          });
      }, {
          threshold: IndexCONFIG.threshold // Adjust this threshold if needed
      });

      // Observe each video
      videos.forEach(video => {
          videoObserver.observe(video);
      });
    }
  }

  const loadPosts = async (pageSize) => {
    if (!canLoadNewPosts) return;

    canLoadNewPosts = false;

    startLoadingAnimation('posts-loading-animation');

    const now = Math.floor(Date.now() / 1000);
    const t = now - (now % 10);

    const response = await fetch(
      `{{ assets_prefix }}planet.json?t=${t}`
    );
    const data = await response.json();

    // Decorate the header info
    decorateHeader(data);

    // Decorate the tags the first time around.
    if (!hasDecoratedTags) {
      projectTags = data.tags;
      decorateTags();
      // Setup body padding again after decorating tags.
      setupBodyPadding();
      hasDecoratedTags = true;
    }

    {% if tag_key %}
      const articles = data['articles'].filter(article => article.tags && '{{ tag_key }}' in article.tags);
    {% else %}
      const articles = data['articles'];
    {% endif %}

    // Filter articles by tags.
    const filteredPosts = !activeTags.length ? articles : articles.filter(article => activeTags.every(tag => article.tags[tag]));

    // Get the current page.
    const newPosts = filteredPosts.slice(nextPageOffset, nextPageOffset + pageSize);

    posts = posts.concat(newPosts);

    if (!newPosts.length) {
      stopLoadingAnimation('posts-loading-animation');
      return;
    }

    nextPageOffset += newPosts.length;

    const encodedIPFSUris = await Promise.all(newPosts.map(async (post) => await encodeIPFSUriFrom("{{ assets_prefix }}", post.id)));

    await loadPostsState(encodedIPFSUris);

    stopLoadingAnimation('posts-loading-animation');

    await showPosts(newPosts);

    canLoadNewPosts = true;
  }

  const toggleNavVisibility = () => {
    const forkModal = document.getElementById('fork-modal');

    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const maxScrollTop = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    if (IndexDOM.postModal.style.display == "block" || forkModal.style.display == "block") {
      hideNav();
      IndexDOM.topDomShrinkWrapper.style.borderBottomWidth = "1px";
    } else {
      if (currentScrollTop <= 0) {
        showNav();
        IndexDOM.topDomShrinkWrapper.style.borderBottomWidth = "0px";
      } else {
        IndexDOM.topDomShrinkWrapper.style.borderBottomWidth = "1px";
        if (Math.abs(currentScrollTop - lastScrollTop) < IndexCONFIG.toggleNavVisibilityScrollThreshold) return;
        if (lastScrollTop > IndexCONFIG.noScrollEffectEdgeDistance && maxScrollTop - lastScrollTop > IndexCONFIG.noScrollEffectEdgeDistance) {
          if (currentScrollTop > lastScrollTop) hideNav();
          else showNav();
        }
      }
      lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    }
  }

  const pageMorePostsIfNeeded = () => {
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const maxScrollTop = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    if (maxScrollTop - currentScrollTop < IndexCONFIG.pagingMargingBottom) loadPosts(IndexCONFIG.defaultPageSize, activeTags);
  }

  const didScroll = () => {
    toggleNavVisibility();
    pageMorePostsIfNeeded();
  }

  const setupPostMode = () => {
    const toggleView = () => {
      if (postMode == "frames") {
        IndexDOM.postFramesContainer.style.display = "block";
        IndexDOM.postListContainer.style.display = "none";
      } else {
        IndexDOM.postFramesContainer.style.display = "none";
        IndexDOM.postListContainer.style.display = "block";
      }
    }

    IndexDOM.postModeButton.addEventListener('click', async () => {
      const numberOfPostFrames = IndexDOM.postFramesContainer.children.length;
      const numberOfPostRows = IndexDOM.postListContainer.children.length;
      if (postMode == "frames") {
        postMode = "list";
        IndexDOM.listPostModeButton.classList.add("post-mode-button-active");
        IndexDOM.gridPostModeButton.classList.remove("post-mode-button-active");
        // Load any necessary frames.
        if (numberOfPostRows < numberOfPostFrames) await showPostList(posts.slice(numberOfPostRows));
      } else {
        postMode = "frames";
        IndexDOM.gridPostModeButton.classList.add("post-mode-button-active");
        IndexDOM.listPostModeButton.classList.remove("post-mode-button-active");
        // Load any necessary frames.
        if (numberOfPostFrames < numberOfPostRows) await showPostFrames(posts.slice(numberOfPostFrames));
      }
      toggleView();
    });

    toggleView();
  }

  const resetPage = async () => {
    IndexDOM.postFramesContainer.innerHTML = "";
    IndexDOM.postListContainer.innerHTML = "";

    posts = [];
    nextPageOffset = 0;
    currentRow = 1;
    greatestRightInRow = 0;
    rows = [];
    lastScrollTop = 0;
    canLoadNewPosts = true;
    await loadPosts(IndexCONFIG.defaultPageSize);
  }

  const decorateHeader = async (data) => {
    // peers
    // Peers fetching commented out
    // let ipns = data.ipns;
    // const response = await fetch(
    //   `https://www.pinnable.xyz/api/v0/ipfs/peers/${ipns}`
    // );
    // const peers = await response.json();
    // const peersCount = peers["peers"].length;
    // IndexDOM.peersCountLabel.innerHTML = peersCount;

    // balance, owners, and operator
    // Keep initial "-" values while loading (set in HTML)
    try {
      const projectData = await aggregateProjectData();
      
      // Set balance value and link
      if (projectData.balance !== null) {
        IndexDOM.balanceValue.textContent = projectData.balance;
        if (projectData.revnetUrl) {
          IndexDOM.balanceValue.href = projectData.revnetUrl;
          IndexDOM.balanceValue.target = "_blank";
        }
      } else {
        IndexDOM.balanceValue.textContent = "$0";
        IndexDOM.balanceValue.href = "#";
      }
      
      // Set owners value and link
      IndexDOM.ownersCount.textContent = projectData.owners;
      if (projectData.revnetUrl) {
        IndexDOM.ownersCount.href = projectData.revnetUrl;
        IndexDOM.ownersCount.target = "_blank";
      } else {
        IndexDOM.ownersCount.href = "#";
      }
      
      // Set operator value and link
      if (projectData.operator && projectData.operator !== "(n/a)") {
        IndexDOM.operatorValue.textContent = projectData.operator;
        if (projectData.revnetUrl) {
          IndexDOM.operatorValue.href = projectData.revnetUrl;
          IndexDOM.operatorValue.target = "_blank";
        } else {
          IndexDOM.operatorValue.href = "#";
        }
      } else {
        IndexDOM.operatorValue.textContent = "(n/a)";
        IndexDOM.operatorValue.href = "#";
      }
      
      // Prevent default behavior for placeholder links
      [IndexDOM.balanceValue, IndexDOM.ownersCount, IndexDOM.operatorValue].forEach(element => {
        element.addEventListener('click', (e) => {
          if (element.href === '#' || element.href.endsWith('#') || !element.href.includes('revnet.eth.sucks')) {
            e.preventDefault();
          }
        });
      });
    } catch (error) {
      console.error('Error fetching balance, owners, and operator:', error);
      IndexDOM.balanceValue.textContent = "$0";
      IndexDOM.balanceValue.href = "#";
      IndexDOM.ownersCount.textContent = "-";
      IndexDOM.ownersCount.href = "#";
      IndexDOM.operatorValue.textContent = "(n/a)";
      IndexDOM.operatorValue.href = "#";
      
      // Prevent default behavior for error state links
      [IndexDOM.balanceValue, IndexDOM.ownersCount, IndexDOM.operatorValue].forEach(element => {
        element.addEventListener('click', (e) => {
          e.preventDefault();
        });
      });
    }

    // page metrics - commented out
    // if (data.plausibleEnabled && data.plausibleDomain && data.plausibleAPIServer) {
    //   IndexDOM.pageMetricsLink.href = `https://${data.plausibleAPIServer}/${data.plausibleDomain}`;
    //   IndexDOM.pageMetricsLink.target = "_blank";
    // } else {
    //   if (IndexDOM.featurePageMetrics) {
    //     IndexDOM.featurePageMetrics.remove();
    //   }
    // }
  }

  const decorateTags = () => {
    const allCustomTags = IndexDOM.tagsContainer.querySelectorAll('.custom-tag');
    const tagsKey = 'tags';
    const tagValuePrefix = "custom-tag-";

    if (!Object.keys(projectTags).length) {
      IndexDOM.tagsContainer.style.display = "none";
      return;
    } else {
      IndexDOM.tagsContainer.style.display = "block";

      const slider = IndexDOM.tagsContainer;
      let isDown = false;
      let startX;
      let scrollLeft;

      let isDragging = false;
      slider.addEventListener('mousedown', (e) => {
        // Don't start dragging if clicking on a tag
        if (e.target.closest('.tag')) {
          return;
        }
        isDown = true;
        isDragging = false;
        slider.classList.add('active');
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
      });
      slider.addEventListener('mouseleave', () => {
        isDown = false;
        isDragging = false;
        slider.classList.remove('active');
      });
      slider.addEventListener('mouseup', (e) => {
        // If we were dragging, don't trigger tag clicks
        if (isDragging) {
          e.preventDefault();
        }
        isDown = false;
        isDragging = false;
        slider.classList.remove('active');
      });
      slider.addEventListener('mousemove', (e) => {
        if(!isDown) return;
        isDragging = true;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * IndexCONFIG.scrollFast; //scroll-fast
        slider.scrollLeft = scrollLeft - walk;
      });
    }

    // If no tags are active, set the default tag to active.
    if (!activeTags.length) IndexDOM.defaultTag.classList.add("active");
    // Clear tags when the default is clicked.
    IndexDOM.defaultTag.addEventListener('click', (e) => {
      // Prevent the default action
      e.preventDefault();

      // Nothing to do if the default is already selected.
      if (IndexDOM.defaultTag.classList.contains("active")) return;

      // Make it active.
      IndexDOM.defaultTag.classList.add("active");

      // No more active tags.
      for (const customTag of allCustomTags)
        if (customTag.classList.contains("active")) customTag.classList.remove("active");

      activeTags = [];

      // Get a reference to the current URL.
      const url = new URL(window.location.href);

      // Create the base URL (protocol + host + pathname)
      const baseUrl = `${url.protocol}//${url.host}${url.pathname}`;

      history.replaceState(null, "", baseUrl.toString());

      // Reset the page.
      resetPage();
    });

    // Loop through the project's tags to set up click behavior.
    for (let tag of Array.from(allCustomTags)) {
      // Get the tag value.
      const tagValue = tag.id.replace(tagValuePrefix, "");

      // Set the active tags.
      if (activeTags.includes(tagValue)) tag.classList.add("active");

      // Set the tag text.
      tag.querySelector('.tag-text').innerHTML = projectTags[tagValue];

      // Add/remove tag on click.
      tag.addEventListener('click', (e) => {
        // Prevent the default action
        e.preventDefault();

        // Get a reference to the current URL.
        const url = new URL(window.location.href);

        // If there weren't
        if (!activeTags.length) IndexDOM.defaultTag.classList.remove("active");

        // Set the active tags.
        if (activeTags.includes(tagValue)) {
          tag.classList.remove("active");

        if (activeTags.length == 1) {
           return IndexDOM.defaultTag.click();
          } else {
            // Get the values that'll be set after a click.
            // Get a reference to tags not including the active one.
            activeTags = activeTags.filter(activeTag => activeTag !== tagValue);

            url.searchParams.delete(tagsKey);

            // Set all tags except the active one.
            for (const activeTag of activeTags) url.searchParams.append(tagsKey, activeTag);
          }
        } else {
          tag.classList.add("active");

          // Add a new parameter to the URL
          url.searchParams.append(tagsKey, tagValue);
          activeTags.push(tagValue);
        }

        history.pushState(null, "", url.toString());

        // Reset the page.
        resetPage();
      });
    }
  }

  const setupBodyPadding = () => {
    IndexDOM.bodyDom.style.paddingTop = IndexDOM.topDom.offsetHeight + "px";
    // Adjust scroll top to the offset.
    document.documentElement.style.scrollPaddingTop = IndexDOM.topDom.offsetHeight + "px";
  }

  // if there is ?id= in the url, open the object page.
  const urlParams = new URLSearchParams(window.location.search);
  const id = urlParams.get('id');
  if (id) {
    const anchor = window.location.hash.substring(1);
    if (anchor) {
      window.location.href = './' + id + '/#' + anchor;
    } else {
      window.location.href = './' + id + '/';
    }
  } else {
    activeTags = urlParams.getAll('tags');
    window.addEventListener("scroll", didScroll);
    loadSettings();
    setupForking();
    loadPosts(IndexCONFIG.defaultPageSize);
    setupPostMode();
    setupBodyPadding();
    adjustSubheaderPlacement();
  }

  let isUserScroll = false;
  window.addEventListener('load', function() {
    window.requestAnimationFrame(() => {
      window.addEventListener('scroll', function() {
        if (isUserScroll) didScroll();
      });
      window.requestAnimationFrame(() => {
        isUserScroll = true;
      });
    });
  });
</script>
{% endblock %}