---
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="extra-footer-content">
  <div id="tree-nation-offset-website"></div>
    <a href="https://buy.stripe.com/cN24iTfqu1j6b3afZ2" target="_blank" rel="noreferrer">
    <img src="https://cdn.nhcarrigan.com/donate.png" alt="Donate" style="width: 70px; height: 70px;">
  </a>
  </div>
  <script>
    TreeNationOffsetWebsite({
      code: "a17464e0cd351220",
      lang: "en",
      theme: "dark",
    }).render("#tree-nation-offset-website");
  </script>
</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>
