{{ define "main" }}
<header>
<a href="{{ "" | relURL }}" class="title">
  <p class="site-title">{{ .Site.Title }}</p>
</a>
<nav>{{- partial "nav.html" . -}}</nav>
</header>


<content>
  {{ if .Data.Singular }}
  <h3 style="margin-bottom:0">Filtering for "{{ .Title }}"</h3>
  <small>
    <a href="{{ "blog" | relURL }}">Remove filter</a>
  </small>
  {{ end }}

  {{ if .Site.Params.postSearch }}
  <input id="search-input" type="text" placeholder="Search..." style="margin-top: 16px" />
  <script>
    // 等待 DOM 完全加载后执行
    document.addEventListener('DOMContentLoaded', function () {
      // 缓存 DOM 元素
      const searchInput = document.getElementById('search-input');
      const posts = document.querySelectorAll('.blog-posts li');
      const years = document.querySelectorAll('.blog-posts h3');

      // 更新搜索结果
      function updateSearchResults(searchTerm) {
        let visiblePosts = 0;
        const displayedYears = new Set();
        posts.forEach(function (post) {
          const title = post.querySelector('a').textContent.toLowerCase();
          const year = post.querySelector('time').getAttribute('datetime').split('-')[0];
          if (title.includes(searchTerm)) {
            post.style.display = '';
            visiblePosts++;
            displayedYears.add(year);
          } else {
            post.style.display = 'none';
          }
        });

        {{ if .Site.Params.groupByYear }}
        years.forEach(function (y) {
          const year = y.textContent;
          y.style.display = displayedYears.has(year) ? '' : 'none';
        });
        {{ end }}

        {{ if .Site.Params.showPostCount }}
        const countText = `There ${visiblePosts <= 1 ? `is ${visiblePosts} piece.` : `are ${visiblePosts} pieces.`}`;
        document.getElementById('post-count').innerHTML = countText;
        {{ end }}
      }

      searchInput.addEventListener('input', function () {
        updateSearchResults(this.value.toLowerCase().trim());
      });
    });
  </script>
  {{ end }}

  {{ $allPosts := where .Site.RegularPages "Type" "eq" "posts" }}
  {{ $excludePosts := where $allPosts "Params.categories" "intersect" (slice "1") }}
  {{ $postPages := ($allPosts | complement $excludePosts) }}

  {{ if .Site.Params.showPostCount }}
  <p id="post-count">There {{ if le (len $postPages) 1 }} is {{ len $postPages }} piece. {{ else }} are {{ len $postPages }} pieces. {{ end }}</p>
  {{ end }}

  <ul class="blog-posts">
    {{ $currentYear := 0 }}
    {{ range $postPages }}
      {{ if .Site.Params.groupByYear }}
        {{ $year := .Date.Year }}
        {{ if ne $year $currentYear }}
          <h3>{{ $year }}</h3>
          {{ $currentYear = $year }}
        {{ end }}
      {{ end }}
      <li>
        <span class="{{ if .Site.Params.groupByYear }} grouped {{ else }} ungrouped {{ end }}">
          <i>
            <time datetime='{{ .Date.Format "2006-01-02" }}' pubdate>
              {{ if .Site.Params.groupByYear }}
                {{ .Date.Format (default "2006-01-02" .Site.Params.dateFormat) }}
              {{ else }}
                {{ .Date.Format (default "02 Jan, 2006" .Site.Params.dateFormat) }}
              {{ end }}
            </time>
          </i>
        </span>
        <a href="{{ .Permalink }}">{{ .Title }}</a>
      </li>
    {{ else }}
      <li>No posts yet</li>
    {{ end }}
  </ul>

  {{ if .Data.Singular }}
  {{ else }}
  <small>
    <div>
      {{ range .Site.Taxonomies.tags }}
        <a href="{{ .Page.Permalink }}">#{{ .Page.Title }}</a>&nbsp;
      {{ end }}
    </div>
  </small>
  {{ end }}
</content>
{{ end }}