{{ define "main" }}
<div class="blogs-page">
  <div class="blogs-container">
    <div class="blogs-screen">
      <div class="blogs-content">
        <nav class="blog-navigation">
          <a href="/blog/" class="nav-link back-link">← All Blog Posts</a>
        </nav>

        <article class="blog-post-card">
          <h1 class="blog-title">
            {{ .Title }} {{ if .Date }}
            <span class="blog-date">{{ .Date.Format "02-01-2006" }}</span>
            {{ end }}
          </h1>
          {{ if .Params.tags }}
          <div class="blog-tags">
            {{ range .Params.tags }}
            <span class="tag">{{ . }}</span>
            {{ end }}
          </div>
          {{ end }}
          <div class="blog-summary">{{ .Content }}</div>
        </article>

        <section class="blog-contact-section">
          <h2 class="contact-title">Contact</h2>
          <div class="contact-content">
            <p>
              If you found this interesting, have any comments, questions,
              corrections, or just fancy saying "hello" please feel free to get
              in touch.
            </p>
            <div class="contact-email">
              <span class="contact-label">Email:</span>
              <a href="mailto:dan@ritual.sh">dan@ritual.sh</a>
            </div>
            <div class="contact-pgp">
              <span class="contact-label">PGP Public Key:</span>
              <div class="pgp-actions">
                <a
                  href="/publickey.asc"
                  download
                  class="pgp-button download-key"
                >
                  <span class="button-icon">↓</span> Download
                </a>
                <button id="copy-pgp-key" class="pgp-button copy-key">
                  <span class="button-icon">⎘</span> Copy to Clipboard
                </button>
              </div>
              <div id="copy-feedback" class="copy-feedback"></div>
            </div>
          </div>
        </section>

        <nav class="blog-post-navigation">
          <div class="post-nav-links">
            {{ with .PrevInSection }}
            <a href="{{ .Permalink }}" class="nav-link prev-post"
              >← {{ .Title }}</a
            >
            {{ else }}
            <span class="nav-link disabled">← Previous</span>
            {{ end }} {{ with .NextInSection }}
            <a href="{{ .Permalink }}" class="nav-link next-post"
              >{{ .Title }} →</a
            >
            {{ else }}
            <span class="nav-link disabled">Next →</span>
            {{ end }}
          </div>
        </nav>
      </div>
    </div>
    <div class="window">{{ partial "elements/window.html" . }}</div>
    <div class="blogs-lavalamp">{{ partial "elements/lavalamp.html" . }}</div>
  </div>
</div>

<script src="/js/footnote-scroll.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const copyButton = document.getElementById("copy-pgp-key");
    const feedback = document.getElementById("copy-feedback");

    if (copyButton) {
      copyButton.addEventListener("click", async function () {
        try {
          const response = await fetch("/publickey.asc");
          const pgpKey = await response.text();

          await navigator.clipboard.writeText(pgpKey);

          feedback.textContent = "PGP key copied to clipboard!";
          feedback.classList.add("show", "success");

          setTimeout(() => {
            feedback.classList.remove("show");
          }, 3000);
        } catch (err) {
          feedback.textContent = "Failed to copy key";
          feedback.classList.add("show", "error");

          setTimeout(() => {
            feedback.classList.remove("show");
          }, 3000);
        }
      });
    }
  });
</script>

{{ end }}