{{define "search"}}
{{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" value="{{.SearchKeyword}}" 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-7xl mx-auto px-4 py-8">
    <div class="flex gap-8">
        <!-- Main content (search results) -->
        <div class="flex-1">
            {{if .SearchKeyword}}
            <h2 class="text-2xl font-bold text-gray-900 mb-2">{{index .Tr "search_results_for"}}</h2>
            <p class="text-gray-600 mb-8">"{{.SearchKeyword}}" - {{if eq .Lang "zh"}}找到{{else}}Found{{end}} {{len .Articles}} {{if eq .Lang "zh"}}篇文章{{else}}articles{{end}}</p>
            {{else}}
            <h2 class="text-2xl font-bold text-gray-900 mb-8">{{index .Tr "search_title"}}</h2>
            {{end}}

            <!-- Articles Container -->
            <div 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">
                                            <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">
                    {{if .SearchKeyword}}
                        {{index .Tr "search_no_results"}}
                    {{else}}
                        {{index .Tr "home_no_posts"}}
                    {{end}}
                </div>
                {{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() {
    // 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);
})();
</script>

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