---
import LastUpdated from "@astrojs/starlight/components/LastUpdated.astro";
import EditLink from "@astrojs/starlight/components/EditLink.astro";
import Pagination from "@astrojs/starlight/components/Pagination.astro";
---

<footer class="sl-flex">
  <div class="meta sl-flex">
    <EditLink {...Astro.props} />
    <LastUpdated {...Astro.props} />
  </div>
  <Pagination {...Astro.props} />
  <div id="tree-nation-offset-website"></div>
  <script>
    TreeNationOffsetWebsite({
      code: "a17464e0cd351220",
      lang: "en",
      theme: "dark",
    }).render("#tree-nation-offset-website");
  </script>
  <video
    autoplay={true}
    loop={true}
    muted={true}
    playsinline={true}
    src="https://cdn.nhcarrigan.com/overlay.webm"
    style={{ pointerEvents: "none", position: "fixed", top: 0, left: 0, opacity: 0.25, zIndex:100, width: "100vw", height: "100vh"}}></video>
</footer>

<style>
  footer {
    flex-direction: column;
    gap: 1.5rem;
  }
  .meta {
    gap: 0.75rem 3rem;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 3rem;
    font-size: var(--sl-text-sm);
    color: var(--sl-color-gray-3);
  }
  .meta > :global(p:only-child) {
    margin-inline-start: auto;
  }
  #tree-nation-offset-website {
    margin: auto;
  }
</style>
