{% extends 'base.html' %}
{% block head %}
{% include 'modules/post_seo.html' %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (!window.PLANET.visitedFromPlanetClient) {
      if(document.getElementById('audio-container')){
        document.querySelector('.audio-container').style.display = 'block';
      }
      if(document.getElementById('footer')){
        document.querySelector('#footer').style.display = 'block';
      }
    } else {
      const topDom = document.getElementById('top-dom');
      topDom.style.display = "none";
      const bodyDom = document.getElementById('body-dom');
      bodyDom.style.paddingTop = "0px";
      const bodyResetButton = document.getElementById('body-reset-button');
      bodyResetButton.style.display = "none";
    }
  });
</script>
{% include 'modules/head.html' %}
{% endblock %}

{% block main %}
<div id="body-dom" >
  <div class="body-content centered-content content-top-offset">
    <div id="body-reset-button" class="mobile-padding exit-button"><span class="exit-button-text">×</span></div>
    {% include './post-page.html' %}
  </div>
</div>
{% include './fork-modal.html' %}
<script>
  const load = async () => {
    startLoadingAnimation('post-form-loading-animation');

    await loadSettings();

    const topDom = document.getElementById('top-dom');
    topDom.style.borderBottomWidth = "1px";

    const response = await fetch(
      `{{ assets_prefix }}{{ article.id }}/article.json`
    );
    const post = await response.json();

    const imageName = 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 imageSrc = imageName && './' + imageName;
    const videoSrc = {{ article.hasVideo }} ? './' + '{{ article.videoFilename }}' : null;
    const audioSrc = {{ article.hasAudio }} ? './' + '{{ article.audioFilename }}' : null;
    const name = `{{ article.title }}`;
    const postId = `{{ article.id }}`;
    const slug = `{{ article.slug }}`;
    const created = Math.floor({{ article.created.timeIntervalSince1970 }} * 1000);
    const link = `{{ article.externalLink }}`;
    const content = await loadAndRenderArticle(`{{ article.id }}`);
    const coverAutogenerated = imageName == "_cover.png";

    await decoratePostPage(postId, name, formatDate(new Date(created)), link, content, imageSrc, videoSrc, audioSrc, await encodeIPFSUriFrom('{{ assets_prefix }}', postId), coverAutogenerated, slug);

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

    const anchor = window.location.hash.substring(1);
    if (anchor) {
      window.location = (""+window.location).replace(/#[A-Za-z0-9_\-\.%]*$/,'')+"#"+anchor;
    }

    stopLoadingAnimation('post-form-loading-animation');
  }

  const toggleNavVisibility = () => {
    const topDomShrinkWrapper = document.getElementById('top-dom-shrink-wrapper');
    topDomShrinkWrapper.style.borderBottomWidth = "1px";
  }

  const setupResetButton = () => {
    const resetButton = document.getElementById('body-reset-button');
    resetButton.addEventListener('click', () => {
      window.location.href = '../';
    });
  }

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

  load();
  setupForking();
  setupResetButton();
  hideNav();
  toggleNavVisibility();
  setupBodyPadding();
</script>
{% endblock %}