<footer class="text-gray-700 body-font">
  <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
    <p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-1 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">
      <a href="{{ .Site.BaseURL }}">&copy; {{ .Site.Params.Author }}</a>
    </p>
    <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
      {{ if .Site.Social.wechat }}
      <a class="text-gray-500 weixin-icon" href="#">
        <i class="fab fa-weixin"></i>
        <span class="weixin-pop"
          ><i></i>微信扫一扫关注<br />
          <img
            height="104"
            width="104"
            src="./images/wechat.jpeg"
        /></span>
      </a>
      {{ end }} {{ if .Site.Social.twitter }}
      <a class="ml-3 text-gray-500" href="{{ .Site.Social.twitter }}">
        <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
          <path
            d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
          ></path>
        </svg>
      </a>
      {{ end }} {{ if .Site.Social.instagram }}
      <a class="ml-3 text-gray-500" href="{{ .Site.Social.instagram }}">
        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
          <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
          <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
        </svg>
      </a>
      {{ end }} {{ if .Site.Social.linkedin }}
      <a class="ml-3 text-gray-500" href="{{ .Site.Social.linkedin }}">
        <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
          <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
          <circle cx="4" cy="4" r="2" stroke="none"></circle>
        </svg>
      </a>
      {{ end }}
    </span>
  </div>
</footer>
{{ template "_internal/google_analytics_async.html" . }}

<script>
  const allTypes = ["all",  {{ range .Site.Sections }}"{{lower .Title}}",{{ end }}];
  const filter = (event, type) => {
    const isActive = event.target.classList.contains("active");

    showAll();
    if (!isActive) {
      hideAll();
      event.target.classList.add("active");
      if (type !== "other") {
        document
          .querySelectorAll(`.${type}`)
          .forEach((item) => item.classList.remove("hide"));
      } else {
        document
          .querySelectorAll(
            `.card${specificTypes.map((type) => `:not(.${type})`).join("")}`
          )
          .forEach((item) => item.classList.remove("hide"));
      }
    }
  };

  const showAll = () => {
    allTypes.forEach((type) => {
      document
        .querySelectorAll(`.${type}`)
        .forEach((item) => item.classList.remove("hide"));
      document
        .querySelectorAll(`.filter-${type}`)
        .forEach((filterItem) => filterItem.classList.remove("active"));
    });
  };

  const hideAll = () => {
    allTypes.forEach((type) => {
      document
        .querySelectorAll(`.container a.card`)
        .forEach((item) => item.classList.add("hide"));
    });
  };

  allTypes.forEach((type) => {
    document
      .querySelectorAll(`.filter-${type}`)
      .forEach((filterItem) =>
        filterItem.addEventListener("click", (event) => filter(event, type))
      );
  });

  const showAllButton = document.querySelector(`.show-all`)
  if(showAllButton) showAllButton.addEventListener("click", showAll);
</script>

<style>
  .weixin-icon {
    position: relative;
  }
  .weixin-pop {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    width: 112px;
    height: 112px;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
  }
  .weixin-icon:hover .weixin-pop {
    visibility: visible;
    opacity: 1;
  }
</style>
