{{define "home"}}
{{template "header" .}}

<!-- Search Box -->
<section class="max-w-5xl mx-auto px-4 py-6">
    <div class="flex justify-center">
        <form action="/search" method="get" class="w-full max-w-2xl">
            <div class="relative">
                <input type="text" name="q" placeholder="{{index .Tr "search_placeholder"}}"
                    class="w-full px-4 py-3 pl-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors">
                <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
        </form>
    </div>
</section>

<section class="max-w-5xl mx-auto px-4 py-20 text-center">
    <h1 class="text-5xl font-extrabold text-gray-900 mb-4 flex items-center justify-center gap-3">
        <svg class="w-12 h-12 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
        </svg>
        <span>{{if .SiteHomeWelcome}}{{.SiteHomeWelcome}}{{else}}{{index .Tr "home_welcome"}}{{end}}</span>
    </h1>
    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto flex items-center justify-center gap-2">
        <svg class="w-6 h-6 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
        <span>{{if .SiteHomeSubtitle}}{{.SiteHomeSubtitle}}{{else}}{{index .Tr "home_subtitle"}}{{end}}</span>
    </p>
</section>

<section class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex gap-8">
        <!-- Main content (articles) -->
        <div class="flex-1">
            {{if .FilterTag}}
            <div class="mb-6 flex items-center gap-2 text-sm">
                <span class="text-gray-600">{{index .Tr "tag_filter"}}:</span>
                <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full">
                    {{if eq .Lang "zh"}}{{.FilterTag.NameZh}}{{else}}{{.FilterTag.NameEn}}{{end}}
                </span>
                <a href="/" class="text-blue-600 hover:text-blue-800">{{index .Tr "tag_all"}}</a>
            </div>
            {{end}}

            <h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">{{index .Tr "home_latest"}}</h2>

            <!-- Articles Container -->
            <div id="articlesContainer" class="space-y-6">
        {{range .Articles}}
        <article class="article-card bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow" data-cover="{{.Cover}}">
            <a href="/article/{{.Slug}}" class="block article-link">
                <div class="article-content">
                    <!-- Cover will be positioned by JS -->
                    {{if .Cover}}
                    <div class="article-cover">
                        <img src="{{.Cover}}" alt="{{.Title}}" class="article-image" loading="lazy">
                    </div>
                    {{end}}

                    <div class="article-text p-6">
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">
                            {{.Title}}
                            {{if .IsTop}}<span class="align-middle text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded ml-1">{{index $.Tr "article_is_top"}}</span>{{end}}
                        </h3>
                        {{if .Summary}}
                        <p class="text-gray-500 text-sm line-clamp-3 mb-3">{{.Summary}}</p>
                        {{end}}
                        {{if .Tags}}
                        <div class="flex items-center gap-2 flex-wrap mb-3">
                            {{range .Tags}}
                            <a href="/?tag={{.Slug}}" class="text-xs px-2 py-1 bg-gray-100 hover:bg-blue-100 text-gray-600 hover:text-blue-600 rounded transition-colors">
                                {{if eq $.Lang "zh"}}{{.NameZh}}{{else}}{{.NameEn}}{{end}}
                            </a>
                            {{end}}
                        </div>
                        {{end}}
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-blue-600 font-medium">{{index $.Tr "home_read_more"}} →</span>
                            <div class="flex items-center gap-4 text-sm text-gray-500">
                                <span class="flex items-center gap-1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                    </svg>
                                    {{.ViewCount}}
                                </span>
                                <span class="flex items-center gap-1" data-article-id="{{.ID}}">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                    </svg>
                                    <span class="comment-count">{{index $.CommentCounts .ID}}</span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </article>
        {{else}}
        <div class="text-center text-gray-500 py-12">{{index .Tr "home_no_posts"}}</div>
        {{end}}
    </div>

    <!-- Loading indicator -->
    <div id="loadingIndicator" class="hidden text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="text-gray-500 mt-2">{{if eq .Lang "zh"}}加载中...{{else}}Loading...{{end}}</p>
    </div>

    <!-- No more articles message -->
    <div id="noMoreArticles" class="hidden text-center text-gray-500 py-8">
        {{if eq .Lang "zh"}}没有更多文章了{{else}}No more articles{{end}}
    </div>
        </div>

        <!-- Sidebar (tags) -->
        <aside class="w-72 flex-shrink-0 hidden lg:block">
            <div class="sticky top-6">
                <h3 class="text-lg font-bold text-gray-900 mb-4">{{index .Tr "tags_title"}}</h3>
                {{if .Tags}}
                <div class="flex flex-wrap gap-2">
                    {{range .Tags}}
                    <a href="/?tag={{.Slug}}"
                        class="px-3 py-1 text-sm bg-gray-100 hover:bg-blue-100 text-gray-700 hover:text-blue-700 rounded-full transition-colors inline-flex items-center gap-1">
                        <span>{{if eq $.Lang "zh"}}{{.NameZh}}{{else}}{{.NameEn}}{{end}}</span>
                        <span class="text-xs text-gray-500">({{.Count}})</span>
                    </a>
                    {{end}}
                </div>
                {{else}}
                <p class="text-sm text-gray-500">{{if eq .Lang "zh"}}暂无标签{{else}}No tags yet{{end}}</p>
                {{end}}
            </div>
        </aside>
    </div>
</section>

<style>
/* Article card layouts */
.article-card {
    position: relative;
}

.article-link {
    text-decoration: none;
    color: inherit;
}

.article-content {
    display: flex;
}

/* Default: no cover or loading */
.article-content {
    flex-direction: column;
}

/* Horizontal layout (landscape image on top) */
.article-card.layout-horizontal .article-content {
    flex-direction: column;
}

.article-card.layout-horizontal .article-cover {
    width: 100%;
    height: 400px;
    overflow: hidden;
    background: #f3f4f6;
}

.article-card.layout-horizontal .article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vertical layout (portrait/square image on left) */
.article-card.layout-vertical .article-content {
    flex-direction: row;
}

.article-card.layout-vertical .article-cover {
    width: 280px;
    min-width: 280px;
    height: 200px;
    overflow: hidden;
    background: #f3f4f6;
}

.article-card.layout-vertical .article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card.layout-vertical .article-text {
    flex: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-card.layout-vertical .article-content {
        flex-direction: column;
    }

    .article-card.layout-vertical .article-cover {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

/* Line clamp utility */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>

<script>
(function() {
    let currentPage = 1;
    let isLoading = false;
    let hasMore = true;

    const container = document.getElementById('articlesContainer');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const noMoreArticles = document.getElementById('noMoreArticles');

    // Determine layout based on image aspect ratio
    function determineLayout(card) {
        const cover = card.getAttribute('data-cover');
        if (!cover) {
            return; // No cover, default column layout
        }

        const img = card.querySelector('.article-image');
        if (!img) return;

        // Wait for image to load
        if (!img.complete) {
            img.addEventListener('load', function() {
                applyLayout(card, img);
            });
        } else {
            applyLayout(card, img);
        }
    }

    function applyLayout(card, img) {
        const width = img.naturalWidth;
        const height = img.naturalHeight;
        const aspectRatio = width / height;

        // If aspect ratio > 1.2, use horizontal (landscape)
        // Otherwise use vertical (portrait/square on left)
        if (aspectRatio > 1.2) {
            card.classList.add('layout-horizontal');
        } else {
            card.classList.add('layout-vertical');
        }
    }

    // Initialize existing articles
    document.querySelectorAll('.article-card').forEach(determineLayout);

    // Load more articles
    function loadMoreArticles() {
        if (isLoading || !hasMore) return;

        isLoading = true;
        loadingIndicator.classList.remove('hidden');

        fetch('/api/articles?page=' + (currentPage + 1))
            .then(response => response.json())
            .then(data => {
                if (data.articles && data.articles.length > 0) {
                    currentPage++;
                    data.articles.forEach(article => {
                        const articleHTML = createArticleCard(article);
                        container.insertAdjacentHTML('beforeend', articleHTML);
                    });

                    // Determine layout for new cards
                    const newCards = container.querySelectorAll('.article-card:not(.layout-horizontal):not(.layout-vertical)');
                    newCards.forEach(determineLayout);
                }

                hasMore = data.hasMore;

                if (!hasMore) {
                    noMoreArticles.classList.remove('hidden');
                }

                isLoading = false;
                loadingIndicator.classList.add('hidden');
            })
            .catch(error => {
                console.error('Error loading articles:', error);
                isLoading = false;
                loadingIndicator.classList.add('hidden');
            });
    }

    // Create article card HTML
    function createArticleCard(article) {
        const topBadge = article.is_top ?
            '<span class="align-middle text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded ml-1">{{index .Tr "article_is_top"}}</span>' : '';

        const coverHTML = article.cover ?
            `<div class="article-cover">
                <img src="${article.cover}" alt="${escapeHtml(article.title)}" class="article-image" loading="lazy">
            </div>` : '';

        const summaryHTML = article.summary ?
            `<p class="text-gray-500 text-sm line-clamp-3 mb-3">${escapeHtml(article.summary)}</p>` : '';

        const commentCount = article.comment_count || 0;
        const viewCount = article.view_count || 0;

        return `
            <article class="article-card bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow" data-cover="${article.cover || ''}">
                <a href="/article/${article.slug}" class="block article-link">
                    <div class="article-content">
                        ${coverHTML}
                        <div class="article-text p-6">
                            <h3 class="text-xl font-semibold text-gray-800 mb-2">
                                ${escapeHtml(article.title)}
                                ${topBadge}
                            </h3>
                            ${summaryHTML}
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-blue-600 font-medium">{{index .Tr "home_read_more"}} →</span>
                                <div class="flex items-center gap-4 text-sm text-gray-500">
                                    <span class="flex items-center gap-1">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                        ${viewCount}
                                    </span>
                                    <span class="flex items-center gap-1">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                        </svg>
                                        ${commentCount}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </article>
        `;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Infinite scroll
    function checkScroll() {
        const scrollPosition = window.innerHeight + window.scrollY;
        const threshold = document.documentElement.scrollHeight - 500;

        if (scrollPosition >= threshold && !isLoading && hasMore) {
            loadMoreArticles();
        }
    }

    // Throttle scroll event
    let scrollTimeout;
    window.addEventListener('scroll', function() {
        if (scrollTimeout) {
            clearTimeout(scrollTimeout);
        }
        scrollTimeout = setTimeout(checkScroll, 100);
    });

    // Initial check in case content is short
    setTimeout(checkScroll, 500);
})();
</script>

{{template "footer" .}}
{{end}}