{{ define "main" }}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const postItems = document.querySelectorAll('.post-item');
        postItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.classList.add('post-item-hover');
            });
            item.addEventListener('mouseleave', function() {
                this.classList.remove('post-item-hover');
            });
        });
    
        // 為每個月份標題設置隨機漸變背景
        const monthTitles = document.querySelectorAll('.month-title');
        monthTitles.forEach(title => {
            const [color1, color2, color3] = generateContrastingColors(false);
            const [color4, color5, color6] = generateContrastingColors(true);
            const angle1 = generateRandomAngle();
            const angle2 = generateRandomAngle();
            // 為每個月份標題設置兩組不同的漸變效果
            title.style.setProperty('--gradient-1', `linear-gradient(${angle1}deg, ${color1}, ${color2})`);
            title.style.setProperty('--gradient-2', `linear-gradient(${angle2}deg, ${color4}, ${color5})`);
        });
    });
    
    function generateContrastingColors(isDarkMode) {
        // 隨機選擇一個基礎色相
        const baseColor = Math.random() * 360;
    
        // 在基礎色相的基礎上較大幅度偏移，以產生更顯著不同的顏色
        const c1 = baseColor;
        const c2 = (baseColor + 180 + Math.random() * 60 - 15) % 360; // 使第二個顏色與第一個顏色有較大的差異
        const c3 = (baseColor + 90 + Math.random() * 60 - 15) % 360; // 增加第三個顏色的偏移
        const c4 = (baseColor + 270 + Math.random() * 60 - 15) % 360; // 增加第四個顏色的偏移
    
        // 將顏色的亮度和飽和度調整為暗色系或亮色系
        const adjustColor = (color, isDarkMode) => {
            const lightness = isDarkMode ? 40 : 75; // 暗色模式較暗，亮色模式較亮
            const saturation = 100; // 暗色模式和亮色模式的飽和度
            return `hsl(${color}, ${saturation}%, ${lightness}%)`;
        };
    
        // 生成暗色系或亮色系的顏色
        const color1 = adjustColor(c1, isDarkMode);
        const color2 = adjustColor(c2, isDarkMode);
        const color3 = adjustColor(c3, isDarkMode);
    
        // 返回顏色字符串
        return [color1, color2, color3];
    }
    
    function generateRandomAngle() {
        const step = 15; // 每個選項的角度步長
        const minAngle = 30; // 最小角度
        const maxAngle = 150; // 最大角度
        const totalSteps = (maxAngle - minAngle) / step + 1; // 計算在此範圍內總共多少個步驟
        const randomStep = Math.floor(Math.random() * totalSteps); // 隨機選擇一個步驟
        const randomAngle = minAngle + randomStep * step; // 計算隨機角度
        return randomAngle;
    }
</script>




<style>
/* 默認樣式 */
/* 全部寬度 */
.timeline {
    max-width: 850px;
    margin: 0 auto;
    padding: 20px;
}

/* 年份 */
.year-container {
    margin-bottom: 40px ;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 60px rgba(0, 0, 0, 0.4);
    background-color: rgba(var(--color-neutral-300), 0.5);
}

/* 年份文字與背景 */
.year {
    background-color: #d9d4d4 !important;
    padding: 10px 20px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

/* 年文章數 */
.post-count {
    background-color: #007bff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 14px;
}

/* 月份 */
.month-container {
    margin-bottom: 30px;
}

.month-title {
    font-size: 1.2rem;
    font-weight: 700;
    background: var(--gradient-1);
    padding: 0.6rem 1rem;
    border-radius: 40px;
    border: transparent;
    text-transform: uppercase;
    
    /* 使用 Flexbox 來居中文本 */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 設定行高，使文字垂直居中 */
    line-height: 1;
    
}



.dark .month-title {
    background: var(--gradient-2);
}

/* 該月文章 */
.post-list {
    list-style-type: none;
    padding: 2px;
}

/* 個別文章背景 */
.post-item {
    transition: transform 0.3s, z-index 0.3s, box-shadow 0.3s, background-color 0.3s;
    background: rgba(var(--color-neutral-100), 0.95);
}

/* 個別文章懸浮 */
.post-item-hover {
    transform: scale(1.01);
    background: rgba(var(--color-neutral-100), 0.95) !important;
}

.post-item-inner {
    display: flex;
    align-items: flex-start;
    background-color: transparent;
}

/* 文章日期文字 */
.post-date {
    font-size: 14px;
    color: rgb(var(--color-neutral-500));
    margin-right: 11px;
    margin-left: 4px;
    white-space: nowrap; /* 防止日期文字換行 */
}

/* 文章標題文字 */
.post-title {
    font-size: 20px;
    color: rgb(var(--color-neutral-800)) !important;
    text-decoration: none;
    font-weight: bold;
} 

/* 深色模式樣式 */
.dark .year {
    background-color: rgba(var(--color-neutral-900), 0.95) !important;
    color: rgb(var(--color-neutral-100));
}

.dark .year-container {
    border: 1px solid rgb(var(--color-neutral-900));
    background-color: rgba(var(--color-neutral-800), 0.3);
}

.dark .month-title {
    color: rgb(var(--color-neutral-100));
}

.dark .post-item {
    background-color: rgba(var(--color-neutral-800), 0.4);
}

.dark .post-item-hover {
    background-color: rgba(var(--color-neutral-800),0.8) !important;
}

.dark .post-date {
    color: rgb(var(--color-neutral-100));
}

.dark .post-title {
    color: rgb(var(--color-neutral-100)) !important;
}

</style>


{{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
{{ $heroStyle := .Params.heroStyle }}
{{ if not $heroStyle }}{{ $heroStyle = .Site.Params.article.heroStyle }}{{ end }}
{{ $heroStyle := print "partials/hero/" $heroStyle ".html" }}
{{ if templates.Exists $heroStyle }}
{{ partial $heroStyle . }}
{{ else }}
{{ partial "partials/hero/basic.html" . }}
{{ end }}
{{ end }}

{{ $currentLang := $.Site.Language.Lang }}
{{ $months := index $.Site.Data.months $currentLang }}

<article class="timeline">

<header id="single_header" class="mt-5 max-w-prose">
    <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
        {{ .Title | emojify }}
    </h1>
</header>


<div class="article-content max-w-prose mb-20">          
    <br>
    {{ .Content }}
</div>

<section class="all-posts mt-8 text-neutral">
{{ range .Site.RegularPages.GroupByDate "2006" }}
    <div class="year-container">

    <div class="year">
        {{ .Key }}
        <span class="post-count">{{ len .Pages }}</span>
    </div>

    <div class="content">
    {{ range .Pages.GroupByDate "January" }}
    <div class="month-container">
        <span class="month-title">
            {{ index $months .Key }}
        </span>

        <ul class="post-list">
            {{ range where .Pages "Params.exclude" "ne" true }}
            <li class="post-item">
            <div class="post-item-inner">
                <span class="post-date">{{ .Date.Format "1月2日" }}</span>
                <div class="post-details">
                    <a href="{{ .Permalink }}" class="post-title">{{ .Title }}</a>

                    <div class="">
                    <div class="basicHtml-div">
                        {{ with .Params.categories }}
                        <div class="flex flex-wrap items-center mr-4 mb-2">
                        <span class="text-sm text-neutral-500 dark:text-neutral-400" style="font-size: 1rem; position: relative; top: -0.10em; left: -0.0em; margin-right: .5rem;">
                        {{ partial "icon.html" "list" }}
                        </span>
                        {{ range . }}
                        <span class="mr-1 mb-1">
                        <a href="{{ printf "/categories/%s" (urlize . | lower) }}" class="inline-block relative">
                        {{ partial "badge.html" . }}
                        </a>
                        </span>
                        {{ end }}
                        </div>
                        {{ end }}
                    </div>
                    <div class="basicHtml-div">
                        {{ with .Params.tags }}
                        <div class="flex flex-wrap items-center mr-4 mb-2">
                        <span class="text-sm text-neutral-500 dark:text-neutral-400" style="font-size: 1rem; position: relative; top: -0.1em; left: -0.0em; margin-right: .5rem;">
                        {{ partial "icon.html" "tag" }}
                        </span>
                        {{ range . }}
                        <span class="mr-1 mb-1">
                        <a href="{{ printf "/tags/%s" (urlize . | lower) }}" class="inline-block relative">
                        {{ partial "badge.html" . }}
                        </a>
                        </span>
                        {{ end }}
                        </div>
                        {{ end }}
                    </div>

                    </div>
                </div>
            </div>
            </li>
            {{ end }}
        </ul>

    </div>
    {{ end }}
    </div>
    </div>
{{ end }}
</section>

</article>

    
<!-- <script src="{{ "js/archives.js" | relURL }}"></script> -->

{{ end }}

{{ define "main" }}
{{ .Scratch.Set "scope" "single" }}

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f5f5f5;
        color: #333;
    }

    .timeline {
        max-width: 800px;
        margin: 0 auto;
    }

    .container {
        padding: 10px 0;
        background-color: inherit;
        width: 100%;
        margin-bottom: 20px;
    }

    .date {
        padding: 15px;
        color: #000000;
        font-weight: bold;
        font-size: 1.8em;
        text-align: left;
        border-radius: 6px;
    }

    .content {
        padding: 20px 30px;
        background-color: white;
        border-radius: 6px;
    }

    .content h2 {
        margin-top: 0;
    }

    .content p {
        margin: 10px 0;
    }

    .post-date {
        color: #6e6e6e;
        margin-right: 10px;
    }

    /* 深色模式样式 */
    .dark body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }

    .dark .container {
        background-color: inherit;
    }

    .dark .date {
        color: #ffffff;
    }

    .dark .content {
        background-color: #2a2a2a;
    }

    .dark .content h2 {
        color: #f0f0f0;
    }

    .dark .post-date {
        color: #bbbbbb;
    }
</style>

<article class="timeline">
    {{ if .Params.showHero | default (.Site.Params.article.showHero | default false) }}
    {{ $heroStyle := .Params.heroStyle }}
    {{ if not $heroStyle }}{{ $heroStyle = .Site.Params.article.heroStyle }}{{ end }}
    {{ $heroStyle := print "partials/hero/" $heroStyle ".html" }}
    {{ if templates.Exists $heroStyle }}
    {{ partial $heroStyle . }}
    {{ else }}
    {{ partial "partials/hero/basic.html" . }}
    {{ end }}
    {{ end }}

    <header id="single_header" class="mt-5 max-w-prose">
        {{ if .Params.showBreadcrumbs | default (.Site.Params.article.showBreadcrumbs | default false) }}
        {{ partial "breadcrumbs.html" . }}
        {{ end }}
        <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
            {{ .Title | emojify }}
        </h1>
    </header>

    <section class="all-posts mt-8 article-content">
        {{ range .Site.RegularPages.GroupByDate "2006" }}
        <div class="container">
            <div class="date">{{ .Key }}</div>
            <div class="content">
                {{ range .Pages.GroupByDate "January" }}
                <h3 class="text-xl font-semibold mt-6 mb-3">
                    {{ index $.Site.Data.month (printf "%d" .Key) }}
                </h3>
                <ul class="list-none" style="padding-left: 1.2em;">
                    {{ range .Pages }}
                    <li class="mb-3 flex items-start">
                        <span class="post-date">{{ .Date.Format "01-02" }}</span>
                        <a href="{{ .Permalink }}" class="text-primary-600 dark:text-primary-400 hover:underline">{{ .Title }}</a>
                    </li>
                    {{ end }}
                </ul>
                {{ end }}
            </div>
        </div>
        {{ end }}
    </section>
    
    <footer class="pt-8 max-w-prose print:hidden">
        {{ partial "article-pagination.html" . }}
        {{ if .Params.showComments | default (.Site.Params.article.showComments | default false) }}
        {{ if templates.Exists "partials/comments.html" }}
        <div class="pt-3">
            <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
            <div class="pt-3">
                {{ partial "comments.html" . }}
            </div>
        </div>
        {{ else }}
        {{ warnf "[BLOWFISH] Comments are enabled for %s but no comments partial exists." .File.Path }}
        {{ end }}
        {{ end }}
    </footer>
</article>

{{ end }}

{{ with  .Params.Tags | default .Site.Params.keywords -}}
  <meta name="keywords" content="{{ range . }}{{ . }}, {{ end -}}" />
  {{- end }}

  {{- $mytags := .Params.Tags | default slice -}}
  {{- $mykeywords := .Params.Keywords | default .Site.Params.keywords -}}
  {{- $allKeywords := $mytags | append $mykeywords | uniq -}}
  {{ if $allKeywords }}
  <meta name="keywords" content="{{ delimit $allKeywords ", " }}" />
  {{ end }}