{{ define "main" }}
<header>{{- partial "header.html" . -}}</header>

<article class="h-entry">
<h3 class="recent-post-title">
      <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a>
    </h3>

  <div class="e-content">{{ .Content }}</div>
</article>
<a class="u-url" href="{{ .Permalink }}" style="display: none">Permalink</a>

<hr>

{{ partial "post_meta.html" . }}

{{ $upvoteEnabled := default .Site.Params.upvote .Params.upvote }} {{ if $upvoteEnabled }}
<div class="upvote-container">
  <small class="upvote">
    <button class="upvote-btn" id="upvote-btn">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        width="24"
        height="24"
        stroke="currentColor"
        stroke-width="2"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="css-i6dzq1"
      >
        <polyline points="17 11 12 6 7 11"></polyline>
        <polyline points="17 18 12 13 7 18"></polyline>
      </svg>
      <span class="upvote-count" id="upvote-count">0</span>
    </button>
  </small>
</div>


<script>
  let hasUpvoted = false;
  let upvoteBtn;
  let upvoteCount;

  // 页面加载时获取点赞数量
  document.addEventListener("DOMContentLoaded", function () {
    const slug = "{{ .Slug }}";
    upvoteBtn = document.getElementById("upvote-btn");
    upvoteCount = document.getElementById("upvote-count");
    getCount(slug);

    // 处理点赞按钮的点击事件
    upvoteBtn.addEventListener("click", handleUpvote);
  });

  // 点赞方法
  async function handleUpvote() {
    if (hasUpvoted) {
      console.log("You have already upvoted this post!");
      return;
    }
    const slug = "{{ .Slug }}";

    // 禁用按钮以防止重复点击
    upvoteBtn.disabled = true;
    // 给按钮添加 upvoted 类以赋以点击过的样式
    upvoteBtn.classList.add("upvoted");
    // 更新 upvote-count 的值 +1
    upvoteCount.innerText = parseInt(upvoteCount.innerText) + 1;

    try {
      const response = await fetch("{{ .Site.Params.upvoteURL }}upvote", {
        method: "POST",
        mode: "cors",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ postId: slug, diff: 1 }),
      });

      if (response.ok) {
        console.log("Upvote successful!");
        hasUpvoted = true;
        await getCount(slug, 3);
      } else {
        console.log("Upvote failed!");
      }
    } catch (error) {
      console.error("Error: ", error);
    } finally {
      upvoteBtn.disabled = false;
    }
  }

  // 获取 Upvote 数量的方法，支持设置重试次数，默认不重试
  async function getCount(slug, retryCount = 0) {
    try {
      const response = await fetch(
        "{{ .Site.Params.upvoteURL }}count?post=" + slug,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        },
      );

      const data = await response.json();

      if (data.code === 0) {
        const count = data.data.count;
        upvoteCount.innerText = count;
        hasUpvoted = data.data.hasUpvoted;
        if (hasUpvoted) {
          upvoteBtn.classList.add("upvoted");
        } else {
          upvoteBtn.classList.remove("upvoted");
        }
      } else {
        console.error("Failed to get upvote count: ", data.msg);
      }
    } catch (error) {
      console.error("Error: ", error);
      if (retryCount > 0) {
        setTimeout(() => {
          getCount(slug, retryCount - 1);
        }, 1000);
      }
    }
  }
</script>
{{ end }}

<!-- Place the TOC at the end to ensure the article content loads first. -->
{{ $tocEnabled := default .Site.Params.toc .Params.toc }} {{ if $tocEnabled }}
<div class="toc">{{ partial "toc.html" . }}</div>
{{ end }} {{ if .Params.comments | default true}}
<div class="comments-and-webmentions">
  <details>
    <summary>
      <p style="display: inline">评论 与 Webmentions</p>
    </summary>
    <div id="giscus-container"></div>

    <div class="wm">
      <div id="webmentions"></div>
      <script
        src="/js/webmention.min.js"
        data-id="webmentions"
        data-page-url="https://www.glowisle.me{{ .RelPermalink }}"
        data-max-webmentions="50"
        data-wordcount="30"
        data-sort-by="published"
        data-sort-dir="up"
        async
      ></script>

      <p>
        若想回复本文，请在你的博客或社媒发布含有本文链接的帖子，然后在下方表单提交链接。
      </p>
      <div class="wm-guide-content">
        <div class="webmention-form">
          <form
            id="webmention-submit-form"
            action="https://webmention.io/www.glowisle.me/webmention"
            method="post"
          >
            <!-- 自动填充的目标文章链接 -->
            <input
              type="hidden"
              name="target"
              value="https://www.glowisle.me{{ .RelPermalink }}"
            />
            <div>
              <label for="webmention-source">你的文章链接：</label>
              <input
                type="url"
                id="webmention-source"
                name="source"
                required
                pattern="https?://.+"
              />
              <button type="submit" id="webmention-submit-btn">提交</button>
            </div>
            <div id="webmention-form-feedback"></div>
          </form>
          <p>
            也可以加入 <a href="https://t.me/glowisle">Telegram 频道</a> 或
            <a href="mailto:i@glowisle.me?subject=回复《{{ .Title  }}》"
              >发送邮件</a
            >
            评论。
          </p>
          <a href="https://indieweb.org/webmention"
            >关于 Webmention 的更多信息</a
          >
          以及
          <a href="https://www.glowisle.me/posts/tear-hypocrisy-apart/"
            >为什么要这么做？</a
          >
        </div>

        <script>
          function getInitialTheme() {
            // 1. 优先检查 localStorage 中的用户偏好
            if (
              typeof localStorage !== "undefined" &&
              localStorage.getItem("theme")
            ) {
              return localStorage.getItem("theme");
            }
            // 2. 检查系统偏好
            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
              return "dark";
            }
            // 3. 默认值
            return "light";
          }

          const currentTheme = getInitialTheme();
          const giscusTheme = currentTheme === "dark" ? "dark" : "light";

          const giscusScript = document.createElement("script");
          giscusScript.src = "https://giscus.app/client.js";
          giscusScript.setAttribute(
            "data-repo",
            "yingyu5658/yingyu5658.github.io",
          );
          giscusScript.setAttribute("data-repo-id", "R_kgDOOBetsA");
          giscusScript.setAttribute("data-category", "Announcements");
          giscusScript.setAttribute("data-category-id", "DIC_kwDOOBetsM4CoF_Z");
          giscusScript.setAttribute("data-mapping", "title");
          giscusScript.setAttribute("data-strict", "0");
          giscusScript.setAttribute("data-reactions-enabled", "0");
          giscusScript.setAttribute("data-emit-metadata", "0");
          giscusScript.setAttribute("data-input-position", "bottom");
          giscusScript.setAttribute("data-theme", giscusTheme);
          giscusScript.setAttribute("data-lang", "zh-CN");
          giscusScript.crossOrigin = "anonymous";
          giscusScript.async = true;

          document.getElementById("giscus-container").appendChild(giscusScript);

          document.addEventListener("DOMContentLoaded", function () {
            const form = document.getElementById("webmention-submit-form");
            const submitBtn = document.getElementById("webmention-submit-btn");
            const feedbackEl = document.getElementById(
              "webmention-form-feedback",
            );

            if (!form) return;

            form.addEventListener("submit", async function (e) {
              e.preventDefault();

              // 禁用提交按钮防止重复提交
              const originalBtnText = submitBtn.textContent;
              submitBtn.disabled = true;
              submitBtn.textContent = "发送中...";

              // 清除之前的反馈信息
              feedbackEl.textContent = "";

              try {
                // 使用 FormData 收集表单数据
                const formData = new FormData(form);

                // 发送 POST 请求
                const response = await fetch(form.action, {
                  method: "POST",
                  headers: {
                    Accept: "application/json",
                  },
                  body: new URLSearchParams(formData),
                });

                const result = await response.json();

                if (response.ok) {
                  // 成功响应
                  feedbackEl.textContent =
                    "✅ 提交成功！Webmention 正在处理中。";
                  form.reset();
                } else {
                  // 错误响应
                  let errorMsg = "提交失败：";
                  if (result.error || result.summary) {
                    errorMsg += result.error || result.summary;
                  }
                  feedbackEl.textContent = errorMsg;
                }
              } catch (error) {
                // 网络错误
                feedbackEl.textContent =
                  "❌ 提交过程中出现网络错误，请稍后重试。";
              } finally {
                // 恢复提交按钮状态
                submitBtn.disabled = false;
                submitBtn.textContent = originalBtnText;
              }
            });
          });
        </script>

        {{ end }}
      </div>
    </div>
  </details>
</div>
{{ end }}